I want to create a custom dialog box like below
I have tried the foll
I like to use tcAron library. (Download here: https://github.com/triocoder/tcAron)
import class:
import com.triocoder.tcaron.tcaronlibrary.tcAronDialogs;
write this:
tcAronDialogs.showFancyAlert(MainActivity.this, false, "Text", "Close", "ic_hub_white", 0xFFF44336);
check the documentation:
https://github.com/triocoder/tcAron/wiki/showFancyAlert
Create Custom Alert Dialog
cumstomDialog.xml
<ImageView
android:id="@+id/icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_margin="5dp"
app:srcCompat="@drawable/error" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="@font/muli_bold"
android:text="Title"
android:layout_marginTop="5dp"
android:textColor="@android:color/black"
android:textSize="15sp" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="@font/muli_regular"
android:text="Message"
android:textColor="@android:color/black"
android:textSize="12dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/cancelBTN"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="5dp"
android:background="@drawable/bground_radius_button_white"
android:text="No"
android:textColor="@color/black" />
<Button
android:id="@+id/acceptBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="5dp"
android:background="@drawable/bground_radius_button"
android:text="Yes"
android:textColor="@color/white" />
</LinearLayout>
Show your custom dialog on your activity:
public void showDialog(String title, String des, int icon) {
final Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.custom_dialog);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
Button cancelBTN = dialog.findViewById(R.id.cancelBTN);
Button acceptBTN = dialog.findViewById(R.id.acceptBtn);
TextView tvTitle = dialog.findViewById(R.id.title);
TextView tvDescription = dialog.findViewById(R.id.description);
ImageView ivIcon = dialog.findViewById(R.id.icon);
tvTitle.setText(title);
tvDescription.setText(des);
ivIcon.setImageResource(icon);
cancelBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
acceptBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
dialog.show();
}
Call like this:
showDialog("Title", "Message", R.drawable.warning);
A simple way to show custom dialog properly with this code
dialog_choose_photo.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/l_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/_5sdp"
android:layout_marginRight="@dimen/_5sdp"
android:layout_marginBottom="@dimen/_5sdp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_dialog_smallround_white"
android:orientation="vertical">
<TextView
android:id="@+id/txt_camera"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingTop="@dimen/_10sdp"
android:paddingBottom="@dimen/_10sdp"
android:text="Take a Photo"
android:textColor="#3080C7"
android:textSize="18sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#F1F0F0" />
<TextView
android:id="@+id/txt_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingTop="@dimen/_10sdp"
android:paddingBottom="@dimen/_10sdp"
android:text="Choose from Gallery"
android:textColor="#3080C7"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_5sdp"
android:background="@drawable/bg_dialog_smallround_white"
android:orientation="vertical">
<TextView
android:id="@+id/txt_cancel_dialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingTop="@dimen/_10sdp"
android:paddingBottom="@dimen/_10sdp"
android:text="Cancel"
android:textColor="@color/colorPrimary"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Just call this function
public void openPhotoDialog() {
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dialog_choose_photo);
dialog.setCancelable(true);
// Setting dialogview
final Window window = dialog.getWindow();
window.setLayout(AbsListView.LayoutParams.MATCH_PARENT, AbsListView.LayoutParams.WRAP_CONTENT);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
WindowManager.LayoutParams wlp = window.getAttributes();
wlp.gravity = Gravity.BOTTOM;
window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
window.setDimAmount(0.5f);
window.setAttributes(wlp);
TextView txt_camera = dialog.findViewById(R.id.txt_camera);
TextView txt_gallery = dialog.findViewById(R.id.txt_gallery);
TextView txt_cancel_dialog = dialog.findViewById(R.id.txt_cancel_dialog);
txt_camera.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
dialog.dismiss();
}
});
txt_gallery.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
dialog.dismiss();
}
});
txt_cancel_dialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
dialog.dismiss();
}
});
dialog.show();
}
bg_dialog_smallround_white.xml drawable resource
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners
android:radius="@dimen/_5sdp" />
</shape>
Simple first create a class
public class ViewDialog {
public void showDialog(Activity activity, String msg){
final Dialog dialog = new Dialog(activity);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.custom_dialogbox_otp);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
TextView text = (TextView) dialog.findViewById(R.id.txt_file_path);
text.setText(msg);
Button dialogBtn_cancel = (Button) dialog.findViewById(R.id.btn_cancel);
dialogBtn_cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Toast.makeText(getApplicationContext(),"Cancel" ,Toast.LENGTH_SHORT).show();
dialog.dismiss();
}
});
Button dialogBtn_okay = (Button) dialog.findViewById(R.id.btn_okay);
dialogBtn_okay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Toast.makeText(getApplicationContext(),"Okay" ,Toast.LENGTH_SHORT).show();
dialog.cancel();
}
});
dialog.show();
}
}
then create a custom_dialogbox_otp
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="330dp"
android:layout_height="160dp"
android:background="#00555555"
android:orientation="vertical"
android:padding="5dp"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/round_layout_otp"
android:orientation="vertical"
android:padding="7dp"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="60"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="80"
android:gravity="center">
<ImageView
android:id="@+id/a"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#DA5F6A"
android:gravity="center"
android:scaleType="fitCenter"
android:src="@mipmap/infoonetwo" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="20">
<TextView
android:id="@+id/txt_file_path"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:singleLine="true"
android:text="TEXTO"
android:textColor="#FFFFFF"
android:textSize="17sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="@drawable/round_layout_white_otp"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="60">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Do you wanna Exit..?"
android:textColor="#ff000000"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="30dp"
android:layout_weight="50"
android:gravity="center|right">
<Button
android:id="@+id/btn_cancel"
android:layout_width="80dp"
android:layout_height="25dp"
android:background="@drawable/round_button"
android:gravity="center"
android:text="CANCEL"
android:textSize="13dp"
android:textStyle="bold"
android:textColor="#ffffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="30dp"
android:layout_weight="50"
android:gravity="center|left">
<Button
android:id="@+id/btn_okay"
android:layout_width="80dp"
android:layout_height="25dp"
android:background="@drawable/round_button"
android:text="OKAY"
android:textSize="13dp"
android:textStyle="bold"
android:textColor="#ffffffff" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
then in your drawable create beneath xml files.
for round_layout_white_otp.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- <corners android:radius="10dp" /> -->
<corners
android:bottomLeftRadius="18dp"
android:bottomRightRadius="16dp"
android:topLeftRadius="38dp"
android:topRightRadius="36dp" />
<solid android:color="#C0C0C0" />
</shape>
for round_layout_otp.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- <corners android:radius="10dp" /> -->
<corners
android:bottomLeftRadius="18dp"
android:bottomRightRadius="16dp"
android:topLeftRadius="38dp"
android:topRightRadius="38dp" />
<solid android:color="#DA5F6A" />
</shape>
round_button
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- <corners android:radius="10dp" /> -->
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
<solid android:color="#06A19E" />
</shape>
Then finally use the underneath code to visual ur dialog :)
ViewDialog alert = new ViewDialog();
alert.showDialog(ReceivingOTPRegActivity.this, "OTP has been sent to your Mail ");
your output :)