{"id":260,"date":"2014-04-07T20:26:00","date_gmt":"2014-04-07T18:26:00","guid":{"rendered":"http:\/\/www.albertopasca.it\/whiletrue\/?p=260"},"modified":"2018-05-25T13:41:21","modified_gmt":"2018-05-25T11:41:21","slug":"android-button-with-rounded-corners","status":"publish","type":"post","link":"http:\/\/www.albertopasca.it\/whiletrue\/android-button-with-rounded-corners\/","title":{"rendered":"[Android] \u2013 Button with rounded corners"},"content":{"rendered":"

Based on the last post, for iOS \u201cUIButton with rounded corners<\/a>\u201c, now the Android version.<\/p>\n

It\u2019s just a simple shape file (xml).<\/p>\n

<\/p>\n

In your\u00a0res<\/strong>\u00a0project folder, make a new folder called\u00a0xml<\/strong>\u00a0of type xml, and add a new shape file, for example\u00a0rounded_blue.xml<\/strong>.<\/p>\n

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

<corners\u00a0android:bottomRightRadius="0dp"
\nandroid:bottomLeftRadius="25dp"
\nandroid:topLeftRadius="0dp"
\nandroid:topRightRadius="25dp"><\/corners>
\n<\/shape>[\/code]<\/p>\n

In this file you can specify\u00a0startColor<\/strong>\u00a0and\u00a0endColor<\/strong>, put different color if you want a gradient rounded button..<\/p>\n

In\u00a0corners<\/strong>\u00a0tag, you can define the dp for radius for each corner.<\/p>\n

Now, in your Layout file, add a button and\u00a0set as background the shape file<\/strong>!
\nLike this:<\/p>\n

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

Well done!
\nLeft image is the preview in Android Studio, on the rigth, in a real device!<\/p>\n