Android Articles » Custom Dialog Box
IntroductionThe dialog box is basically a pop-up window that appears on top of a layout. For instance, when we are about to delete a record, on the safer side, we shall add a confirmation popup to confirm our action. We can customize this dialog box with our custom text, images, or say widgets. Here we shall see, how to add a widget to our Custom Dialog Box.
Here is a live demo of the expected output.
Let us start a new project.
In the activity_main.xml page, place a Button which when clicked will show the custom dialog box.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_show_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Dialog Box"
android:gravity="center"
android:layout_marginTop="208dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Now let's create a new activity dialog_activity.xml for the custom dialog box.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="How do you Rate this app"
android:textSize="20dp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RatingBar
android:id="@+id/rate_app"
android:layout_width="290dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/btn_submit_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:text="Rate" />
<Button
android:id="@+id/btn_remind_later"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:layout_marginTop="20dp"
android:text="Remind me later" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Next, open the MainActivity java class. Inside the DialogBox, we will be placing a RatingBar and two Buttons. One Button is to show Toast message on how much rating is given and the other Button is to dismiss the Custom DialogBox
import android.widget.Button;
import android.widget.RatingBar;
import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
public class MainActivity extends Activity {
Button btnClick, btnClose, btnRate;
RatingBar rBar;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnClick = (Button) findViewById(R.id.btn_show_dialog);
btnClick.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// add listener to button
final Dialog dialog = new Dialog(MainActivity.this); // Create custom dialog object
dialog.setContentView(R.layout.dialog_activity); // Include dialog.xml file
dialog.show(); // Set dialog title dialog.setTitle("Custom Dialog");
rBar = dialog.findViewById(R.id.rate_app);
btnRate = (Button) dialog.findViewById(R.id.btn_submit_rating);
//Performing action on Button Click
btnRate.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
//Getting the rating and displaying it in the toast
String rating = String.valueOf(rBar.getRating());
Toast.makeText(getApplicationContext(), "You have rated : " + rating, Toast.LENGTH_SHORT).show();
}
});
btnClose = (Button) dialog.findViewById(R.id.btn_remind_later);
// if the button is clicked, close the custom dialog box
btnClose.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// Close dialog
dialog.dismiss();
}
});
}
});
}
}
That's all. Run the project & we should get the output, as in the demo.
