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 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 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 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.
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: