How to create android dialog with a custom layout

Android Alert Dialog is a small window that prompts the user to enter some additional information. A dialog does not fill the screen and is usually used for modal events that require a user to enter some information or take an action. Today we are going to learn how to create android dialog with a custom layout

 

Android Dialog with custom layout example



How to display android dialog in a custom layout

To create an android dialog in a custom layout is too simple, you just need to create a class that extends DialogFragment, then inflate your custom layout and that’s all.

Go ahead and create a new android studio project from FILE > New Project. Fill in all the necessary details, in the activity section, select Basic Activity and proceed.

Create a custom layout for the dialog. To create a custom layout; right click on layout and select create new layout and the following code:

custom_login_layout.xml
[xml]
<?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:orientation=”vertical”
android:padding=”10dp”>

<EditText
android:id=”@+id/email”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginBottom=”15dp”
android:hint=”Enter Email”
android:inputType=”textEmailAddress” />

<EditText
android:id=”@+id/password”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Enter your password”
android:inputType=”textPassword” />

</LinearLayout>
[/xml]



Create a dialog java class, that extends DialogFragment, call it CustomLoginDialog.java. Add the following code in your custom dialog class.

CustomLoginDialog.java
[java]
package hack.hacksmile.hacksmiletutorials;

import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.AlertDialog;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class CustomLoginDialog extends DialogFragment {
@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
View view = getActivity().getLayoutInflater().inflate(R.layout.custom_login_layout, null);
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

builder.setTitle(“Login”);
builder.setView(view);

final EditText emailText = view.findViewById(R.id.email);
final EditText passwordText = view.findViewById(R.id.password);

builder.setNegativeButton(“Cancel”, null);
builder.setPositiveButton(“Login”, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(getActivity(), “Email is ” + emailText.getText().toString() + ” and password is” + passwordText.getText().toString(), Toast.LENGTH_SHORT).show();
}
});

return builder.create();

}

@Override
public void onCancel(DialogInterface dialog) {
super.onCancel(dialog);
Toast.makeText(getActivity(), “Dialog Canceld”, Toast.LENGTH_SHORT).show();
}
}

[/java]

Now it’s time to show dialog in the main activity. We shall create a button in the MainActivity layout, that will show the dialog when clicked. Go ahead and add the following code in the content_main.xml

[xml]
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout 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:padding=”10dp”
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
tools:context=”.MainActivity”
tools:showIn=”@layout/activity_main”>

<Button
android:onClick=”login”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_centerInParent=”true”
android:text=”Login” />

</RelativeLayout>
[/xml]



As you have noticed above we have included an XML attribute onClick=”login” , this is the method that will be called everytime the button is clicked, so go ahead and add the following code in your MainActivity.java.

[java]
package hack.hacksmile.hacksmiletutorials;

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

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

}

public void login(View view) {
CustomLoginDialog customLoginDialog = new CustomLoginDialog();
customLoginDialog.show(getSupportFragmentManager(), “login_dialog”);

}
}

[/java]

Showing dialog is way too simple you just call the following code:

[java]
CustomLoginDialog customLoginDialog = new CustomLoginDialog();
customLoginDialog.show(getSupportFragmentManager(), “login_dialog”);
// fragment manager and a dialog tab, tag can be anything or any name
// customLoginDialog.show(fragmentManager, tag [this is arbitrary string])
[/java]



VIDEO DEMO



AdBlock Detected!
This site depends on revenue from ad impressions to survive. If you find this site valuable, please consider disabling your ad blocker or pausing adblock for this website.