1. Introduction

Every Android application contains different user interface components. These components help users interact with the application.

For example, a login screen may contain:

• TextView to display labels.

• EditText to enter username and password.

• Button to submit the form.

• ImageView to display a logo.

• CheckBox to remember user preferences.

Android provides many built-in UI components that we can use in XML layouts and control through Java code.

In this tutorial, we will learn about the most commonly used Android UI components with practical examples.

2. What Are Android UI Components?

Android UI components are visual elements used to create an application's user interface.

They allow users to view information, enter data, select options, and perform actions.

Some commonly used UI components are:

• TextView

• EditText

• Button

• ImageView

• CheckBox

• RadioButton

• Switch

• ProgressBar

• SeekBar

• Spinner

Let's understand each component one by one.

3. TextView – Display Text

TextView is used to display text on the screen.

For example, we can use TextView to show:

• Welcome messages.

• Headings.

• Labels.

• Instructions.

• Result messages.

XML Example

<TextView
    android:id="@+id/tvWelcome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Welcome to Param Classes"
    android:textSize="24sp"
    android:textColor="#000000"
    android:textStyle="bold" />

Important Attributes

android:text: Sets the text displayed by the TextView.

android:textSize: Sets the text size.

android:textColor: Sets the text color.

android:textStyle: Sets the text style, such as bold or italic.

Java Example

TextView tvWelcome;

tvWelcome = findViewById(R.id.tvWelcome);

tvWelcome.setText("Hello Android");

Here, findViewById() connects the Java variable to the TextView defined in XML.

setText() changes the displayed text.

4. EditText – Take User Input

EditText allows users to enter information into an application.

It is commonly used for:

• Login forms.

• Registration forms.

• Search fields.

• Contact forms.

• Feedback forms.

XML Example

<EditText
    android:id="@+id/etName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your name"
    android:inputType="textPersonName" />

Important Attributes

android:hint: Displays temporary guidance when the field is empty.

android:inputType: Defines the type of input expected.

Common input types include:

• text

• textEmailAddress

• textPassword

• number

• phone

• textPersonName

Java Example

EditText etName;

etName = findViewById(R.id.etName);

String name = etName.getText().toString();

Here:

• getText() reads the entered content.

• toString() converts it into a String.

Important: Always validate user input before processing or saving it.

5. Button – Perform an Action

Button is used to perform an action when a user clicks it.

For example:

• Login.

• Register.

• Submit.

• Save.

• Delete.

XML Example

<Button
    android:id="@+id/btnSubmit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Submit" />

Java Example

Button btnSubmit;

btnSubmit = findViewById(R.id.btnSubmit);

btnSubmit.setOnClickListener(v -> {
    // Code to execute when the button is clicked
});

setOnClickListener() listens for button clicks.

The code inside the listener executes when the user clicks the button.

6. ImageView – Display Images

ImageView is used to display images inside an Android application.

Images may include:

• App logos.

• Profile pictures.

• Product images.

• Icons.

• Illustrations.

Step 1: Add an Image

Copy your image into:

app/src/main/res/drawable/

Use a lowercase filename, such as:

logo.png

Step 2: XML Example

<ImageView
    android:id="@+id/ivLogo"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:src="@drawable/logo"
    android:contentDescription="Application Logo"
    android:scaleType="fitCenter" />

Important Attributes

android:src: Specifies the image resource.

android:scaleType: Controls how the image fits inside the ImageView.

android:contentDescription: Provides a description for accessibility services.

Java Example

ImageView ivLogo;

ivLogo = findViewById(R.id.ivLogo);

ivLogo.setImageResource(R.drawable.logo);

setImageResource() changes the image displayed by the ImageView.

7. CheckBox – Select Multiple Options

CheckBox allows users to select or deselect an option.

Users can select multiple CheckBoxes at the same time.

For example:

• Select multiple interests.

• Accept terms and conditions.

• Choose notification preferences.

XML Example

<CheckBox
    android:id="@+id/cbJava"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Java" />

<CheckBox
    android:id="@+id/cbAndroid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Android Development" />

Java Example

CheckBox cbJava;
CheckBox cbAndroid;

cbJava = findViewById(R.id.cbJava);
cbAndroid = findViewById(R.id.cbAndroid);

if (cbJava.isChecked()) {
    // Java is selected
}

if (cbAndroid.isChecked()) {
    // Android Development is selected
}

isChecked() checks whether a CheckBox is selected.

8. RadioButton – Select One Option

RadioButton is used when users need to select one option from a group.

For example:

• Male or Female.

• Cash or Online Payment.

• Beginner or Advanced.

RadioButtons are generally placed inside a RadioGroup to manage single selection.

XML Example

