[Android] – Button with rounded corners

Based on the last post, for iOS “UIButton with rounded corners“, now the Android version.

It’s just a simple shape file (xml).

In your res project folder, make a new folder called xml of type xml, and add a new shape file, for example rounded_blue.xml.

[code lang=”xml” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
android:shape="rectangle">
<gradient android:startColor="#2D8CD6"
android:endColor="#2D8CD6"
android:angle="270"></gradient>

<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="25dp"
android:topLeftRadius="0dp"
android:topRightRadius="25dp"></corners>
</shape>[/code]

In this file you can specify startColor and endColor, put different color if you want a gradient rounded button..

In corners tag, you can define the dp for radius for each corner.

Now, in your Layout file, add a button and set as background the shape file!
Like this:

[code lang=”xml” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]
<button android:background="@drawable/rounded_blue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/homeText"
android:id="@+id/buttonHome"
android:textColor="#ffffff"
[…]
android:lines="3"></button>[/code]

Well done!
Left image is the preview in Android Studio, on the rigth, in a real device!

enjoy rounding!

Here the iOS version: http://www.albertopasca.it/whiletrue/2014/04/objc-uibutton-rounded-corners-2/

 

Alberto Pasca

Software engineer @ Pirelli & C. S.p.A. with a strong passion for mobile  development, security, and connected things.