Custom Dialog in Android Studio

In this post we will see an Android Custom Dialog Example. I hope you know about creating Dialogs in Android, and then you might be thinking that what if I can customized the dialog completely as per my need.

Enough talking right? Now let’s start our Custom Dialog in Android Studio.

Custom Dialog in Android Studio

1. Example App

Here is the demo app we are going to implement in this article.

custom dialog in android studio custom dialog in android studio

2. Creating New Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from templates.

2.Next, open your app’s build.gradle and add the following dependencies in the dependencies section and packagingOptions in android section:

implementation 'com.github.florent37:materialtextfield:1.0.7'

3. Add image icon name msg , key.

[ Right click on drawable => new  => Image Asset  =>  set icon type Action Bar and Tab Icon => set name check => click on Clip Art   => then write search box  message and key press enter, you can find check icon then select and press ok ]

3. Open the layout file of main activity activity_main.xml and add the below code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="login"/>
</LinearLayout>

4. Now for our Custom Alert Dialog create a layout. I have created activity_custom_dialog.xml. Inside this file we will design our Custom Dialog Activity.

<?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"
    android:padding="10dp"
    tools:context=".CustomDialog">
    <LinearLayout
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:text="Login"
                android:textSize="40dp"
                android:textStyle="bold"
                android:gravity="center"/>
            <com.github.florent37.materialtextfield.MaterialTextField
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                app:mtf_cardCollapsedHeight="4dp"
                app:mtf_labelColor="#666"
                app:mtf_animationDuration="1000"
                app:mtf_openKeyboardOnFocus="true"
                app:mtf_image="@drawable/msg">
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="User Name"
                    android:textColor="#333"
                    android:textSize="15sp" />
            </com.github.florent37.materialtextfield.MaterialTextField>
            
            <com.github.florent37.materialtextfield.MaterialTextField
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                app:mtf_cardCollapsedHeight="4dp"
                app:mtf_labelColor="#666"
                app:mtf_animationDuration="1000"
                app:mtf_openKeyboardOnFocus="true"
                app:mtf_image="@drawable/key">
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Password"
                    android:textColor="#333"
                    android:inputType="textPassword"
                    android:textSize="15sp" />
            </com.github.florent37.materialtextfield.MaterialTextField>
        </LinearLayout>
        <Button
            android:id="@+id/login"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginTop="20dp"
            android:background="@color/colorPrimary"
            android:text="Login"/>
    </LinearLayout>
</LinearLayout>

5.Now the last task is to display our Custom Dialog when the button is clicked.

For displaying the dialog come inside MainActivity.java and write the following code.

CustomDialog cdd=new CustomDialog(MainActivity.this);
cdd.show();

now our java class MainActivity.java look like this.

package andrious.com.customdialog;

        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.view.View;
        import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button login = findViewById(R.id.login);
        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                CustomDialog cdd=new CustomDialog(MainActivity.this);
                cdd.show();
            }
        });
    }
}

6. Create a Java class name CustomDialog.java and extend Dialog class and add the below codes.

package andrious.com.customdialog;

import android.app.Activity;
import android.app.Dialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class CustomDialog extends Dialog{

    public Activity c;

    public CustomDialog(Activity a) {
        super(a);
        // TODO Auto-generated constructor stub
        this.c = a;
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_dialog);
        Button login=findViewById(R.id.login);
        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(c,"Successfull",Toast.LENGTH_SHORT).show();
                dismiss();
            }
        });
    }
}

7. open your AndroidManifest.xml and add this.

<activity android:name=".CustomDialog"></activity>

your AndroidManifest.xml look like this,

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="andrious.com.customdialog">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".CustomDialog"></activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

now run and enjoy this code ….

 

Leave a Reply