Android custom dialog to implement QQ exit interface

Last Update:2015-06-26 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

EffectFirst of all, look at the qq, click the menu button after the point to exit the dialog box will appear.As can be seen, the dialog box has a fillet, as well as the title, information, two buttons, the button color is white, the button click the background will become gray, the normal state of the dialog box background color is white. and in addition to clicking the Cancel button and the return key, Tap other areas of the screen the dialog box will not be in the Hour. so now let's implement this dialog. the effect of our implementation as shownRealizeFirst write our background, the background is white by default, and have a rounded corner, using shape to implement<pre class="prettyprint"><code class=" hljs xml"><?xml version= "1.0" encoding= "utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android: Shape="rectangle" > <cornersAndroid:bottomleftradius="15px"Android:bottomrightradius= "15px" Android:topleftradius="15px"Android:toprightradius="15px" /> <solid android:color="@color/dialog_background"/></shape></code></pre> Then write our layout file, the layout of the main is two textview, two button,textview mainly used to display the title, and cue information, the title is centered display, the section can be implemented with gravity and layout_gravity, button is to see the bottom of the buttons, two button width of 1:1, this time can be implemented with layout_weight, and then the button has a 1-pixel high gray split line, the button also has a 1-pixel gray split line, This can be used to set the width and height of the view , then set the background color, and the button also has the effect of clicking, this section one uses selector Realization. <pre class="prettyprint"><code class=" hljs xml"><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_gravity="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"/> <Viewandroid:layout_width= "match_parent"android:layout_height=" 1px "android:background=" @color/dialog_divider " /> <linearlayoutandroid: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_wid th = "1px" android:layout_height = "match_parent" android:background =" @color/dialog_divider "/> <buttonandroid: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></linearlayout></code></pre>We also have to write selector file, divided into two, one is the effect of the left button, one is the effect of the button on the right, why use two, because the two buttons have a corner is rounded, and the position of the fillet is different, one is the lower left corner, one is the lower right corner, so we need two such a file, Here we take the left for example, the right side of the implementation of the same effect. First write the background shape under normal state<pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><?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></code></pre></pre>Then write the selected state or the background shape that gets the focus<pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><?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></code></pre></pre>Finally write selector<pre class="prettyprint"><code class=" hljs xml"><?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></code></pre>For the background of the right button, as long as the corresponding left to correct, there is no Code.In addition, we have to write a default style, we want to remove the default dialog annoying title, fully use our own layout, and some other settings<pre class="prettyprint"><code class=" hljs applescript"><stylename="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></code></pre>At this point, we create a new Exitdialog class to inherit the dialog class, call the style we wrote in the constructor, and assign values to the context object, override the OnCreate method, set our layout<pre class="prettyprint"><code class=" hljs java"> public class exitdialog extends Dialog { PrivateContext mcontext;PrivateButton mconfirm;PrivateButton mcancel; public Exitdialog(context Context) {Super(context,r.style.exitdialog); mcontext=context; } public Exitdialog(context context,intTheme) {Super(context, theme); mcontext=context; }@Override protected void onCreate(Bundle Savedinstancestate) {Super. onCreate (savedinstancestate); Setcontentview (r.layout.layout_dialog); }}</code></pre>And we're going to let this diaglog click outside of the dialog box does not disappear, we need to set Setcanceledontouchoutside (false). then, We need to set the click event, Click the OK button will exit the app, Click Cancel the current dialog box will disappear<pre class="prettyprint"><code class=" hljs java">@Override protected void onCreate(Bundle Savedinstancestate) {Super. onCreate (savedinstancestate); Setcontentview (r.layout.layout_dialog);//set to our layout this. Setcanceledontouchoutside (false);//set to the area outside of the Click dialog box does not disappearmconfirm= (Button) Findviewbyid (r.id.dialog_confirm); mcancel= (Button) Findviewbyid (r.id.dialog_cancel);//set EventsMconfirm.setonclicklistener (NewView.onclicklistener () {@Override public void OnClick(View V) {system.exit (0); } }); Mcancel.setonclicklistener (NewView.onclicklistener () {@Override public void OnClick(View V) {exitdialog. this. Dismiss (); } }); }</code></pre>UseImplementation is also very simple, the context object is passed into the construction of a exitdialog object, called the Show method display can be<pre class="prettyprint"><pre class="prettyprint"><code class=" hljs cs">ExitDialog dialog=new ExitDialog(MainActivity.this);dialog.show();</code></pre></pre>SOURCE downloadCopyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced. Android custom dialog to implement QQ exit interface

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Android custom dialog to implement QQ exit interface

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support