The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore how to build user interfaces (UIs) in Android using Kotlin. This module will cover the basics of Android UI components, layouts, and how to handle user interactions. By the end of this section, you will be able to create simple and complex UIs for your Android applications.

Key Concepts

Android UI Components: Basic building blocks like TextView, Button, EditText, ImageView, etc.
Layouts: Organizing UI components using different layout managers like LinearLayout, RelativeLayout, ConstraintLayout, etc.
Event Handling: Responding to user interactions such as clicks, touches, and gestures.
View Binding: Efficiently accessing UI components in your Kotlin code.

Android UI Components

TextView

A TextView is a UI element that displays text to the user.

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!"
    android:textSize="18sp"/>

Button

A Button is a UI element that can be clicked to perform an action.

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"/>

EditText

An EditText is a UI element that allows the user to enter and edit text.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter text"/>

ImageView

An ImageView is a UI element that displays an image.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"/>

Layouts

LinearLayout

A LinearLayout arranges its children in a single row or column.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"/>
</LinearLayout>

RelativeLayout

A RelativeLayout arranges its children relative to each other or the parent.

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:layout_below="@id/textView"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

ConstraintLayout

A ConstraintLayout allows you to create complex layouts with a flat view hierarchy.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Event Handling

Handling Button Clicks

To handle button clicks, you can set an OnClickListener in your Kotlin code.

button.setOnClickListener {
    textView.text = "Button Clicked!"
}

Handling EditText Input

To handle text input from an EditText, you can use a TextWatcher.

editText.addTextChangedListener(object : TextWatcher {
    override fun afterTextChanged(s: Editable?) {
        // Do something after text changed
    }

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
        // Do something before text changed
    }

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        // Do something while text is changing
    }
})

View Binding

View Binding is a feature that allows you to more easily write code that interacts with views.

Enabling View Binding

To enable View Binding, add the following to your build.gradle file:

android {
    ...
    viewBinding {
        enabled = true
    }
}

Using View Binding

After enabling View Binding, you can use it in your activity:

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.button.setOnClickListener {
            binding.textView.text = "Button Clicked!"
        }
    }
}

Practical Exercise

Task

Create an Android application with the following requirements:

A TextView that displays a welcome message.
An EditText where the user can enter their name.
A Button that, when clicked, updates the TextView to greet the user by name.

Solution

Layout XML (activity_main.xml)

<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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome!"
        android:textSize="18sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/editText"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Enter your name"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/button"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Greet Me"
        app:layout_constraintTop_toBottomOf="@id/editText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Activity Code (MainActivity.kt)

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.button.setOnClickListener {
            val name = binding.editText.text.toString()
            binding.textView.text = "Welcome, $name!"
        }
    }
}

Summary

In this section, we covered the basics of building user interfaces in Android using Kotlin. We explored various UI components, layout managers, event handling, and view binding. By practicing the provided exercise, you should now be able to create simple UIs and handle user interactions in your Android applications. In the next section, we will delve into handling user input in more detail.

Building User Interfaces