This article documents the custom AlertDialog and the problems encountered

Custom AlertDialog

Let’s start with the renderings

Create a layout

First we create the desired Dialog layout file

<? The 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="200dp" android:background="@drawable/style_linearlayout_round_bg" android:orientation="vertical">  <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <TextView android:layout_width="100dp" android:layout_height="match_parent" android:text="@string/penaltyType" android:gravity="center" android:textColor="@color/colorAccent" /> <Spinner android:id="@+id/sp_penalty" android:layout_width="match_parent" android:layout_height="wrap_content" android:entries="@array/penaltyArray" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1">  <TextView android:layout_width="100dp" android:layout_height="match_parent" android:text="@string/penaltyContent" android:gravity="center" android:textColor="@color/colorAccent" /> <EditText android:id="@+id/et_penaltyContent" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@null" android:inputType="text" /> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="2dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:background="@color/gray" /> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal" android:gravity="center"> <TextView android:layout_width="0dp" android:layout_height="match_parent" <Button android:id="@+id/btn_save" android:layout_weight="0.6" Android :visibility="invisible" /> <Button android:id="@+id/btn_save" android:layout_width="wrap_content" android:layout_height="32dp" android:background="@drawable/style_button_round_bg" android:textColor="@color/white" android:text="@string/save" /> <TextView android:layout_width="0dp" Android :layout_height="match_parent" Android :layout_weight="0.8" Android :visibility="invisible" /> <Button android:id="@+id/btn_close" android:layout_width="wrap_content" android:layout_height="32dp" android:background="@drawable/style_button_round_bg" android:textColor="@color/white" android:text="@string/close" /> The < TextView android: layout_width = "0 dp" android: layout_height = "match_parent" android: layout_weight = "0.6" android:visibility="invisible" /> </LinearLayout> </LinearLayout>Copy the code

We’re going to make an AlertDialog look like this, and then once we’ve created our custom layout, we’re going to do it in our Activity/Fragment.

Add the layout

Add the created layout to our AlertDialog in the Activity and you’re done.

View customPenaltyView = LayoutInflater.from(mContext).inflate(R.layout.widget_custom_select_penalty, null, false); . // Set the custom layout dialog.setView(customPenaltyView); RequireNonNull (dialog.getwindow ()).setContentView(customPenaltyView);Copy the code

This is possible because some custom dialogs on the web fill the area between the Title and Button of the Dialog when setting the layout using the first method. In this case, the second method works. (Ps: not yet), in general, the first method is used.

Increase to monitor

Once the layout is set up, do some listening to the controls on the layout.

        final AlertDialog dialog = new AlertDialog.Builder(mContext).create();
        final Spinner penaltyType = customPenaltyView.findViewById(R.id.sp_penalty);
        final EditText penaltyContent = customPenaltyView.findViewById(R.id.et_penaltyContent);
        final String [] penaltyTypeArray = getResources().getStringArray(R.array.penaltyArray);
        final String[] penaltyTypeString = new String[1];
        dialog.setView(customPenaltyView);
        Button save  = customPenaltyView.findViewById(R.id.btn_save);
        Button close  = customPenaltyView.findViewById(R.id.btn_close);
        penaltyType.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                penaltyTypeString[0] = penaltyTypeArray[position];
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });
        save.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
                Toast.makeText(mContext, penaltyTypeString[0] + penaltyContent.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });
        close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
        dialog.show();
        Objects.requireNonNull(dialog.getWindow()).setBackgroundDrawableResource(R.color.transparent);

Copy the code

conclusion

With the three steps above, you can basically make an AlertDIalog what you want it to be.

Or you could do it a little bit more succinctly, like this.

Public View addPlayerView = Layoutinflater.from (mContext).inflate(r.laylayout.widget_custom_alertdialog_addPlayer, null, false); Dialog = new Alertdialog. Builder(mContext, R.style.AlertDialog_AppCompat_Transparent).setView(addPlayerView).create(); / / to monitor final EditText addPlayerName = addPlayerView. The findViewById (R.i d.e t_addPlayerName); TextView addPlayerData = addPlayerView.findViewById(R.id.tv_addPlayerButton); addPlayerData.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); Toast. MakeText (TruthOrDareActivity. This, "added the player" + addPlayerName. GetText (), toString (), Toast. LENGTH_SHORT), show (); }}); dialog.show();Copy the code

Finally, there is the problem

  1. The layout fills the area incorrectly

In the Add Layout, fill a part of the Dialog with the layout file, which can be set through the Dialog’s getWindow setContentView method. You can look at step 2 above to add the layout.

  1. Setting width and height invalid

Setting width and height invalidation in the layout file can still be done by setting the relevant properties in the Window. We can get the height and width of the screen and then set the desired position.

  1. Layout files use relative layout

Layout files use a RelativeLayout. Using a LinearLayout will cause the size (width and height) of your custom XML to be unadjustable

  1. Invalid height setting problem with RelativeLayout

The problem with invalid height when using a relative layout is not that layout_height is invalid, but that layout_height is invalid based on the maximum height of the child control. This means that if you set the height to match_parent or a specific height within the outermost RelativeLayout, it will fail if the child is match_parent and the height of the child is less than the outermost height. In fact, it is not invalid, but it is set according to the maximum height in the child control. Equivalent to wrap_parent. The custom Dialog width is invalid