This button style should originate from iOS, and if implemented on Android, it needs to be done using the Layer-list on Android. In fact, layer-list a bit like framlayout, the role is to cover.
Let's talk about the principle of implementation: Draw a rectangle first, which is the red border we see. Then draw a rectangle to cover the white background above, set Android:left | Right | Top |bottom value, you can achieve the size of the border. And then set the Background property in the button is good, the following is attached to the source code.
because three button shapes are different, set three layer-list. The difference between them is only the radius.
If you need to set up like three to select one, and have the effect of pressing. It's best to use RadioButton to implement it, and then implement <Selector> in Drawable.
<div style= "Text-align:left;" ><pre name= "code" class= "HTML" ><?xml version= "1.0" encoding= "UTF-8"? ><layer-list xmlns:android= " Http://schemas.android.com/apk/res/android "> <!--box color values--<item> <shape> & Lt;solid android:color= "#ff0000"/>//Background fill red <corners android:bottomrightradius= "4DP"/ /Set Fillet android:toprightradius= "4DP"/> </shape> </item> <!--body background color value-- <item android:bottom= "1DP"//Border width android:right= "1DP" android:top= "1DP" > <shape > <solid android:color= "#ffffff"/> <corners android:bottomrightradius= "4 DP "android:toprightradius=" 4DP "/> <padding android:bottom=" 10DP " android:left= "10DP" android:right= "10DP" android:top= "10DP"/> </shape&Gt </item></layer-list>
<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 "Android:paddi ngbottom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin" Android: paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin" tools: Context= ". Mainactivity "> <button android:id=" @+id/button3 "android:layout_width=" Wrap_content "Androi d:layout_height= "Wrap_content" android:layout_alignbaseline= "@+id/button2" android:layout_alignbottom= "@+id/ Button2 "android:layout_centerhorizontal=" true "android:background=" @drawable/button_mid "<span styl E= "Font-family:arial, Helvetica, Sans-serif;" >//Set Button shape </span> android:text= "Button3"/> <button android:id= "@+id/button2" a Ndroid: layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_alignbaseline= "@+id/button1 "Android:layout_alignbottom=" @+id/button1 "android:layout_torightof=" @+id/button3 "Android:backgroun d= "@drawable/button_right"//Set Button shape android:text= "Button2"/> <button android:id= "@+id/butt On1 "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_alignpar Enttop= "true" android:layout_margintop= "110DP" android:layout_toleftof= "@+id/button3" Android:backgro und= "@drawable/button_left" <span style= "font-family:arial, Helvetica, Sans-serif;" >//Setting the button's shape </span> android:text= "Button1"/></relativelayout>
Android_ overriding button styles