[Java] Build your own Android app to learn Java

1 minute read

*For the content of the article, we are considering transferring it to the Hatena Blog.

What kind of application

My eldest son was doing “Orikochokin” in a nursery class, I’m enjoying the fact that when it collects I decided to make my own app like a stamp card to manage points for children. I think there are as many apps as you can look for, but I’ll make them because I’m learning.

Environment Language App name
AndroidStudio4.0.1 Java OrikouChokin

How to design a stamp card

For the time being, I came up with the idea that “ImageButtons” are arranged in a grid, When you click it, the image of the button will be replaced and it will appear as if 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>

This will put the five buttons horizontally. For the time being, to make it about 5x4, write four more blocks of <TableRow></TableRow>. Then it becomes as follows. The image of the button is a psychedelic triceratops written by the eldest son. (Button image settings will be described later) Clicking on Triceratops will change it into a psychedelic Brachiosaurus.

Even though 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, If the eldest son enjoyed the process of completing the application...

Button image settings

Images used in the app such as Triceratops mentioned above should be placed in the following location of the project. AndroidStudioProjects\OrikouChokin\app\src\main\res\drawable image.png If you place it here, Android Studio will supplement it when you enter "@" in the srcCompat property of ImageButton. image.png The button is now Triceratops.

setOnClickListener for a large number of buttons

(Continue writing tomorrow)