1. Introduction

Images, icons and messages make Android applications more attractive and user-friendly.

For example:

• Shopping apps display product images.

• Social media apps display profile pictures.

• Information icons help users understand features.

• Toast messages show short notifications.

• Alert Dialogs display important messages and ask users to confirm actions.

In this tutorial, we will learn how to display images and icons, create Toast messages and build Alert Dialogs using Java in Android Studio.

By the end, we will create a small practical application that demonstrates all these features.

2. What Is ImageView in Android?

ImageView is an Android UI component used to display images on the application screen.

You can use ImageView to display:

• Profile pictures.

• Product images.

• Logos.

• Banners.

• Other application graphics.

Basic ImageView XML

<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/sample_image"
    android:contentDescription="Sample Image"
    android:scaleType="centerCrop" />

Understanding the attributes:

• android:id: Gives the ImageView a unique ID.

• layout_width: Defines its width.

• layout_height: Defines its height.

• android:src: Sets the image resource.

• contentDescription: Provides an accessibility description.

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

3. How to Add an Image to the Drawable Folder

Before displaying an image, we need to add it to our Android project.

Follow these steps:

1. Open Android Studio.

2. Open your project.

3. Navigate to app > res > drawable.

4. Copy your PNG, JPG or WebP image.

5. Paste it into the drawable folder.

6. Rename the file using lowercase letters and underscores.

For example:

sample_image.png

Avoid spaces, capital letters and special characters in drawable resource filenames.

Now you can access the image using:

R.drawable.sample_image

Display an Image Using Java

First, create an ImageView in XML:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:contentDescription="Sample Image"
    android:scaleType="centerCrop" />

Now open MainActivity.java:

ImageView imageView = findViewById(R.id.imageView);

imageView.setImageResource(R.drawable.sample_image);

The setImageResource() method displays the selected drawable image inside the ImageView.

4. Understanding ImageView ScaleType

The scaleType attribute controls how an image is displayed inside an ImageView.

Some commonly used values are:

1. centerCrop

android:scaleType="centerCrop"

Scales the image to fill the ImageView while cropping any extra area.

2. fitCenter

android:scaleType="fitCenter"

Fits the complete image inside the ImageView while maintaining its aspect ratio.

3. centerInside

android:scaleType="centerInside"

Displays the image completely inside the available space without unnecessarily enlarging a smaller image.

4. fitXY

android:scaleType="fitXY"

Stretches the image to fill the ImageView dimensions. This may distort the image.

Choose a scale type according to your design requirements.

5. How to Display Icons in Android

Icons are small graphical elements that represent actions or information.

Examples include:

• Home icon.

• Search icon.

• Settings icon.

• Information icon.

• Delete icon.

Android projects commonly use Vector Drawables for scalable icons.

Step 1: Create a Vector Drawable

1. Right-click the res/drawable folder.

2. Select New.

3. Select Vector Asset.

4. Choose an icon from the available clip art.

5. Set its name to ic_info.

6. Click Finish.

Android Studio will create a drawable resource.

Step 2: Display the Icon Using ImageView

<ImageView
    android:id="@+id/infoIcon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/ic_info"
    android:contentDescription="Information Icon" />

You can also change the icon programmatically:

ImageView infoIcon = findViewById(R.id.infoIcon);

infoIcon.setImageResource(R.drawable.ic_info);

The icon is accessed in Java using its drawable resource ID.

6. What Is a Toast Message in Android?

A Toast is a small notification that displays a short message to the user.

For example:

• Login Successful.

• Data Saved.

• Button Clicked.

• Internet Connection Error.

Toast messages appear temporarily and disappear automatically.

Basic Toast Syntax

Toast.makeText(
    MainActivity.this,
    "Hello Android",
    Toast.LENGTH_SHORT
).show();

Understanding the code:

• Toast.makeText() creates a Toast message.

• MainActivity.this provides the Activity context.

• "Hello Android" is the message.

• Toast.LENGTH_SHORT defines a short display duration.

• show() displays the Toast.

Toast with Long Duration

Toast.makeText(
    MainActivity.this,
    "Your data has been saved successfully",
    Toast.LENGTH_LONG
).show();

Android provides two standard Toast duration constants:

• Toast.LENGTH_SHORT

• Toast.LENGTH_LONG

Display Toast on Button Click

Button btnClick = findViewById(R.id.btnClick);

