Create Instruction Dialog in Android

0 0 2 minutes read

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();
            }
        });
    }
}