Custom Dialog bullet frame and its background shadow display method

  • 2021-09-20 21:38:07
  • OfStack

Yesterday, I studied the bullet box of custom Dialog. In fact, the main point is to set the custom view into dialog by setContentView (view). First, let's look at a simple custom Dialog.

1. Write the layout file: custom_dialog_layout. xml (This layout is a simple prompt, and there is a certain button below. Please refer to the renderings in the comments)


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/content_layout"
 android:layout_gravity="center"
 android:gravity="center">
 
 <LinearLayout
  android:background="@drawable/dialog_content_white_with_radius"
  android:layout_marginLeft="40dp"
  android:layout_marginRight="40dp"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:gravity="center">
  <TextView
   android:id="@+id/dialog_content_text"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="info"
   android:textSize="@dimen/size40"
   android:textColor="@color/word_color_444444"
   android:padding="10dp"
   android:gravity="center"/>
  <View
   android:layout_width="match_parent"
   android:layout_height="0.5dp"
   android:background="@color/divide_line"/>
  <TextView
   android:paddingTop="10dp"
   android:paddingBottom="10dp"
   android:id="@+id/tv_sure"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:textColor="@color/main_color"
   android:text = " Determine "
   android:textSize="@dimen/two_level_word"
   />
 </LinearLayout>
 
</LinearLayout>

After writing the layout file, because the right angle of the layout is not good-looking, we can set shape with rounded border and write it as follows: dialog_content_white_with_radius


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

2. Writing a custom Dialog class inherits from Dialog:


 /** [Description]
 *  Only confirmation button
 * [How to use]
 *
 * [Tips]
 *
 * Created by lan.zheng on 2017/7/25 18:26.
 */
 
public class SureClickDialog extends Dialog {
 private Listener mListener;
 
 public SureClickDialog(Context context) {
  super(context);
 }
 
 public SureClickDialog(Context context, String content, Listener listener){
  super(context, R.style.custom_dialog_style);
  mListener = listener;
  View contentView = LayoutInflater.from(context).inflate(R.layout.dialog_have_been_sign_section_show, null);
  TextView contentTextView = (TextView) contentView.findViewById(R.id.dialog_content_text);
  contentTextView.setText(content);
  TextView sureButton = (TextView) contentView.findViewById(R.id.tv_sure);
 
  // Disappearing monitor 
  this.setOnDismissListener(new OnDismissListener() {
   @Override
   public void onDismiss(DialogInterface dialog) {
    mListener.onDialogDismissListener();
   }
  });
  // Confirm 
  sureButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    dismiss();
    mListener.onSureListerner();
   }
  });
  setContentView(contentView);
 }
 
 public interface Listener {
  void onDialogDismissListener();
  void onSureListerner();
 }
}

Here, we only listen to the disappearance of the bullet box and click the OK button. Well, the basic work is completed here. Finally, the style style is set. The background of the bullet box is translucent:


 <style name="custom_dialog_style" parent="android:Theme.Dialog">
  <item name="android:windowFrame">@null</item>
  <item name="android:windowIsFloating">true</item>
  <item name="android:windowIsTranslucent">false</item>
  <item name="android:windowNoTitle">true</item><!-- Remove title-->
  <item name="android:backgroundDimEnabled">true</item><!-- Translucent -->
  <item name="android:windowBackground">@color/transparent</item><!-- Remove background color -->
  <item name="android:radius">10dp</item>
 </style>

In this way, a bullet frame with translucent background is completed.

Settings < itemname="android:backgroundDimEnabled" > true < /item > < ! --translucent-- > Can achieve translucent, but if there are special background requirements that can not be met, at this time through the query found, you can rewrite the following function to the entire layout of your custom full screen display.


@Override
 public void show() {
  super.show();
  /**
   *  Set the width of full screen, which should be set in show The back of 
   */
  WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
  layoutParams.width= ViewGroup.LayoutParams.MATCH_PARENT;
  layoutParams.height= ViewGroup.LayoutParams.MATCH_PARENT;
  getWindow().getDecorView().setPadding(0, 0, 0, 0);
  getWindow().setAttributes(layoutParams);
 }

It is found that it is effective, and the background in my layout has been successfully applied, but it is found that clicking on the periphery can't make the bullet box disappear. This is because your bullet box is already full screen, so there is no so-called bullet box periphery on the screen. At this time, we can monitor the click event ourselves. Let's rewrite the custom Dialog class under 1:


/**
 * [Description]
 *  Only confirmation button
 * [How to use]
 * new SureClickDialog()
 * [Tips]
 * isClickOutsideCanDismiss You must give a value, true Indicates that you can click on the periphery to disappear, false Indicates that you cannot 
 * Created by lan.zheng on 2017/7/25 18:26.
 */
 
public class SureClickDialog extends Dialog {
 private Listener mListener;
 
 public SureClickDialog(Context context) {
  super(context);
 }
 
 public SureClickDialog(Context context, String content, boolean isClickOutsideCanDismiss,Listener listener){
  super(context, R.style.custom_dialog_style);
  mListener = listener;
  View contentView = LayoutInflater.from(context).inflate(R.layout.dialog_have_been_sign_section_show, null);
  LinearLayout linearLayout = (LinearLayout)contentView.findViewById(R.id.content_layout) ; // The outermost layer of a custom layout 
  linearLayout.setBackgroundColor(context.getResources().getColor(R.color.half_transparent));
  linearLayout.setOnClickListener(new View.OnClickListener() { // Set up custom click listening for it 
   @Override
   public void onClick(View v) {
    if(isClickOutsideCanDismiss){
     dismiss();
    }
   }
  });
  TextView contentTextView = (TextView) contentView.findViewById(R.id.dialog_content_text);
  contentTextView.setText(content);
  TextView sureButton = (TextView) contentView.findViewById(R.id.tv_sure);
 
  // Disappearing monitor 
  this.setOnDismissListener(new OnDismissListener() {
   @Override
   public void onDismiss(DialogInterface dialog) {
    mListener.onDialogDismissListener();
   }
  });
  // Confirm 
  sureButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    dismiss();
    mListener.onSureListerner();
   }
  });
  setContentView(contentView);
 }
 
  @Override
 public void show() {
  super.show();
 
  WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
  layoutParams.width= ViewGroup.LayoutParams.MATCH_PARENT;
  layoutParams.height= ViewGroup.LayoutParams.MATCH_PARENT;
  getWindow().getDecorView().setPadding(0, 0, 0, 0);
  getWindow().setAttributes(layoutParams);
 }
 
 
 public interface Listener {
  void onDialogDismissListener();
  void onSureListerner();
 }
}

OK, about the bullet box is written here, the custom function 10 points rich and has plasticity, interested can study 1.


Related articles: