Using activity to realize a simple inputable dialog box

1、 Demand analysis

In the application, such comments are always indispensable , Some applications add one directly at the bottom EditText And a Button, Let the user input text or expression and click the button to submit ; And some are also placed EditText, But it's just a “ The decoration ”, No input function , After clicking it, the user will pop up a jump to a page that can be really edited or a dialog box that can input content . For example, the following effect ：

The effect here can be subdivided into four points ：
1. Click the button at the bottom and a dialog box will pop up , The dialog box is at the bottom of the layout ;
2. There is an input box in the dialog box EditText, You can enter content ;
3. After the dialog box pops up EditText Will automatically get the focus , Pop up the soft keyboard ;
4. The soft keyboard will top the dialog , Easy for users to edit .

At first I thought of PopupWindow, But because there is EditText, Interacting with a soft keyboard is a headache , So I switched to Activity. In this way, we can use Activity Also use this dialog , It's much more convenient . But after all, it's the same as what we usually use Activity It's different , Especially set its style , Otherwise, it is also a pile of pits .

2、 Dialog box Activity Layout and style of

Now let's start to implement the dialog we want . Build a new project ,MainActivity Just a supporting role , Just put a button at the bottom . Our main character is DialogActivity, Its layout is very simple , Just like usual Activity equally ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_gravity="bottom" android:background="@android:color/white" android:orientation="vertical" android:paddingLeft="10dp" android:paddingRight="10dp">

        <EditText  android:id="@+id/et_comment" android:layout_width="match_parent" android:layout_height="150dp" android:layout_marginTop="15dp" android:background="#f0f0f0" android:focusable="true" android:focusableInTouchMode="true" android:gravity="left|top" android:hint=" Let me say ~" android:paddingBottom="5dp" android:paddingLeft="8dp" android:paddingRight="8dp" android:paddingTop="5dp" android:textSize="14dp" />

        <Button  android:textColor="@android:color/white" android:background="@android:color/holo_blue_light" android:id="@+id/btn_submit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:padding="5dp" android:text=" Comment " android:textSize="16sp" />
    </LinearLayout>

</LinearLayout>

The key is its style , Look at the code below ：

   <!-- You can enter the style of the dialog box  -->
    <style name="EditDialogStyle" parent="Theme.AppCompat.Light.NoActionBar"> // Set the background  <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowSoftInputMode">adjustResize|stateHidden</item> //Dialog Of windowFrame The box is none  <item name="android:windowFrame">@null</item> // Whether to display the title ,true Then remove the default title bar  <item name="android:windowNoTitle">true</item> // Whether it appears in activity above ,false It will be covered by the soft keyboard  <item name="android:windowIsFloating">true</item> // Is it translucent , by false The background is black and opaque  <item name="android:windowIsTranslucent">true</item> // Whether there is coverage  <item name="android:windowContentOverlay">@null</item> //Activity Animation effect of  <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item> // Whether the background is blurred , by false The effect is full transparency  <item name="android:backgroundDimEnabled">true</item> // Whether to destroy when clicking the blank space Activity <item name="android:windowCloseOnTouchOutside">true</item> </style>

There are many properties to set , I have made comments , Just understand the function of each attribute , Let's talk about it in detail here . Don't forget , To the manifest file DialogActivity Use this theme ：

        <activity android:name=".DialogActivity" android:configChanges="orientation|screenSize" android:screenOrientation="portrait" android:theme="@style/EditDialogStyle"/>

Finally, I have to go Activity Set the width and height of the dialog box ：

    private void setWindow() {
        // Window alignment screen width 
        Window win = this.getWindow();
        win.getDecorView().setPadding(0, 0, 0, 0);
        WindowManager.LayoutParams lp = win.getAttributes();
        lp.width = WindowManager.LayoutParams.MATCH_PARENT;
        lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
        lp.gravity = Gravity.BOTTOM;// Set the dialog box to display at the top 
        win.setAttributes(lp);
    }

Run it , I believe you can see the effect .

3、 Automatically pop up the soft keyboard effect

We have made the dialog interface , But for a better user experience , We want to pop up the soft keyboard automatically when the dialog box appears . Here are two ways ：

3.1、 Use InputMethodManager Class display soft keyboard

We usually have to let someone EditText Get focus automatically pop-up soft keyboard can be written like this ：

   InputMethodManager inputManager =(InputMethodManager)etComment.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
   inputManager.showSoftInput(etComment, 0);

But there is one thing to pay attention to ： We want to make EditText Focus of attention , You must wait until the interface is drawn . So the delay is set 300ms Execute the code that pops up the soft keyboard , Give the interface time to draw ：

       new Handler(new Handler.Callback() {
            @Override
            public boolean handleMessage(Message msg) {
                InputMethodManager inputManager =
                        (InputMethodManager) etComment.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
                inputManager.showSoftInput(etComment, 0);
                return false;
            }
        }).sendEmptyMessageDelayed(0, 300);

Add the code above , You can pop up the soft keyboard by yourself .

3.1、 Set up windowSoftInputMode attribute

If you are careful, you will find that the front is DialogActivity There is a windowSoftInputMode Property is not commented , Please forgive me for selling . This attribute is used to set the interaction mode between the window and the soft keyboard . It has many properties , You can refer to the reference articles given later . Here we use adjustResize, Its function is to adjust the interface layout to leave enough space for the soft keyboard . that stateHidden Well ？ In fact, the soft keyboard doesn't pop up automatically, which is the ghost of it , It means that in general, the soft keyboard is hidden . We change it to another attribute ：stateVisible, It means that the soft keyboard is usually visible .

Let's run it again , The soft keyboard arrived as scheduled .

4、 Postscript

The effect we mentioned in the demand analysis has been achieved . Later, I also thought about adding custom animation effects to the dialog , But the animation when exiting is never set successfully , So if a reader realizes , Welcome to exchange and study . I saved the source code to the code cloud , If necessary, you can refer to ：
You can enter the source code of the dialog

5、 Reference article

android:windowSoftInputMode Properties,
Get it all done Android Common problems of soft keyboard in development