Android Custom Dialog With edittext example and tutorial is the main focus here.
In this example, we will create a custom popup alert dialog with multiple edittext.
User will be able to type his string in our custom input dialog. You can use this dialog with edittext to get password from the user.
Dialog will have custom layout. You add many UI widgets like TextView, EditText, Button etc. as per your requirements.
This custom popup alert dialog contains two buttons, Ok and Cancel
So, follow all the below steps to make your desired custom dialog with edittext.
Last Output
Your custom dialog will look like below
Step 1. Custom Drawables
We are going to customize the look and feel of EditText and Buttons For our custom dialog.
Due to this purpose, we need to make some drawable xml files.
First of all, create a new xml file under res->drawable directory. edittext.xml should be the name of this file.
Add the following code into this file.
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true"> <shape android:shape="rectangle"> <padding android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp" /> <gradient android:startColor="#00c4c7a9" android:endColor="#00d6dadf" android:angle="270" /> <stroke android:width="2px" android:color="@color/colorPrimary" /> <corners android:radius="2dp" /> </shape> </item> <item android:state_focused="false"> <shape android:shape="rectangle"> <padding android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp" /> <gradient android:startColor="#00c4c7a9" android:endColor="#00d6dadf" android:angle="270" /> <stroke android:width="2px" android:color="@color/colorPrimary" /> <corners android:radius="2dp" /> </shape> </item> </selector>
Above layout file with customize the edittext of the dialog with blue rounded borders.
Now make another xml file named button.xml under the same directory.
Copy below source code in button.xml file.
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- Gradient Bg for listrow --> <gradient android:startColor="#9292e6" android:centerColor="#3838c6" android:endColor="#100669" android:angle="270" /> </shape>
This file will give blue colored look and feel to the dialog’s button.
Prepare third xml file named button_yellow.xml
Write down below source code in it.
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- Gradient Bg for listrow --> <gradient android:startColor="#cebd0a" android:centerColor="#cac520" android:endColor="#d2d04c" android:angle="270" /> </shape>
Above file will give yellow gradient effect to the button of the custom popup alert dialog.
Step 2. Dialog Layout
Let us create a layout resource file which will represent the custom layout of the dialog.
Create new xml layout resource file under res->layout directory.
Put the following code in it
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height= "wrap_content" android:textSize="30dp" android:gravity="center" android:textColor="#da0c0c" android:layout_marginTop="30dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:text="Enter Text Please!!"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/et" android:hint="I am Edit Text in Dialog" android:layout_marginTop="10dp" android:layout_marginBottom="20dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@drawable/edittext"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/et2" android:hint="I am Edit Text in Dialog" android:layout_marginTop="10dp" android:layout_marginBottom="20dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@drawable/edittext"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/et3" android:hint="I am Edit Text in Dialog" android:layout_marginTop="10dp" android:layout_marginBottom="20dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@drawable/edittext"/> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:layout_marginBottom="20dp" android:orientation="horizontal"> <Button android:id="@+id/btnok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button" android:textSize="20sp" android:text="OK" android:textColor="#ffffffff" /> <Button android:id="@+id/btncn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:background="@drawable/button_yellow" android:gravity="center_vertical|center_horizontal" android:text="Cancel" android:textSize="20sp" android:textColor="#ffffffff" /> </LinearLayout> </LinearLayout>
You can see that the xml files we created in the drawable folder are used in this file.
In the edittext, we have set it’s background with reference to the edittext.xml file.
For button, button.xml and button_yellow.xml are used to customize the background of the buttons.
This file give it’s exact layout to the custom dialog. This file will generate layout like the below image.
Step 3. Last Codes
At last, we need to write code for Main Activity.
Write down the following code in activity_main.xml file
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:text="Click me to fill text in below Text Box!!" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tv" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:background="@drawable/edittext" android:textSize="20sp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tv2" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:background="@drawable/edittext" android:textSize="20sp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tv3" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:background="@drawable/edittext" android:textSize="20sp"/> </LinearLayout>
Here, I have taken one button and three TextViews.
Now add the below source code in MainActivity.java file.
import android.app.Activity; import android.app.Dialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.Window; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActivity { private TextView tv, tv2, tv3; private Button btn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btn = findViewById(R.id.btn); tv = findViewById(R.id.tv); tv2 = findViewById(R.id.tv2); tv3 = findViewById(R.id.tv3); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialog(MainActivity.this); } }); } public void showDialog(Activity activity){ final Dialog dialog = new Dialog(activity); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setCancelable(false); dialog.setContentView(R.layout.dialog_layout); final EditText et = dialog.findViewById(R.id.et); final EditText et2 = dialog.findViewById(R.id.et2); final EditText et3 = dialog.findViewById(R.id.et3); Button btnok = (Button) dialog.findViewById(R.id.btnok); btnok.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { tv.setText(et.getText().toString()); tv2.setText(et2.getText().toString()); tv3.setText(et3.getText().toString()); dialog.dismiss(); } }); Button btncn = (Button) dialog.findViewById(R.id.btncn); btncn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } }
Reading Carefully
Consider the below code
btn = findViewById(R.id.btn); tv = findViewById(R.id.tv); tv2 = findViewById(R.id.tv2); tv3 = findViewById(R.id.tv3); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialog(MainActivity.this); } });
First of all, button and three textviews are defined then button’s on click method written.
When the user will click the button, showDialog() method will be called.
showDialog() method
Below is the code for this method.
public void showDialog(Activity activity){ final Dialog dialog = new Dialog(activity); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setCancelable(false); dialog.setContentView(R.layout.dialog_layout); final EditText et = dialog.findViewById(R.id.et); final EditText et2 = dialog.findViewById(R.id.et2); final EditText et3 = dialog.findViewById(R.id.et3); Button btnok = (Button) dialog.findViewById(R.id.btnok); btnok.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { tv.setText(et.getText().toString()); tv2.setText(et2.getText().toString()); tv3.setText(et3.getText().toString()); dialog.dismiss(); } }); Button btncn = (Button) dialog.findViewById(R.id.btncn); btncn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); }
First line will declare the object of the dialog.
Second line will remove the title from the dialog.
Third line will set the cancelable property as a true. It means that when user touches outside the dialog, the dialog will not go away. He need to click the cancel button for this.
Consider below code
final EditText et = dialog.findViewById(R.id.et); final EditText et2 = dialog.findViewById(R.id.et2); final EditText et3 = dialog.findViewById(R.id.et3); Button btnok = (Button) dialog.findViewById(R.id.btnok);
First three lines will declare the objects of the EditText.
Second will declare the object of the Button (This is OK button.)
When the user clicks on the OK button , following compiler will execute the following code
btnok.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { tv.setText(et.getText().toString()); tv2.setText(et2.getText().toString()); tv3.setText(et3.getText().toString()); dialog.dismiss(); } });
Compiler will set the text for the textviews.
It will fill the first TextView with the text of the first EditText. Similarly, second and third TextView will get their texts.
Then compiler will remove the dialog from the screen.
Now read the following code
Button btncn = (Button) dialog.findViewById(R.id.btncn); btncn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } });
Above code is representing the CANCEL button.
When user clicks the CANCEL button, simply compiler will remove the custom dialog which have three edittexts.
Similar examples related to Custom Dialog,
Android Custom dialog With Image And Text
Download Source Code for Android custom dialog with edittext
[sociallocker]Download CustomDialog EditText Source Code[/sociallocker]