Two ways to implement a rounded border with an android layout

Method one uses drawable-mdpi








To set the rounded corners of a border you can define an XML in the DRAWABLE-MDPI directory:





<?xml version= "1.0" encoding= "Utf-8"?>


<shape xmlns:android= "Http://schemas.android.com/apk/res/android" >


<solid android:color= "#000000"/>


<corners android:topleftradius= "10DP"


Android:toprightradius= "10DP"


Android:bottomrightradius= "10DP"


android:bottomleftradius= "10DP"/>


</shape>





Explanation: The solid of the fill color, in order to be simple, here with black.


And corners is to indicate rounded corners, note that here Bottomrightradius is the lower left corner than the lower right corner, Bottomleftradius the lower right corner.


Of course, the above effect can also be set as below, as follows:





<corners android:radius= "5DP"/>











If you want to reference this XML, you just need to @drawable/corners_bg.xml:





android:background= "@drawable/CORNERS_BG"











Last Main.xml:





<?xml version= "1.0" encoding= "Utf-8"?>


<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"


android:orientation= "vertical" android:layout_width= "fill_parent"


android:layout_height= "Fill_parent" android:background= "#FFFFFF" >


<relativelayout android:id= "@+id/login_div"


Android:layout_width= "Fill_parent" android:layout_height= "150dip"


android:padding= "15dip" android:layout_margin= "15dip"


android:background= "@drawable/CORNERS_BG" >


</RelativeLayout>


</LinearLayout>








Method Two Android uses Shape to draw border lines











1, layout








<?xml version= "1.0" encoding= "Utf-8"?>


<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"


Android:layout_width= "Fill_parent"


android:layout_height= "Fill_parent"


Android:background= "#FFFFFF"


android:orientation= "Vertical" >





<!--table layout-->


<tablelayout


Android:layout_width= "Fill_parent"


android:layout_height= "Wrap_content"


android:padding= "10dip" >


<!--table layout: First line-->


<tablerow


Android:layout_width= "Fill_parent"


android:layout_height= "Wrap_content"


android:background= "@drawable/shape_top_corner_no_bottom_line"


android:padding= "10dip" >


<textview


Android:layout_width= "Wrap_content"


android:layout_height= "Wrap_content"


Android:layout_gravity= "Center_vertical"


android:layout_marginright= "10dip"


android:text= "Name:" >


</TextView>


<edittext


Android:id= "@+id/bankingyournameedittext"


Android:layout_width= "Wrap_content"


android:layout_height= "Wrap_content"


Android:layout_gravity= "Center_vertical"


android:layout_weight= "1"


Android:background= "@null"


Android:singleline= "true" >


</EditText>


</TableRow>


<!--table layout: Second line-->


<tablerow


Android:layout_width= "Fill_parent"


android:layout_height= "Wrap_content"


android:background= "@drawable/shape_no_corner_without_bottom"


android:padding= "10dip" >


<textview


Android:layout_width= "Wrap_content"


android:layout_height= "Wrap_content"


Android:layout_gravity= "Center_vertical"


android:layout_marginright= "10dip"


android:text= "Contact Tel:" >


</TextView>


<edittext


Android:id= "@+id/bankingcontactteledittext"


Android:layout_width= "Wrap_content"


android:layout_height= "Wrap_content"


Android:layout_gravity= "Center_vertical"


android:layout_weight= "1"


Android:background= "@null"


Android:inputtype= "Phone"


Android:singleline= "true" >


</EditText>


</TableRow>


<!--table layout: Third line-->


<tablerow


Android:layout_width= "Fill_parent"


android:layout_height= "Wrap_content"


android:background= "@drawable/shape_bottom_corner_no_top_line"


android:padding= "10dip" >


<textview


Android:layout_width= "Wrap_content"


android:layout_height= "Wrap_content"


Android:layout_gravity= "Center_vertical"


android:layout_marginright= "10dip"


android:text= "Contact Tel:" >


