Android App Development Course in Kotlin, Creating the Keypad Screen of a Phone App

In Android app development, UI/UX is a very important factor. In this course, we will learn how to implement the keypad screen of a phone app using Kotlin. Through this example, you will learn basic layout construction, button actions, event handling, and UI state management.

1. Project Setup

After launching Android Studio, create a new project. Please follow the settings below:

• Application Name: PhoneDialer
• Language: Kotlin
• Minimum API Level: API 21: Android 5.0 (Lollipop)

Then click ‘Finish’ to start the project.

2. Creating Layout

Now let’s modify the main XML layout file to design the keypad screen. Open the res/layout/activity_main.xml file and add the following code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/display"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:layout_alignParentTop="true"
        android:padding="16dp"
        android:background="#e0e0e0"
        android:gravity="end" />

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_above="@id/display"
        android:layout_marginTop="16dp"
        android:rowCount="4"
        android:columnCount="3"
        android:layout_gravity="center">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="1"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="2"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="3"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="4"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="5"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button6"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="6"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button7"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="7"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button8"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="8"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button9"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="9"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button_star"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="*"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button0"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="0"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button_hash"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:text="#"
            android:textSize="24sp" />

    </GridLayout>

</RelativeLayout>

In the code above, we created a simple text view and a grid layout to build the keypad. Each button includes numbers from 0 to 9, as well as the asterisk (*) and the hash (#). Next, we will set up click events for each button.

3. Adding Button Click Listeners

Now let’s open the MainActivity.kt file and add button click listeners. Modify the code as follows:

package com.example.phonedialer

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var display: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        display = findViewById(R.id.display)

        val button1 = findViewById(R.id.button1)
        val button2 = findViewById(R.id.button2)
        val button3 = findViewById(R.id.button3)
        val button4 = findViewById(R.id.button4)
        val button5 = findViewById(R.id.button5)
        val button6 = findViewById(R.id.button6)
        val button7 = findViewById(R.id.button7)
        val button8 = findViewById(R.id.button8)
        val button9 = findViewById(R.id.button9)
        val button0 = findViewById(R.id.button0)
        val buttonStar = findViewById(R.id.button_star)
        val buttonHash = findViewById(R.id.button_hash)

        val buttons = listOf(button1, button2, button3, button4, button5, button6, button7, button8, button9, button0, buttonStar, buttonHash)

        for (button in buttons) {
            button.setOnClickListener {
                onButtonClick(it as Button)
            }
        }
    }

    private fun onButtonClick(button: Button) {
        display.append(button.text)
    }
}

In the code above, we set click listeners for each button, and every time a button is pressed, the corresponding number appears on the screen. The onButtonClick method retrieves the text of the pressed button and appends it to the display TextView.

4. Running and Testing the App

The code is now ready, so let’s run the app to check if the keypad works properly. Click the ‘Run’ button in Android Studio to execute it on the emulator.

This keypad is designed to be easily usable, considering user experience. Every time a number is clicked, that number appears in the top TextView.

5. Developing Additional Features

You can add a few additional functionalities to this basic version. For example, you can add a Clear Number and Call button to make it suitable for an actual phone app. We will cover this part in the next steps.

5.1 Adding a Clear Number Button

To add a button that can clear the number, let’s add a clear button to the above XML file:

<Button
    android:id="@+id/button_clear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Clear"
    android:textSize="24sp"
    android:layout_marginTop="16dp" />

Now, let’s return to MainActivity.kt and add a click listener for this button:

val buttonClear = findViewById(R.id.button_clear)
buttonClear.setOnClickListener {
    display.text = ""
}

5.2 Adding a Call Button

To add the calling feature, you’ll also need to add a call button in the XML file as follows:

<Button
    android:id="@+id/button_call"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Call"
    android:textSize="24sp"
    android:layout_marginTop="16dp" />

Then, return to MainActivity.kt to set up the click listener for the call button. This button click will require adding Permissions to actually make a call. First, add the following permission to AndroidManifest.xml:

<uses-permission android:name="android.permission.CALL_PHONE" />

And then, add the click listener for button_call:

val buttonCall = findViewById(R.id.button_call)
buttonCall.setOnClickListener {
    val numberToCall = display.text.toString()
    if (numberToCall.isNotEmpty()) {
        val dialIntent = Intent(Intent.ACTION_CALL)
        dialIntent.data = Uri.parse("tel:$numberToCall")
        startActivity(dialIntent)
    }
}

6. Conclusion

– Now, a basic keypad app has been completed. By utilizing UI components in Kotlin and Android, we were able to create a simple phone app. I hope this course has helped you learn the basics of Android app development.

– Additionally, implementing various features can help you gain more experience and develop it into an app that can be used in real services.

I hope this course has been helpful, and I wish you success on your Android development journey!