Create Instruction Dialog in Android

In most android applications, you must have seen that when you open a new app it shows some instructions to users about the features of their application. Here, we are going to implement the same. Here is a sample video of what we are going to build in this application. Note that we will be using Java language to make this project.

Step by Step Implementation

Step 1: Create a New Project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• Name the application at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?  

Step 2. Working on XML files

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        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"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:padding="16dp"
        tools:context=".MainActivity">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Radio Button"
        android:id="@+id/radio_button"/>

       <CheckBox
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Check Box"
           android:id="@+id/checkbox"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text View"
            android:textSize="32sp"
            android:layout_marginTop="16dp"/>

</LinearLayout>

Navigate to app > res > layout > right-click > new > layout resource file and name it as dialog_instruction. Use the following code in dialog_instruction.xml file-

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center_horizontal"
    android:layout_height="match_parent">

    <View
        android:layout_width="110dp"
        android:layout_height="50dp"
        android:id="@+id/view1"
        android:layout_marginTop="?actionBarSize"
        android:background="@drawable/outline"/>

    <View
        android:layout_width="160dp"
        android:layout_height="50dp"
        android:id="@+id/view2"
        android:visibility="gone"
        android:layout_marginTop="12dp"
        android:background="@drawable/outline"/>

    <View
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/view3"
        android:visibility="gone"
        android:layout_marginTop="8dp"
        android:background="@drawable/outline"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_view"
        android:textSize="18sp"
        android:textColor="@color/white"
        android:layout_marginTop="32dp"/>

</LinearLayout>

Navigate to app > right-click > new  > android resource file and name it as outline.xml. Use the following code in the outline.xml file-

XML

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

    <stroke android:color="@android:color/holo_red_light"
        android:width="1dp"/>
    <corners android:radius="8dp"/>

</shape>

Step 3. Working on Java files

Navigate to the MainActivity.java file and use the following code in it. Comments are added to the code to have a better understanding.

Java

package com.example.instructiondialog;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        // create method
        displaydialog();
    }

    private void displaydialog() {
        // Initialize dialog
        Dialog dialog=new Dialog(this);

        // set view
        dialog.setContentView(R.layout.dialog_instruction);

        // set layout
        dialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT
        ,WindowManager.LayoutParams.MATCH_PARENT);

        // Set background
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

        // show dialog
        dialog.show();

        // Initialize and assign variable
        View view1=dialog.findViewById(R.id.view1);
        View view2=dialog.findViewById(R.id.view2);
        View view3=dialog.findViewById(R.id.text_view);
        TextView textView=dialog.findViewById(R.id.text_view);

        // set text from button instruction
        textView.setText("This is Radio Button");

        view1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // hide view1
                view1.setVisibility(View.INVISIBLE);
                // Visible view 2
                view2.setVisibility(View.VISIBLE);
                // set text for text view instruction
                textView.setText("This is Check box");

            }
        });

        view2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // hide view2
                view2.setVisibility(View.INVISIBLE);
                // Visible view 3
                view3.setVisibility(View.VISIBLE);
                // set text for text view instruction
                textView.setText("This is text view");
            }
        });
        view3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // dismiss dialog
                dialog.dismiss();
            }
        });
    }
}

Here is the final output of our application.

Output: