In this article, we will learn how to create a custom layout for android dialog. I writing this article because our next tutorial will be on how to update firebase email. Where you will be required to re-authenticate. And for that we will be using a custom dialog, hence this article.
Here we will make a simple android project. Our main objective is to create a custom dialog. So the app will be very simple. It will have only two EditTexts with two Buttons. One Cancel button and an Ok button.
See the image below –
As you can see from the above image there will be two buttons. Clicking on the cancel button will close the dialog and the Ok button will show a toast message.
At first, we will create an activity which will have a Button. Clicking on the button the dialog will open.
Go to the android studio and create an empty activity. I am naming it TestActivity and its layout activity_test. Below is the XML layout code of our TestActivity and the TestActivity.java file.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <Button android:id="@+id/btn_show_dialog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Dialog"/> </LinearLayout> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public class TestActivity extends AppCompatActivity{ @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test); Button button = findViewById(R.id.btn_show_dialog); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); } } |
Now let’s create a sperate class for our custom dialog and name it MyCustomDialog. It will have a showDialog(Context context) method.
|
1 2 3 4 5 |
public class MyCustomDialog { public void showDialog(Context context){ } } |
We will call the above method showDialog() from the TestActivity to show our custom dialog. And for a custom dialog, we need a separate layout. Create an XML layout. Name it custom_dialog_layout.
Below is the XML layout code of our custom dialog (See the image preview above).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical" android:gravity="center" android:background="#6a87cf" android:padding="20dp"> <EditText android:id="@+id/et_dialog_email" android:layout_width="match_parent" android:layout_height="60dp" android:paddingStart="50dp" android:paddingEnd="50dp" android:hint="Enter email" android:maxLines="1" android:inputType="textEmailAddress" android:textColor="#000000" android:textSize="18sp" android:textColorHint="#aeaeae" android:background="@drawable/edittext_background"> </EditText> <EditText android:id="@+id/et_dialog_password" android:layout_width="match_parent" android:layout_height="60dp" android:paddingStart="50dp" android:paddingEnd="50dp" android:layout_marginTop="15dp" android:layout_marginBottom="20dp" android:hint="Enter password" android:textColor="#000000" android:textSize="18sp" android:inputType="textPassword" android:textColorHint="#aeaeae" android:background="@drawable/edittext_background"> </EditText> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <Button android:id="@+id/btn_cancel" android:layout_width="150dp" android:layout_height="wrap_content" android:paddingTop="5dp" android:paddingBottom="5dp" android:textAllCaps="false" android:fontFamily="sans-serif-smallcaps" android:background="@drawable/button_background" android:textColor="#ffffff" android:layout_margin="10dp" android:text="Cancel"/> <Button android:id="@+id/btn_ok" android:layout_width="150dp" android:layout_height="wrap_content" android:paddingTop="5dp" android:paddingBottom="5dp" android:textAllCaps="false" android:fontFamily="sans-serif-smallcaps" android:textColor="#ffffff" android:background="@drawable/button_background" android:layout_margin="10dp" android:text="OK"/> </LinearLayout> </LinearLayout> |
I have also used drawable shape for the two EditTexts and the Two buttons.
Go to res, then drawable and create a new Drawable resource file. Name it edittext_background. This for the two EditTexts.
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="25dp"/> <solid android:color="#f9f9f9"/> </shape> |
Create another drawable resource file for the two Buttons. Name it button_background.
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#1e1e1e"/> <corners android:radius="5dp"/> </shape> |
The layout is ready for our dialog. Now let’s code the MyCustomDialog class. Create an object of the Dialog class and call setContentView to set the screen content from our dialog layout resource file. At last call show() to display the dialog. See the code below –
|
1 2 3 4 5 6 7 8 9 |
public class MyCustomDialog { public void showDialog(Context context){ Dialog dialog = new Dialog(context); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setCancelable(true); dialog.setContentView(R.layout.custom_dialog_layout); dialog.show(); } } |
Now we can use findViewById to retrieve the widgets in our dialog UI. Update your MyCustomDialog class with the code below –
Complete code of our MyCustomDialog class –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
public class MyCustomDialog { public void showDialog(final Context context){ final Dialog dialog = new Dialog(context); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setCancelable(true); dialog.setContentView(R.layout.custom_dialog_layout); dialog.show(); final EditText mEt_email = dialog.findViewById(R.id.et_dialog_email); final EditText mEt_password = dialog.findViewById(R.id.et_dialog_password); Button mBtn_cancel = dialog.findViewById(R.id.btn_cancel); Button mBtn_ok = dialog.findViewById(R.id.btn_ok); mBtn_cancel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.cancel(); } }); mBtn_ok.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(context, "Email - " + mEt_email.getText().toString() + "\nPassword - " + mEt_password.getText().toString(), Toast.LENGTH_SHORT).show(); } }); } } |
At last, update your TestActivity.java code. Call the method showDialog() method to show the dialog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public class TestActivity extends AppCompatActivity{ @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test); Button button = findViewById(R.id.btn_show_dialog); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { new MyCustomDialog().showDialog(TestActivity.this); } }); } } |
Now run your project. Fill the EditText fields and click Cancel and Ok button. Cancel will close the dialog and clicking the Ok button, a toast message will be displayed.
This is how we can make a fully customized dialog for our android projects. From the next tutorial, I will be continuing our firebase tutorial series.
Hope you have understood everything. If you have any doubt or query let us know in the comment section below.
