How to create a Custom Dialog box in android?

后端 未结 22 2795
囚心锁ツ
囚心锁ツ 2020-11-21 07:06

I want to create a custom dialog box like below

\"enter

I have tried the foll

相关标签:
22条回答
  • 2020-11-21 07:53

    I like to use tcAron library. (Download here: https://github.com/triocoder/tcAron)

    1. import class:

      import com.triocoder.tcaron.tcaronlibrary.tcAronDialogs;

    2. write this:

      tcAronDialogs.showFancyAlert(MainActivity.this, false, "Text", "Close", "ic_hub_white", 0xFFF44336);

    3. check the documentation:
      https://github.com/triocoder/tcAron/wiki/showFancyAlert

    0 讨论(0)
  • 2020-11-21 07:54

    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);

    0 讨论(0)
  • 2020-11-21 07:54

    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>
    
    0 讨论(0)
  • 2020-11-21 07:55

    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 :)

    0 讨论(0)
提交回复
热议问题