Custom Dialog Box in Android

In this article, we are going to learn how to implement a custom dialog box in Android on RecyclerView.

In the below image you can see that what are we going to build.

Hope so you are interested to know how to make the above custom dialog box in Android, so now without wasting much time let’s start.

You can also refer our video tutorial for same.

So let’s start with this tutorial :

Custom Dialog Box in Android

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and provide a name to your project. By default activity name is MainActivity.java.

2. Now open res => values => styles.xml file and paste the below code.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">#222222</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

3. Now download this folder and copy all drawable resources from the drawable folder and paste all in res => drawable.

4. Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>members_name_back.xml and put the below line of codes to make the background for user profile card.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#FFFCFC"
        />
    <corners
        android:radius="5dp"
        />
    <stroke
        android:color="#4D9C9898"
        android:width="1dp"
        />
</shape>

5. Now again create a new drawable res file by navigating res => drawable => New => Drawable resource file =>follow_btn_back.xml and put the below line of codes to make the design for follow btn.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="5dp"
        />
    <stroke
        android:color="#783EEF"
        android:width="1.5dp"
        />
</shape>

6. Now go to your activity_main.xml file and paste the below lines of codes to add RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="#fff"
        android:id="@+id/toolBar"
        android:layout_height="70dp">
        <TextView
            android:layout_width="match_parent"
            android:text="Members"
            android:textAlignment="center"
            android:layout_centerVertical="true"
            android:textColor="#000"
            android:textSize="25sp"
            android:fontFamily="sans-serif"
            android:textStyle="bold"
            android:layout_height="wrap_content"/>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        app:layout_constraintTop_toBottomOf="@+id/toolBar"
        android:background="#43837D7D"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        app:layout_constraintTop_toBottomOf="@+id/toolBar"
        android:layout_height="wrap_content">
        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/recyclerView"
            android:layout_marginLeft="20dp"
            android:layout_marginBottom="70dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="20dp"
            android:layout_height="wrap_content">
        </androidx.recyclerview.widget.RecyclerView>
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

7. Now create a new layout res file by navigating res => layout=> New => Layout resource file =>row.xml and put the below line of codes to make the row design for recycleview.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <RelativeLayout
        android:layout_width="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/members_name_back"
        android:layout_height="wrap_content">
     <de.hdodenhof.circleimageview.CircleImageView
         android:layout_width="70dp"
         android:layout_height="70dp"
         android:src="@mipmap/ic_launcher"
         android:id="@+id/image"
         android:padding="15dp"
         />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/image"
            android:text="UserName"
            android:textStyle="bold"
            android:paddingTop="10dp"
            android:lineHeight="50dp"
            android:textSize="16sp"
            android:textColor="#000"
            android:fontFamily="sans-serif"
            android:id="@+id/userName"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineHeight="50dp"
            android:textSize="14sp"
            android:fontFamily="sans-serif"
            android:layout_marginTop="5dp"
            android:layout_below="@+id/userName"
            android:layout_toRightOf="@+id/image"
            android:text="234 Followers"
            android:id="@+id/follower"
            />
        <Button
            android:layout_width="100dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text="Follow"
            android:fontFamily="sans-serif"
            android:textColor="#632CD5"
            android:textSize="14sp"
            android:id="@+id/btn"
            android:textAllCaps="false"
            android:background="@drawable/follow_btn_back"
            android:layout_marginRight="15dp"
            android:layout_height="40dp"/>
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

8. Now create a new layout res file by navigating res => layout=> New => Layout resource file =>custom_dialog.xml and put the below line of codes to make the design for custom dialog.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFCFC"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="30dp"
        android:src="@drawable/girl1"
        android:id="@+id/profileImage"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/profileImage"
        android:textAlignment="center"
        android:layout_marginTop="15dp"
        android:text="UserName"
        android:fontFamily="sans-serif"
        android:textColor="#000"
        android:textStyle="bold"
        android:textSize="22sp"
        android:id="@+id/user_name"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/user_name"
        android:textAlignment="center"
        android:layout_marginTop="2dp"
        android:text="122 Followers"
        android:fontFamily="sans-serif"
        android:textSize="14sp"
        android:id="@+id/user_follower"
        />
    <Button
        android:layout_width="130dp"
        app:layout_constraintTop_toBottomOf="@+id/user_follower"
        android:text="Follow"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:fontFamily="sans-serif"
        android:textColor="#632CD5"
        android:textSize="14sp"
        android:layout_marginTop="20dp"
        android:id="@+id/btn"
        android:textAllCaps="false"
        android:background="@drawable/follow_btn_back"
        android:layout_height="40dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/btn"
        android:layout_marginTop="20dp"
        android:textAlignment="center"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:text="@string/user1"
        android:fontFamily="sans-serif"
        android:id="@+id/user_desc"
        android:textColor="#E4353535"
        android:paddingBottom="30dp"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

