Android user-defined dialog box to implement QQ exit interface, android User-Defined

Android user-defined dialog box to implement QQ exit interface, android User-Defined
Effect

First, let's take a look at QQ's. Click the menu button and click exit to display the dialog box.

As you can see, this dialog box has a rounded corner, title, prompt information, and two buttons. The color of the buttons is white and the background turns gray after the button is clicked, the background color of the normal dialog box is white. besides the cancel button and return key, the dialog box is not displayed in other areas of the screen. now let's implement this dialog box. shows the effect after implementation.

Implementation

First, write our background. The background is white by default, and there is a rounded corner, which is implemented using shape.

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

Then, write our layout file. There are two textviews and two buttons in the layout. TextView is mainly used to display the title and prompt information. The title is centered, you can use gravity and layout_gravity to implement the function together. The Button is the Button at the bottom of the page. The width ratio of the two buttons is. At this time, you can use layout_weight to implement the function, there is a gray split line at the top of the button, and there is also a gray split line at the top of the button. You can set the width and height of the View and then set the background color, the button also has the effect of clicking. This section uses selector.

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "320dp" android: layout_height = "match_parent" android: layout_gravity = "center" android: orientation = "vertical" tools: context = ". mainActivity "> <TextView android: id =" @ + id/title "android: layout_width =" wrap_content "android: layout_height =" 50dip "android: layout_gravit Y = "center" android: gravity = "center" android: text = "exit" android: textColor = "@ color/dialog_text" android: textSize = "18sp" android: textStyle = "bold"/> <TextView android: id = "@ + id/content" android: layout_width = "wrap_content" android: layout_height = "60sp" android: paddingLeft = "10dip" android: paddingRight = "10dip" android: gravity = "center_vertical" android: text = "are you sure you want to exit? "Android: textColor =" @ color/dialog_text "android: textSize =" 16sp "/> <View android: layout_width =" match_parent "android: layout_height =" 1px "android: background = "@ color/dialog_divider"/> <LinearLayout android: layout_width = "match_parent" android: layout_height = "40dp" android: layout_alignParentBottom = "true"> <Button android: id = "@ + id/dialog_cancel" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "cancel" android: textColor = "@ color/dialog_btn" android: background = "@ drawable/dialog_left_btn_selector"/> <View android: layout_width = "1px" android: layout_height = "match_parent" android: background = "@ color/dialog_divider"/> <Button android: id = "@ + id/dialog_confirm" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "OK" android: textColor = "@ color/dialog_btn" android: background = "@ drawable/dialog_right_btn_selector"/> </LinearLayout>

We also need to write the selector file, which can be divided into two parts: one is the effect of the button on the left and the other is the effect of the button on the right. Why should we use two, because the two buttons have a rounded corner and different positions, one is the lower left corner and the other is the lower right corner, we need two such files. Here we take the left side as an example, the implementation on the right is the same.
First, write a normal background shape.

<?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="#FFFFFF"/>    <corners android:bottomLeftRadius="15px"/></shape> 

Then write the selected status or background shape when the focus is obtained.

<?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="#EAEAEA"/>    <corners android:bottomLeftRadius="15px"/></shape> 

Finally Write selector

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@drawable/dialog_left_btn_pressed"/>    <item android:state_focused="true" android:drawable="@drawable/dialog_left_btn_pressed"/>    <item android:drawable="@drawable/dialog_left_btn"/></selector>

For the background of the right button, you only need to change the corresponding left to right, and no code is pasted here.

In addition, we also need to write a default style. We need to remove the titles that are annoying by default Dialog, completely use our own layout, and some other settings.

    <style name="ExitDialog" parent="@android:style/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>        <item name="android:windowBackground">@drawable/dialog_bg</item>        <item name="android:backgroundDimEnabled">true</item>    </style>

At this time, we create an ExitDialog class to inherit the Dialog class, call the style we wrote in the constructor, assign values to the context object, override the onCreate method, and set our layout.

public class ExitDialog extends Dialog {    private Context mContext;    private Button mConfirm;    private Button mCancel;    public ExitDialog(Context context) {        super(context,R.style.ExitDialog);        mContext=context;    }    public ExitDialog(Context context, int theme) {        super(context, theme);        mContext=context;    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_dialog);    }}

However, the area outside the Diaglog dialog box will not disappear. We need to set setCanceledOnTouchOutside (false ). then, we need to set the click event, click OK to exit the application, and click Cancel. The current dialog box will disappear.

@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. layout_dialog); // set this to our layout. setCanceledOnTouchOutside (false); // It is set to do not disappear in the dialog box outside the click dialog box. mConfirm = (Button) findViewById (R. id. dialog_confirm); mCancel = (Button) findViewById (R. id. dialog_cancel); // sets the mConfirm event. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {System. exit (0) ;}}); mCancel. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {ExitDialog. this. dismiss ();}});}

Use

The implementation is also very simple. The context object is passed in to construct an ExitDialog object, and you can call the show method to display it.

ExitDialog dialog=new ExitDialog(MainActivity.this);dialog.show();

Source code download

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.