<RadioGroup
    android:id="@+id/rgGender"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RadioButton
        android:id="@+id/rbMale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Male" />

    <RadioButton
        android:id="@+id/rbFemale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Female" />

</RadioGroup>

Java Example

RadioGroup rgGender;

rgGender = findViewById(R.id.rgGender);

int selectedId = rgGender.getCheckedRadioButtonId();

if (selectedId != -1) {
    RadioButton selectedButton = findViewById(selectedId);

    String gender = selectedButton.getText().toString();
}

getCheckedRadioButtonId() returns the ID of the selected RadioButton.

If no option is selected, it returns -1.

9. Switch – Enable or Disable a Setting

Switch is used to turn a setting ON or OFF.

For example:

• Enable notifications.

• Turn dark mode on or off.

• Enable automatic updates.

XML Example

<Switch
    android:id="@+id/switchNotification"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Enable Notifications" />

Java Example

Switch switchNotification;

switchNotification = findViewById(R.id.switchNotification);

boolean isEnabled = switchNotification.isChecked();

isChecked() tells us whether the Switch is ON or OFF.

Note: Android also provides SwitchCompat and Material Switch components. Their appearance and dependencies may differ from the platform Switch.

10. ProgressBar – Show Loading Progress

ProgressBar is used to indicate that a task is running.

For example:

• Loading data from an API.

• Uploading a file.

• Downloading content.

• Processing information.

XML Example

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone" />

Java Example

ProgressBar progressBar;

progressBar = findViewById(R.id.progressBar);

// Show loading indicator
progressBar.setVisibility(View.VISIBLE);

// Hide loading indicator
progressBar.setVisibility(View.GONE);

Make sure to import:

import android.view.View;
import android.widget.ProgressBar;

For a simple loading indicator, the default ProgressBar can show an indeterminate animation.

11. SeekBar – Select a Value Using a Slider

SeekBar allows users to select a value by moving a slider.

For example:

• Adjust volume.

• Select brightness.

• Choose a rating value.

XML Example

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="50" />

Java Example

SeekBar seekBar;

seekBar = findViewById(R.id.seekBar);

seekBar.setOnSeekBarChangeListener(
    new SeekBar.OnSeekBarChangeListener() {

        @Override
        public void onProgressChanged(
                SeekBar seekBar,
                int progress,
                boolean fromUser) {

            // Current selected value
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
        }
    }
);

onProgressChanged() runs when the selected value changes.

12. Spinner – Select an Item from a List

Spinner displays a drop-down list of options.

For example:

• Select a country.

• Select a city.

• Select a category.

XML Example

<Spinner
    android:id="@+id/spinnerCity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Java Example

Spinner spinnerCity;

spinnerCity = findViewById(R.id.spinnerCity);

String[] cities = {
    "Raipur",
    "Delhi",
    "Mumbai",
    "Jaipur"
};

ArrayAdapter<String> adapter = new ArrayAdapter<>(
    this,
    android.R.layout.simple_spinner_item,
    cities
);

adapter.setDropDownViewResource(
    android.R.layout.simple_spinner_dropdown_item
);

spinnerCity.setAdapter(adapter);

To read the selected item:

String selectedCity =
    spinnerCity.getSelectedItem().toString();

The ArrayAdapter connects the list of city names to the Spinner.

13. Practical Example: Create a Simple Registration Form

Now let's combine multiple UI components to create a basic registration form.

The form will contain:

• TextView for the heading.

• EditText for the user's name.

• EditText for the email.

• RadioGroup for gender selection.

• CheckBox for accepting terms.

• Button for submission.

• TextView for displaying the result.

XML Code – activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Registration Form"
            android:textSize="24sp"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/etName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Name"
            android:inputType="textPersonName" />

        <EditText
            android:id="@+id/etEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Email"
            android:inputType="textEmailAddress" />

        <RadioGroup
            android:id="@+id/rgGender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rbMale"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Male" />

            <RadioButton
                android:id="@+id/rbFemale"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Female" />

        </RadioGroup>

        <CheckBox
            android:id="@+id/cbTerms"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I accept the terms and conditions" />

        <Button
            android:id="@+id/btnRegister"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Register" />

        <TextView
            android:id="@+id/tvResult"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16sp" />

    </LinearLayout>

</ScrollView>

Java Code – MainActivity.java

package com.example.myapp;

