markdown 自定义对话提示和技巧

Posted 2021-05-06

# Custom Dialog Tips and Tricks

[SOURCE](https://stackoverflow.com/a/38187570/1602807), [SOURCE](https://stackoverflow.com/a/34584907/1602807)

Some common pit fall of creating a custom Dialog, simpler version of this ([Gist](https://gist.github.com/vxhviet/9b3a4437fdfc81ddf696391572f26689), [Cacher](https://snippets.cacher.io/snippet/fdcd0523bdc109616945)).

```java
Dialog verifyDialog = new Dialog(act);
verifyDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
if(verifyDialog.getWindow() != null) {
    //remove the white background behind the dialog
    verifyDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
}
//add a nice transparent backgroudn to the window
act.getWindow().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(act, R.color.white_75)));
verifyDialog.setContentView(R.layout.dialog_hv_email_input);
```

- `dialog_hv_email_input.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content"
    android:background="@drawable/bg_dialog_create_account">

    <TextView
        android:id="@+id/dhei_title_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        android:text="@string/login_email_empty"
        android:textColor="@color/text_color_dark"
        android:textSize="@dimen/text_19"
        android:fontFamily="@font/avenir_next_bold"
        android:gravity="center"
        android:layout_margin="24dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/dhei_email_textInputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dhei_title_tv">

        <EditText
            android:id="@+id/edt_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:hint="@string/fragment_hv_account_create_email" />
    </android.support.design.widget.TextInputLayout>

    <TextView
        android:id="@+id/tv_submit_email"
        android:layout_width="0dp"
        android:layout_height="@dimen/space_50"
        android:background="@drawable/bg_green_corner_25"
        android:text="@string/tv.fragreset.button.submit"
        android:textColor="@color/basic_white"
        android:textSize="@dimen/text_15"
        android:fontFamily="@font/avenir_next_bold"
        android:gravity="center"
        android:layout_margin="24dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dhei_email_textInputLayout"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

```

- `bg_dialog_create_account.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="@dimen/space_13"
        android:bottomRightRadius="@dimen/space_13"
        android:topLeftRadius="@dimen/space_13"
        android:topRightRadius="@dimen/space_13" />
    <solid android:color="@color/basic_white" />
</shape>
```

- `bg_green_corner_25.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/fancy_blue"/>

    <stroke
        android:width="1dp"
        android:color="@color/main_green" />

    <corners
        android:bottomLeftRadius="@dimen/space_25"
        android:bottomRightRadius="@dimen/space_25"
        android:topLeftRadius="@dimen/space_25"
        android:topRightRadius="@dimen/space_25"/>
</shape>
```

## EXTRA:
Because custom dialog layout doesn't take margin into account,
     so we need to wrap it with another view and set padding to replicate margin between dialog and screen edges:
     
```
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"> <--- Replicate margin
    
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:cardCornerRadius="10dp">
        
        ... your dialog layout
        
    </androidx.cardview.widget.CardView>
</FrameLayout>

```