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:
