Android Custom Dialog With EditText Example Tutorial

android custom dialog with edittext, android pick video from gallery or camera

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.

android custom dialog with edittext

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]