import android.os.Bundle;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    EditText etName, etEmail;
    RadioGroup rgGender;
    CheckBox cbTerms;
    Button btnRegister;
    TextView tvResult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        etName = findViewById(R.id.etName);
        etEmail = findViewById(R.id.etEmail);
        rgGender = findViewById(R.id.rgGender);
        cbTerms = findViewById(R.id.cbTerms);
        btnRegister = findViewById(R.id.btnRegister);
        tvResult = findViewById(R.id.tvResult);

        btnRegister.setOnClickListener(v -> {

            String name = etName.getText().toString().trim();
            String email = etEmail.getText().toString().trim();

            if (name.isEmpty() || email.isEmpty()) {
                Toast.makeText(
                    this,
                    "Please fill all fields",
                    Toast.LENGTH_SHORT
                ).show();

                return;
            }

            int selectedId = rgGender.getCheckedRadioButtonId();

            if (selectedId == -1) {
                Toast.makeText(
                    this,
                    "Please select gender",
                    Toast.LENGTH_SHORT
                ).show();

                return;
            }

            if (!cbTerms.isChecked()) {
                Toast.makeText(
                    this,
                    "Please accept the terms",
                    Toast.LENGTH_SHORT
                ).show();

                return;
            }

            RadioButton selectedGender =
                findViewById(selectedId);

            String gender =
                selectedGender.getText().toString();

            String result =
                "Name: " + name +
                "\nEmail: " + email +
                "\nGender: " + gender;

            tvResult.setText(result);

        });
    }
}

Understanding the Practical Example

Step 1: setContentView() loads the XML registration form.

Step 2: findViewById() connects each XML component with its Java variable.

Step 3: The button click listener runs when the user clicks Register.

Step 4: getText().toString() reads the name and email.

Step 5: isEmpty() checks whether the required text fields are empty.

Step 6: getCheckedRadioButtonId() identifies the selected gender option.

Step 7: isChecked() checks whether the terms CheckBox is selected.

Step 8: setText() displays the registration details.

This is a basic learning example. A real registration application should also validate email format and securely submit data to a backend.

14. Common Mistakes While Using UI Components

Mistake 1: Forgetting to connect views

If you do not call findViewById() before using a view, your Java code may fail.

Mistake 2: Using the wrong XML ID

The ID used in Java must match the ID defined in XML.

Mistake 3: Not validating EditText input

Always check user input before processing it.

Mistake 4: Using RadioButtons without RadioGroup

If you want only one selection, place related RadioButtons inside a RadioGroup.

Mistake 5: Forgetting image resources

Make sure the image exists inside the drawable folder and its resource name is correct.

Mistake 6: Not importing required classes

For example, using ProgressBar requires the appropriate Android widget import.

15. Practice Tasks

Try these tasks yourself:

Task 1: Create a screen with a TextView and an EditText.

Task 2: Add a Button and display the entered text when it is clicked.

Task 3: Add an ImageView and display a local drawable image.

Task 4: Create three CheckBoxes for selecting programming languages.

Task 5: Create a RadioGroup for selecting one payment method.

Task 6: Create a Spinner containing five city names.

Task 7: Build a complete registration form using the components learned in this tutorial.

16. Conclusion

Android UI components help us create interactive and user-friendly applications.

In this tutorial, we learned how to use:

• TextView to display text.

• EditText to accept user input.

• Button to perform actions.

• ImageView to display images.

• CheckBox to select multiple options.

• RadioButton to select one option.

• Switch to enable or disable settings.

• ProgressBar to show loading progress.

• SeekBar to select values.

• Spinner to display a drop-down list.

We also created a practical registration form using XML and Java.

Understanding these components is important because almost every Android application uses them.

17. Frequently Asked Questions (FAQs)

Q1. What are UI components in Android?

UI components are visual elements used to display information and interact with users.

Q2. What is the difference between TextView and EditText?

TextView displays text, while EditText allows users to enter text.

Q3. What is the use of ImageView?

ImageView displays images inside an Android application.

Q4. What is the difference between CheckBox and RadioButton?

CheckBox allows multiple selections, while RadioButtons inside a RadioGroup allow only one selection.

Q5. What is the use of a Spinner?

Spinner displays a drop-down list from which users can select an item.

Q6. How do we handle a Button click in Java?

We use setOnClickListener() to execute code when a button is clicked.

Q7. What is the use of ProgressBar?

ProgressBar indicates that an operation is running or loading.

Q8. How do we access XML components in Java?

We use findViewById() with the component's XML ID.

18. SEO Details

SEO Title: Android UI Components Tutorial: TextView, EditText, Button, ImageView and More

Meta Description: Learn Android UI components in Android Studio using Java. Understand TextView, EditText, Button, ImageView, CheckBox, RadioButton, Spinner and more with practical examples.

Focus Keyword: Android UI Components Tutorial

Related Keywords:

• Android TextView Tutorial

• Android EditText Example

• Android Button Click Listener

• Android ImageView Tutorial

• Android CheckBox and RadioButton

• Android UI Components with Java

• Android Studio Java Tutorial

Suggested URL Slug: android-ui-components-textview-edittext-button-imageview