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        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     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      <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:
… [Trackback]
[…] Find More here on that Topic: geeksforgeeks.org/create-instruction-dialog-in-android/ […]
… [Trackback]
[…] Read More here on that Topic: geeksforgeeks.org/create-instruction-dialog-in-android/ […]