</TextView>


<edittext


Android:id= "@+id/bankingcontactteledittext"


Android:layout_width= "Wrap_content"


android:layout_height= "Wrap_content"


Android:layout_gravity= "Center_vertical"


android:layout_weight= "1"


Android:background= "@null"


Android:inputtype= "Phone"


Android:singleline= "true" >


</EditText>


</TableRow>


</TableLayout>





<button


Android:id= "@+id/button1"


Android:layout_width= "Wrap_content"


android:layout_height= "Wrap_content"


android:layout_gravity= "Center"


android:text= "button"/>





</LinearLayout>

















2. Each tablerow in the table layout represents a row, and each base control in the TableRow is a column, which is a three-row two-column layout





The table background here is custom shape, and look at the three-shape code below.





Shape_top_corner_no_bottom_line.xml file: Top with rounded white background gray border without bottom border cuboid








<?xml version= "1.0" encoding= "UTF-8"?>


<!--top with rounded white background gray border without bottom border rectangular-->


<layer-list xmlns:android= "Http://schemas.android.com/apk/res/android" >


<item>


<shape>


<solid android:color= "#FFFFFF"/>


<corners android:topleftradius= "10DP" android:toprightradius= "10DP"


android:bottomrightradius= "0.1DP" android:bottomleftradius= "0.1DP"/>


<stroke android:width= "1DP" android:color= "#ffa8abad"/>


</shape>


</item>


<item android:top= "1DP" android:left= "1DP" android:right= "1DP" >


<shape>


<solid android:color= "#FFFFFF"/>


<corners android:topleftradius= "10DP" android:toprightradius= "10DP"


android:bottomrightradius= "0.1DP" android:bottomleftradius= "0.1DP"/>


<stroke android:width= "1DP" android:color= "#ffffffff"/>


</shape>


</item>


</layer-list>











3, Shape_no_corner_without_bottom.xml file: Without rounded white background gray border without bottom frame cuboid








<?xml version= "1.0" encoding= "UTF-8"?>


<!--without rounded white background gray border without bottom frame rectangular-->


<layer-list xmlns:android= "Http://schemas.android.com/apk/res/android" >


<item>


<shape>


<solid android:color= "#FFFFFF"/>


<stroke


Android:width= "1DP"


Android:color= "#ffa8abad"/>


</shape>


</item>


<item


android:left= "1DP"


android:right= "1DP"


android:top= "1DP" >


<shape>


<solid android:color= "#FFFFFF"/>


<stroke


Android:width= "1DP"


Android:color= "#ffffffff"/>


</shape>


</item>


</layer-list>











4, Shape_bottom_corner_no_top_line.xml file: The bottom rounded white background gray frame cuboid





<?xml version= "1.0" encoding= "UTF-8"?>


<!--bottom rounded white background gray frame cuboid-->


<layer-list xmlns:android= "Http://schemas.android.com/apk/res/android" >


<item>


<shape>


<solid android:color= "#FFFFFF"/>


<corners android:topleftradius= "0.1DP" android:toprightradius= "0.1DP"


android:bottomrightradius= "10DP" android:bottomleftradius= "10DP"/>


<stroke android:width= "1DP" android:color= "#ffa8abad"/>


</shape>


</item>


<item android:top= "1DP" android:bottom= "1DP" android:left= "1DP" android:right= "1DP" >


<shape>


<solid android:color= "#FFFFFF"/>


<corners android:topleftradius= "0.1DP" android:toprightradius= "0.1DP"


android:bottomrightradius= "10DP" android:bottomleftradius= "10DP"/>


<stroke android:width= "1DP" android:color= "#ffffffff"/>


</shape>


</item>


</layer-list>











5. Description:





Shape_top_corner_no_bottom_line.xml





Shape_no_corner_without_bottom.xml





Shape_bottom_corner_no_top_line.xml





The above three files are stored in drawable.











6, the effect of the picture view accessories.