btnClick.setOnClickListener(v -> {

    Toast.makeText(
        MainActivity.this,
        "Button Clicked",
        Toast.LENGTH_SHORT
    ).show();

});

When the user clicks the button, the application displays a Toast message.

7. What Is an Alert Dialog in Android?

An Alert Dialog is a small window that appears over the current screen to display important information or request a decision from the user.

For example:

• Are you sure you want to delete this record?

• Do you want to exit the application?

• Your data has been saved.

• Do you want to continue?

Unlike a Toast, an Alert Dialog requires the user to interact with it or dismiss it.

Basic AlertDialog Syntax

new android.app.AlertDialog.Builder(MainActivity.this)
    .setTitle("Information")
    .setMessage("Welcome to Android Development")
    .setPositiveButton("OK", null)
    .show();

Understanding the methods:

• Builder(): Creates an Alert Dialog builder.

• setTitle(): Sets the dialog title.

• setMessage(): Sets the dialog message.

• setPositiveButton(): Adds a positive action button.

• show(): Displays the dialog.

8. Alert Dialog with Yes and No Buttons

Sometimes an application needs confirmation before performing an action.

For example, before deleting a record, the application should ask the user for confirmation.

new android.app.AlertDialog.Builder(MainActivity.this)

    .setTitle("Delete Record")

    .setMessage("Are you sure you want to delete this record?")

    .setPositiveButton("Yes", (dialog, which) -> {

        Toast.makeText(
            MainActivity.this,
            "Record Deleted",
            Toast.LENGTH_SHORT
        ).show();

    })

    .setNegativeButton("No", (dialog, which) -> {

        dialog.dismiss();

    })

    .show();

How does it work?

• When the user clicks Yes, the positive button listener executes.

• When the user clicks No, the dialog closes.

• The actual deletion operation should be performed inside the positive button listener when connected to a database.

9. Practical Project: Create an Android Image and Dialog App

Now let's create a practical application that displays an image, an information icon, a Toast message and an Alert Dialog.

Step 1: Create a New Project

1. Open Android Studio.

2. Select New Project.

3. Choose Empty Views Activity.

4. Set the project name to ImageDialogApp.

5. Select Java as the programming language.

6. Click Finish.

Step 2: Add Image and Icon Resources

Open:

app > res > drawable

Add an image named:

sample_image.png

Now create a Vector Asset named:

ic_info

We will use these resources in our application.

Step 3: Design the XML Layout

Open:

app > res > layout > activity_main.xml

Replace the existing XML code with:

<?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:gravity="center"
        android:padding="20dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Image and Dialog App"
            android:textSize="24sp"
            android:textStyle="bold"
            android:gravity="center"
            android:padding="15dp" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="220dp"
            android:layout_height="180dp"
            android:src="@drawable/sample_image"
            android:contentDescription="Sample Image"
            android:scaleType="centerCrop" />

        <ImageView
            android:id="@+id/infoIcon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="15dp"
            android:src="@drawable/ic_info"
            android:contentDescription="Information Icon" />

        <Button
            android:id="@+id/btnToast"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Toast" />

        <Button
            android:id="@+id/btnDialog"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show Alert Dialog" />

        <Button
            android:id="@+id/btnExit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Exit App" />

    </LinearLayout>

</ScrollView>

Understanding the XML:

• ScrollView makes the screen scrollable.

• LinearLayout arranges components vertically.

• TextView displays the application heading.

• The first ImageView displays the sample image.

• The second ImageView displays the information icon.

• btnToast displays a Toast message.

• btnDialog opens an Alert Dialog.

• btnExit displays an exit confirmation dialog.

Step 4: Write Java Code

Open:

app > java > your package name > MainActivity.java

Write the following code:

package com.example.imagedialogapp;

