Sun. Dec 16th, 2018

Create custom dialog box in android

Hello! In this tutorial, we will learn how to make custom dialog box in android app. So, firstly what is a dialog in android. The basic definition of dialog says that dialog is a small window that asks the user to make a decision or enter additional information. Android supports mainly 4 types of dialog boxes. Like we have, AlertDialog, ProgressDialog, TimePickerDialog, DatePickerDialog. They provide a much standard way of usage. What if we want to display some information in a different style which none of them allows. There comes the use of custom dialog. It allows you to write the content in dialog in whatever way you like.

Output-

 

So, let’s start.

Creating a new project- Custom Dialog:

Open Android Studio and create a new project. Name your project whatever you like. Choose an empty activity and click finish.

Creating layout for activity:

I have created a simple layout with a button with text ‘Click to see dialog’ just to show to main functionality of the app. You can change your activity’s layout in your own way.

activity_main.xml-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.mitaly.customdialog.MainActivity">

    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:text="Click to see dialog"
        android:id="@+id/btnPress"
        />
</RelativeLayout>

Creating layout file for Custom dialog:

For this, you must first create a .xml file for custom dialog. Right, click on layout folder in res -> New -> Layout Resource file. Name the file according to your choice. Click OK.

Now, comes the great part. You can design the custom dialog in the same way as you do for activity. Add text views, buttons, images and lot many views of your choice. I have designed a login page with text views, two edit texts(email, password), and a button(Login).

layout_custom_dialog.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:background="@color/backgroundColor"
   >
    <!--Login here textview-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Login Here"
        android:id="@+id/txtLogin"
        android:gravity="center"
        android:textSize="30sp"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_margin="10dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary" />

    <!--Email and password-->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:weightSum="1">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:id="@+id/txtEmail"
                android:text="Email"
                android:layout_weight="0.2"/>
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:id="@+id/editEmail"
                android:hint="[email protected]"
                android:layout_weight="0.8"/>
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="vertical"
            android:weightSum="1">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="Password"
                android:id="@+id/txtPassword"
                android:layout_weight="0.2"/>
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/editPassword"
                android:inputType="textPassword"
                android:hint="**********"
                android:layout_weight="0.8"/>
        </TableRow>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:id="@+id/btnLogin"
            android:textColor="@android:color/white"
            android:background="@color/colorPrimary"
            android:text="LOGIN"/>
    </TableLayout>

</LinearLayout>

Related:

Periodically send GPS location to Firebase with custom time frame in Android

Circular Imageview in Custom Listview in Android

Designing Custom tableView Cell or Designing an article reading app

Android Custom Fonts in Android Application

Implement AutoComplete using AutoCompleteTextView

Activity code-

Now, let’s see the code for MainActivity. When the user presses the button ”Click to see dialog” which we created in the very first step, showDialog() method is called.

showDialog()-

Here, I first made an object of Dialog class provided in java. If we don’t want to add a title in a defined way in Dialog, we can simply call the method requestWindowFeature(Window.FEATURE_NO_TITLE). For making the background of dialog transparent, use  setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)).   For setting the layout of custom dialog on Dialog, use setContentView(layoutFile). Finally, you call show() method using dialog reference for displaying the dialog.

Note: always use requestWindowFeature(Window.FEATURE_NO_TITLE) before setContentView(layoutFile).

You may also change the font of text. This can be done by in following steps-

  1. Download the font.
  2. Go to CustomDialog folder of the app -> app -> src -> main.
  3. Make a folder named assets.
  4. Create fonts folder inside assets.
  5. Copy and paste the downloaded(.ttf) font in the fonts folder.
  6. Java provides Typeface class to specify the style of font. createFromAssets is used for creating a new typeface. Here you have to specify the font to be used.
  7. setTypeface can be called on any view for whom font needs to be set.

 

public class MainActivity extends AppCompatActivity {

    Button btnPress, btnLogin;
    TextView txtLogin, txtEmail, txtPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
    }


    //initialize the views
    void initViews(){
        btnPress = (Button)findViewById(R.id.btnPress);

        //when button is pressed, show the dialog
        btnPress.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showDialog();
            }
        });
    }


    void showDialog(){
        final Dialog dialog = new Dialog(MainActivity.this);
        //create dialog without title
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        //set the custom dialog's layout to the dialog
        dialog.setContentView(R.layout.layout_custom_dialog);
        //set the background of dialog box as transparent
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        //display the dialog box
        dialog.show();

        //initializing views of custom dialog
        btnLogin = (Button)dialog.findViewById(R.id.btnLogin);
        txtLogin = (TextView)dialog.findViewById(R.id.txtLogin);
        txtEmail = (TextView)dialog.findViewById(R.id.txtEmail);
        txtPassword = (TextView)dialog.findViewById(R.id.txtPassword);

        //Typeface class specifies style of a font.
        Typeface typeface = Typeface.createFromAsset(getAssets(), "fonts/Aller_Lt.ttf");
        //setting the font of some textviews and buttons
        txtLogin.setTypeface(typeface);
        txtEmail.setTypeface(typeface);
        txtPassword.setTypeface(typeface);
        btnLogin.setTypeface(typeface);
        btnPress.setTypeface(typeface);

        //dismiss the dialog and show toast on pressing the Login button
        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
                Toast.makeText(MainActivity.this,"You pressed Login button",Toast.LENGTH_LONG).show();
            }
        });
    }
}

 

Conclusion-

In this example, we saw how to use make custom dialog in Android and also learned how to change the font. Hope you understood. In case of any queries, you may ask questions. Keep following more amazing Android Blogs.


If you really liked the article, please subscribe to our YouTube Channel for videos related to this article.Please find us on Twitter and Facebook.

1 thought on “Create custom dialog box in android

Leave a Reply

Your email address will not be published. Required fields are marked *