Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Make a transparent Dialog Activity

Usually in many software, must have seen from the bottom of the PopupWindow, such as to share a file, from the bottom of the popup platform, most of the PopupWindow at the bottom of the popup implementation, this time for a different.

1. What is Dialog Activity

Make your Activity have the same effect as a Dialog, with a blurred background and a hover effect.

2. Why Dialog Activity

Sometimes we need to do complex logic in the popover, which leads to a bloated Dialog. An Activity with Dialog style can use architecture to divide the complex logic into layers just like we write UI, which will be cleaner in logic and easier to manage in page declaration cycle.

How to implement Dialog Activity

3.1 Write a style

<style name="Theme.ActivityDialogStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowCloseOnTouchOutside">false</item>
        <item name="android:windowIsFloating">true</item>
    </style>
Copy the code

WindowIsTranslucent: whether translucent windowBackground: set dialog’s background backgroundDimEnabled: Whether the background is blurred display windowContentOverlay: Settings window content does not cover windowCloseOnTouchOutside: windowIsFloating: whether emerge on the activity, this property is very important, is set to true, the Activty status bar will disappear.

3.2 Reference Styles

 <activity
            android:name=".MainActivity2"
            android:theme="@style/Theme.ActivityDialogStyle" />
Copy the code

Note: An activity must inherit AppCompatActivity.

3.3 Configurable Options

Set rounded background if desired

In the onCreate add

getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
Copy the code

If you want the page to fill the screen, you know that the Dialog is not filled by default. In the onCreate add

Window window = getWindow(); // Remove the default padding of the DecorView, and the default size of the DecorView will also remove window.getdecorView ().setPADDING (0, 0, 0, 0); WindowManager.LayoutParams layoutParams = window.getAttributes(); / / set the width layoutParams. Width = WindowManager. LayoutParams. MATCH_PARENT; window.setAttributes(layoutParams); // It is important to set the background color for the DecorView, otherwise the Dialog content will not display completely, and some of the content will be used as padding. // window.getdecorView ().setBackgroundcolor (color.green);Copy the code

3.4 hit the pit

It’s actually quite simple, but something weird happens. I wrote a layout, a linear layout, and there was nothing wrong with it, but it never worked. Remove the windowIsFloating property, but it causes the Dialog Activity to exist in the status bar. Finally by modifying the layout to solve, first look at the first layout and effect.

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity2"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:background="@color/white" /> </LinearLayout>Copy the code

You can see that the Activity is displayed because the background is blurred, but the white layout_weight of 2 is not displayed.

Modified layout (using relative layout as root layout) :

<? The XML version = "1.0" encoding = "utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity2"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:background="@color/white" /> </LinearLayout> </RelativeLayout>Copy the code

This is the normal display, although solved, but the reason is really good mystery.