Android Implementation dialog Fillet function

Last Update:2015-07-10 Source: Internet

Author: User

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

Android implements Custom dialog fillet featuresJust contact the Company's Android project, The customer drew the interface, the requirements are as Follows: pop-up window is to four rounded corners, and the title bar color and below the same, but also to be separated by the Blue Line , through the online various baidu, the solution is basically to create a shape under the /drawable folder file, which controls the Control. (note here that the shape file should be placed under the drawable folder, As for why it should be placed here, as well as the various element usages under the root element, please refer to the Predecessor's blog: http://blog.csdn.net/lonelyroamer/article/details/8254592 explained in Great detail). The key point is that shape provides a number of elements to control the color, rounded corners (the radius size can be controlled in four Directions). Since we need to use the round corner of the pop-up window, we have to use the following element Corners to control, the project directory is:F:\PopwindowOnLeft1\app\src\main\res\ Drawable-mdpi\shapeyuanjiao3.xml:<?xml version= "1.0" encoding= "UTF-8"?> <shape xmlns:android= "http://schemas.android.com/apk/res/android" Android:shape= "rectangle" > <!--the color of the fill - <solid android:color= "#0000FF"/> <!-- Set the Four corners of the button arc-- <!--android:radius arc radius-- <corners android:topleftradius= "@dimen/roundedamplitude" android:toprightradius= "@dimen/roundedamplitude"/ > <gradient Android:angle= "270" Android:centercolor= "#0000FF" Android:endcolor= "#0000FF" Android:startcolor= "#0000FF"/> </shape>The above code in the corner can be set above and below the two corners, not set the default is the radius of 0, which we can test on the MACHINE. After setting the fillet dimension, it is necessary to use in the layout file, it is very simple to use, through layout,view,textview , etc. android:background= The "@drawable/shapeyuanjiao3" property , set the dimensions, rounded corners (you can customize which corner to display separately for rounded corners).well, go into the actual need to come, in order to show the initial layout, I used a relative layout, the file is as Follows:<?xml version= "1.0" encoding= "utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" Android:layout_width= "match_parent" android:layout_height= "match_parent" > <com.pop.main.clipimageview android:layout_width= "match_parent" android:layout_height= "match_parent" Android:id= "@+id/front_image"/> <imageview android:layout_width= "match_parent" android:layout_height= "match_parent" Android:background= "#33000000"/> <linearlayout android:layout_width= "match_parent" android:layout_height= "wrap_content " android:layout_marginleft= "60dp" android:layout_marginright= "60dp" android:orientation= "vertical" android:layout_centerinparent= "true" android:background= "@drawable/shapeyuanjiao" > <textview android:layout_width= "match_parent" android:layout_height= "30dip " android:background= "@drawable/shapeyuanjiao3" android:text= "Guaranteed Gold status" android:gravity= "center" android:textcolor= "@color/white"/> <view android:layout_height= "1dip" Android:layout_width= "match_parent" android:background= "@color/blue"/><!--display the divider line-- <textview android:layout_width= "match_parent" android:layout_height= "30dip" Android:text= "No. Mega09102 " Android:textcolor= "@color/black"/> <textview android:layout_width= "match_parent" android:layout_height= "30dip" Android:text= "Floating Profit" Android:textcolor= "@color/black"/> </LinearLayout> </RelativeLayout>Please note<textview android:layout_width= "match_parent" android:layout_height= "30dip " Android:background= "@drawable/shapeyuanjiao3" Android:text= "Guaranteed Gold status" android:gravity= "center" Android:textcolor= "@color/white"/> <view android:layout_height= "1dip" Android:layout_width= "match_parent" Android:background= "@color/blue"/>This code is the key,textview is The dialog table header, set to Blue Separately. The overall dialog window needs to be set to gray, so a different shape file is required , and two files are only slightly different on the number and color of the rounded corners. You can see the effect by making a slight change . The following is The setup of the entire dialog:<linearlayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:layout_marginleft= "60dp" android:layout_marginright= "60dp" android:orientation= "vertical" android:layout_centerinparent= "true" android:background= "@drawable/shapeyuanjiao" >The results of the actual operation are as follows :The interface is a bit ugly, mo. In fact, in the process of doing, go a lot of detours, I listed it, to meet the same problem of people to provide some experience, the technology is not enough places please criticize correct.Detour One:I got another one from the Internet. setting the dialog to rounded corners is also set by the shape file, But the method is a little tortuous, by giving the entire dialog The outer layer also adds a rounded corner, where the entire window looks like it's being wrapped together,and theshape file is as Follows: <?xml version= "1.0" encoding= "utf-8"?> <shape xmlns:android= "http://schemas.android.com/apk/res/android" > <solid android:color= "#0033FF"/> //Set Margins,achieve rounded corners function <padding Android:bottom= "4dp" android:left= "4dp" android:right= "4dp" android:top= "4dp"/> //control boundary Line color and stroke size <stroke Android:width= "1dp" Android:color= "#CdCdCd"/> //control the color gradient of the interface (you can't use This) <gradient Android:startcolor= "#E9E9E9" Android:endcolor= "#FFFFFF" Android:type= "linear" Android:angle= "/>" //controlling the size of rounded corners <corners android:radius= "10dp"/> </shape>Note this code:set the Margins to achieve rounded corners <padding Android:bottom= "4dp" android:left= "4dp" android:right= "4dp" android:top= "4dp"/> This way a bit less in line with the requirements of customers, have the need for friends to refer to, I run the results are as follows: Detour 2:In the layout file, I thought of it at first, since the color of the title is not the same as the following, I useAndroid: background="@Color/blue" This setting, then the peripheral linelayout set android:background=" @drawable/shapeyuanjiao3 " but found that after running, there is no fillet effect, Consulting the company colleagues only found, although set up the entire layout shape rounded effect, but for each row of imageview set background imageview Do not set the color, give the title blue separately with another shape set to blue on it. Some places are not very clear, you can ask me, this small demo can be downloaded from here, Welcome to Download. http://download.csdn.net/detail/omayyouhappy/8888251 is free and can give newbies some advice. And this code or the background image of the function of the blur, in particular, can refer to my next blog: about the Android background image of the blurred solution? Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced. Android Implementation dialog Fillet function

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 Implementation dialog Fillet function

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support