Create your own Android app for Java learning

• Regarding the content of the article, we are considering transferring it to the Hatena blog.

What kind of app to make

My eldest son was doing something called "Orikouchokin" in a nursery class I enjoy that there is something good when it accumulates, so I decided to make my own app for children, such as a stamp card that manages points. I think there are many such apps to look for, but since the purpose is learning, I will make my own.

How to design a stamp card

For the time being, I came up with the idea of arranging ʻImageButton` in a grid pattern. When you click on it, the image of the button is replaced and it looks like you are stamping.

Place the TableLayout inside the default ConstraintLayout.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="358dp"
        android:layout_height="569dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.493"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:background="@android:color/transparent"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/kyouryu2" />

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:background="@android:color/transparent"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/kyouryu2" />

            <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:background="@android:color/transparent"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/kyouryu2" />

            <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:background="@android:color/transparent"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/kyouryu2" />

            <ImageButton
                android:id="@+id/imageButton5"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:background="@android:color/transparent"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/kyouryu2" />
        </TableRow>

Now the 5 buttons are lined up horizontally. For the time being, in order to make it about 5x4, I will describe four more chunks of <TableRow> </ TableRow>. Then it will be as follows. The image of the button is a psychedelic triceratops written by the eldest son. (Button image settings will be described later) Implement it so that clicking on Triceratops will turn it into a psychedelic Brachiosaurus.

Although it is a stamp card, it is strange that the picture is included from the beginning, so I will try to make it like that later, I hope my eldest son will enjoy the process of completing the app. </ font>