Add Rounded Corners to Views and Layouts Android
Rounded Corners
In this quick article we will see how to add Rounded corners to Views and Layouts. This can be done on Layout XML or Programatically. Here we will see both the ways.
Rounded Border with Transparent Inside
Create an xml inside Drawable Folder with below code. Name it rounded_red_border.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> // The width and color of the border <stroke android:width="4dp" android:color="#de3d3d" /> // The desired corner radius. reduce it to keep it less rounded <corners android:radius="360dp" /> // Add your desired padding <padding android:left="20dp" android:top="10dp" android:right="20dp" android:bottom="10dp" > </padding> </shape> |
Applying the border to a Layout or View
Set the above drawable as a background to your Layout or View like LinearLayout, FrameLayout, TextView, Button etc.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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"> // Apply as the background of TextView <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="YOUR TEXT" android:textSize="20dp" android:textStyle="bold" android:background="@drawable/rounded_red_border" android:textColor="#000" android:layout_centerInParent="true"/> </RelativeLayout> |
Below are few more styles and examples.
Rounded Border with Coloured Inside
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="4dp" android:color="#de3d3d" /> // the inside color <solid android:color="#de3d3d" /> <corners android:radius="360dp" /> <padding android:left="20dp" android:top="10dp" android:right="20dp" android:bottom="10dp" > </padding> </shape> |
Less rounded Corner
To make it less rounded just reduce the corner radius value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="4dp" android:color="#ed2a4a" /> <solid android:color="#ed2a4a" /> // Reduce the corner radius value <corners android:radius="10dp" /> <padding android:left="20dp" android:top="10dp" android:right="20dp" android:bottom="10dp" > </padding> </shape> |
Set Background Programatically
|
1 2 3 4 5 |
main_layout.setBackground(ContextCompat.getDrawable(this,R.drawable.red_rounded_border)); |
Bonus
Creating a Button Selector (which changes colour on press) with Rounded Corners. Create an xml rounded_button_selector.xml in the Drawable Folder. Paste the below code and apply it as the Button Background.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="false"> <shape android:shape="rectangle"> <stroke android:width="4dp" android:color="#ed2a4a" /> <solid android:color="#ed2a4a" /> <corners android:radius="10dp" /> <padding android:bottom="10dp" android:left="20dp" android:right="20dp" android:top="10dp" /> </shape> </item> <item android:state_pressed="true"> <shape android:shape="rectangle"> <stroke android:width="4dp" android:color="#369743" /> <solid android:color="#369743" /> <corners android:radius="10dp" /> <padding android:bottom="10dp" android:left="20dp" android:right="20dp" android:top="10dp" /> </shape> </item> </selector> |
In the above code, the Button changes colour to Green when pressed. You may add more states like enabled, focused etc.
Hope this quick tutorial is helpful for you.
Let me know your Suggestions / Queries in comments.
Follow GadgetSaint on Facebook / Twitter for updates.
why transparent button still has grey square inside?
Can you post a preview image with your code for drawable and view