9. Now create a java class Model.java and paste the below lines of code to make a public constructor and getter and setter methods.

package com.thecodingshef.custom_dialog_box;
public class Model {
    private int image;
    private String userName;
    private String follower;
    private int desc;
    public Model(int image, String userName, String follower, int desc) {
        this.image = image;
        this.userName = userName;
        this.follower = follower;
        this.desc=desc;
    }
    public int getImage() {
        return image;
    }
    public void setImage(int image) {
        this.image = image;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getFollower() {
        return follower;
    }
    public void setFollower(String follower) {
        this.follower = follower;
    }
    public int getDesc() {
        return desc;
    }
    public void setDesc(int desc) {
        this.desc = desc;
    }
}

10. Now open MainActivity.java file and paste the below lines of codes to implement RecyclerView.

package com.thecodingshef.custom_dialog_box;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
Adapter adapter;
List<Model> list =new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        addData();
        recyclerView=findViewById(R.id.recyclerView);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        adapter=new Adapter(this,list,list.size());
        recyclerView.setAdapter(adapter);
    }
    private void addData() {
        list.add(new Model(R.drawable.girl1,"Elijha Robert", "240 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl2,"Hope Metlz", "154 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl3,"Rohenina Shelja", "730 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl4,"Rose Marry", "407 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl5,"Blaze Olsan", "145 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl6,"Moni Kuverlla", "447 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl7,"Shopinom Williams", "550 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl8,"Dena Henerson", "670 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl6,"Moni Kuverlla", "447 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl7,"Shopinom Williams", "550 Followers",R.string.user1));
        list.add(new Model(R.drawable.girl8,"Dena Henerson", "670 Followers",R.string.user1));

    }
}

11. Create a Adapter class Adapter.java and paste the below lines of code.

package com.thecodingshef.custom_dialog_box;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AlertDialog;
import androidx.recyclerview.widget.RecyclerView;
import org.w3c.dom.Text;
import java.util.List;
public class Adapter extends RecyclerView.Adapter<Adapter.DataAdapter>{
    Context context;
    List<Model> list;
    int size;
   public Adapter(Context context, List<Model> list, int size) {
        this.context = context;
        this.list = list;
        this.size = size;
    }
    @NonNull
    @Override
    public Adapter.DataAdapter onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View rowView= LayoutInflater.from(parent.getContext()).inflate(R.layout.row,parent,false);
        return new DataAdapter(rowView);
    }
    @Override
    public void onBindViewHolder(@NonNull final Adapter.DataAdapter holder, int position) {
        final Model model=list.get(position);
        holder.image.setImageResource(model.getImage());
        holder.userName.setText(model.getUserName());
        holder.follower.setText(model.getFollower());
        holder.btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               // Toast.makeText(context, "this is clickable", Toast.LENGTH_SHORT).show();
                AlertDialog.Builder builder=new AlertDialog.Builder(v.getRootView().getContext());
                View dialogView= LayoutInflater.from(v.getRootView().getContext()).inflate(R.layout.custom_dialog,null);
                TextView user_name;
                TextView user_follower;
                TextView user_desc;
                de.hdodenhof.circleimageview.CircleImageView user_image;
                user_name=dialogView.findViewById(R.id.user_name);
                user_follower=dialogView.findViewById(R.id.user_follower);
                user_desc=dialogView.findViewById(R.id.user_desc);
                user_image=dialogView.findViewById(R.id.profileImage);
                user_name.setText(model.getUserName());
                user_follower.setText(model.getFollower());
                user_desc.setText(model.getDesc());
                user_image.setImageResource(model.getImage());
                builder.setView(dialogView);
                builder.setCancelable(true);
                builder.show();
            }
        });
    }
    @Override
    public int getItemCount() {
        return size;
    }
    public class DataAdapter extends RecyclerView.ViewHolder {
      TextView userName;
      TextView follower;
      Button btn;
      de.hdodenhof.circleimageview.CircleImageView image;

        public DataAdapter(@NonNull View itemView) {
            super(itemView);
            userName=itemView.findViewById(R.id.userName);
            follower=itemView.findViewById(R.id.follower);
            image=itemView.findViewById(R.id.image);
            btn=itemView.findViewById(R.id.btn);
        }
    }
}

12. Finally, run the app and you will get the output as shown in the demo images.

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !

Leave a Comment

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