import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    Button btnToast, btnDialog, btnExit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // Connect XML buttons with Java
        btnToast = findViewById(R.id.btnToast);
        btnDialog = findViewById(R.id.btnDialog);
        btnExit = findViewById(R.id.btnExit);

        // Show Toast Message
        btnToast.setOnClickListener(v -> {

            Toast.makeText(
                    MainActivity.this,
                    "Hello! Welcome to Android",
                    Toast.LENGTH_SHORT
            ).show();

        });

        // Show Information Dialog
        btnDialog.setOnClickListener(v -> {

            new android.app.AlertDialog.Builder(MainActivity.this)

                    .setTitle("Information")

                    .setMessage(
                            "Welcome to our Android application."
                    )

                    .setPositiveButton("OK", (dialog, which) -> {
                        dialog.dismiss();
                    })

                    .show();

        });

        // Exit Confirmation Dialog
        btnExit.setOnClickListener(v -> {

            new android.app.AlertDialog.Builder(MainActivity.this)

                    .setTitle("Exit Application")

                    .setMessage(
                            "Are you sure you want to exit?"
                    )

                    .setPositiveButton("Yes", (dialog, which) -> {
                        finish();
                    })

                    .setNegativeButton("No", (dialog, which) -> {
                        dialog.dismiss();
                    })

                    .show();

        });

    }
}

Important: Replace the package declaration with the actual package name of your project. The image and icon are displayed directly through the XML resources, so we do not need to connect those ImageViews again in Java for this example.

Step 5: Understand the Java Code

1. Connecting Buttons

btnToast = findViewById(R.id.btnToast);

This connects the XML button with its Java variable.

2. Showing a Toast

Toast.makeText(
    MainActivity.this,
    "Hello! Welcome to Android",
    Toast.LENGTH_SHORT
).show();

This displays a temporary notification when the user clicks the Toast button.

3. Creating an Alert Dialog

new android.app.AlertDialog.Builder(MainActivity.this)

This creates an Alert Dialog builder using the current Activity context.

4. Adding Positive and Negative Buttons

.setPositiveButton("Yes", (dialog, which) -> {
    finish();
})
.setNegativeButton("No", (dialog, which) -> {
    dialog.dismiss();
})

The Yes button finishes the current Activity, while the No button closes the dialog without exiting.

5. Using finish()

finish();

This closes the current Activity.

10. Run and Test the Application

Now run your application on an Android emulator or a real Android phone.

Test the following features:

Test 1: Display Image

• Open the application.

• Check whether the sample image appears.

• Verify that the image fits inside the ImageView.

Test 2: Display Icon

• Check whether the information icon appears below the image.

Test 3: Show Toast

• Click the Show Toast button.

• A short notification should appear on the screen.

Test 4: Show Alert Dialog

• Click the Show Alert Dialog button.

• An information dialog should appear.

• Click OK to close it.

Test 5: Exit Confirmation

• Click the Exit App button.

• An exit confirmation dialog should appear.

• Click No to remain in the application.

• Click Yes to close the current Activity.

11. Common Mistakes to Avoid

Mistake 1: Image Not Displaying

Check whether the image exists in the drawable folder and whether the resource name is correct.

imageView.setImageResource(R.drawable.sample_image);

Mistake 2: Incorrect Drawable Filename

Avoid filenames such as:

Sample Image.png

Use:

sample_image.png

Mistake 3: Forgetting show() in Toast

Incorrect:

Toast.makeText(
    MainActivity.this,
    "Hello",
    Toast.LENGTH_SHORT
);

Correct:

Toast.makeText(
    MainActivity.this,
    "Hello",
    Toast.LENGTH_SHORT
).show();

Mistake 4: Forgetting show() in AlertDialog

Creating an AlertDialog builder does not automatically display the dialog. Call show().

Mistake 5: Using the Wrong Image Resource ID

Check that the drawable name matches the resource ID exactly.

Mistake 6: Not Adding Content Description

Provide meaningful contentDescription values for informative images and icons to improve accessibility.

12. Practice Tasks

Now complete these practical tasks yourself:

1. Add a second ImageView and display another image.

2. Add a Home icon using Vector Asset.

3. Create a button that displays a custom Toast message.

4. Create an Alert Dialog with Save and Cancel buttons.

5. Create a Delete Confirmation Dialog.

6. Display a Toast message when the user clicks Yes in the Delete Dialog.

7. Change the ImageView scaleType and observe the difference.

Try each task yourself before checking the solution.

13. Conclusion

In this tutorial, we learned how to display images and icons and how to use Toast messages and Alert Dialogs in Android Studio with Java.

We covered:

• ImageView and drawable resources.

• Adding images to the drawable folder.

• Displaying Vector Drawable icons.

• Understanding ImageView scaleType.

• Showing Toast messages.

• Creating Alert Dialogs.

• Adding Yes and No buttons.

• Handling user actions through click listeners.

These components are commonly used in real-world Android applications to improve the user interface and provide clear feedback to users.