{"id":3323,"date":"2013-01-01T16:56:57","date_gmt":"2013-01-02T00:56:57","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=3323"},"modified":"2013-01-01T16:56:57","modified_gmt":"2013-01-02T00:56:57","slug":"android-tricks-using-shape-for-theming","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/android-tricks-using-shape-for-theming\/","title":{"rendered":"Android Tricks: Using Shape for Theming"},"content":{"rendered":"

\t\t\t\tAndroid supports all sorts of “drawable” objects (the Bitmap<\/code> drawable, which can contain images in formats like PNG and JPG, is one example). The one we are going to talk about today is so-called Shape drawable<\/a>.<\/p>\n

Shape drawables are defined with a simple XML syntax and stored in the drawable<\/code> folder of an Android solution. Several basic shapes are supported, including rectangles (with optional rounded corners) and ovals. The border and fill of a shape can be specified—the user can choose a solid fill color or a multistep gradient. The Android designer in MonoDevelop is actually smart enough to interpret XML drawables, so you can change them and see the result appear live in MonoDevelop’s Android layout designer as you are building your application!<\/p>\n

A standalone shape drawable is probably not very useful, but shapes can be immensely helpful when used together in conjunction with other Views. You can use a combination of simple shapes and other elements for simple widget theming. In the following image, which was first shown in my expandable ListView blog post<\/a>, you can see three different shape drawables in action:<\/p>\n

\"expandhelper-collapsed\"<\/a><\/p>\n

First, the circle around the coffee cup is an oval drawable filled with a semi-transparent color to darken the main header background color. The following XML is the source code for that shape:<\/p>\n

\n<?xml version="1.0" encoding="UTF-8" ?>\n<shape xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android" android:shape="oval">\n    <solid android:color="#42000000" \/>\n    <padding android:left="8dp" android:top="8dp"\n             android:right="8dp" android:bottom="8dp" \/>\n<\/shape>\n<\/pre>\n
In the following XML layout, you can see the shape referenced in the android:background<\/code> attribute:<\/p>\n
\n<FrameLayout\n   android:layout_width="80dp"\n   android:layout_height="80dp"\n   android:layout_gravity="center"\n   android:background="@drawable\/aitemring">\n   <ImageView\n       android:src="@drawable\/coffee"\n       android:layout_width="fill_parent"\n       android:layout_height="fill_parent"\n       android:scaleType="center" \/>\n<\/FrameLayout>\n<\/pre>\n
To force the oval shape to be square, you have to set the size of the FrameLayout<\/code> accordingly. The necessary value will depend on your application. You can even set it dynamically, though that has to be done in code.<\/p>\n
Second, the bottom bar where the location and date appear is a rectangle shape filled with a gradient to give it volume. Gradients like that one are a convenient way to add some eye candy to your UI elements. For more details, see the Android graphics talk<\/a> (the relevant part starts at 3:10) that Google developers Chet Haase<\/a> and Romain Guy<\/a> presented at Devoxx.<\/p>\n
The XML code for the bar shape is given below:<\/p>\n
\n<?xml version="1.0" encoding="UTF-8" ?>\n<shape xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android" android:shape="rectangle">\n    <solid android:color="#AA212121" \/>\n    <gradient android:angle="90"\n    \tandroid:startColor="#59AAAAAA"\n    \tandroid:endColor="#59EEEEEC" \/>\n    <padding android:left="8dp" android:top="8dp"\n             android:right="8dp" android:bottom="8dp" \/>\n<\/shape>\n<\/pre>\n
In this example, I combined the <solid\/><\/code> element to paint my base color and the <gradient\/><\/code> element to perform the shading on top of it.<\/p>\n
Again, to apply the effect, simply use the android:background<\/code> attribute in one of your layout elements:<\/p>\n
\n<RelativeLayout\n    android:layout_width="fill_parent"\n    android:layout_height="fill_parent"\n    android:background="@drawable\/aitemfooter">\n<\/pre>\n
Finally, the border (with round corners) that is displayed around the whole UI widget is also a shape drawable:<\/p>\n
\n<?xml version="1.0" encoding="UTF-8" ?>\n<shape xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android" android:shape="rectangle">\n    <solid android:color="#00FFFFFF" \/>\n    <stroke android:width="1dp" android:color="#ffaaaaaa" \/>\n    <corners android:radius="3px" \/>\n<\/shape>\n<\/pre>\n
In this case, since we only care about the border, we set the filling color of the shape to be transparent. The <stroke\/><\/code> element defines your border while the <corners\/><\/code> element makes it round.<\/p>\n
As a final treat, if you combine things, you can also make a fancy header using shapes:<\/p>\n
\"header-shape-gradient\"<\/a><\/p>\n
The following code defines the Shape XML (notice the left padding value, which is used for indenting):<\/p>\n
\n<?xml version="1.0" encoding="UTF-8" ?>\n<shape xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android" android:shape="rectangle">\n    <solid android:color="#AA212121" \/>\n    <gradient android:angle="-90"\n    \tandroid:startColor="#447F7F7F"\n    \tandroid:endColor="#007F7F7F" \/>\n    <stroke android:width="1dp" android:color="#447F7F7F" \/>\n    <padding android:left="48dp" android:top="8dp"\n             android:right="8dp" android:bottom="8dp" \/>\n<\/shape>\n<\/pre>\n
The following code defines the TextView<\/code> XML (as always, the shape is registered in android:background<\/code> attribute):<\/p>\n
\n<TextView\n    android:text="What"\n    android:textAppearance="?android:attr\/textAppearanceLarge"\n    android:layout_width="fill_parent"\n    android:layout_height="wrap_content"\n    android:background="@drawable\/header" \/>\n<\/pre>\n
Now go add a bit of “woowoo” to your app!\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Android supports all sorts of “drawable” objects (the Bitmap drawable, which can contain images in formats like PNG and JPG, is one example). The one we are going to talk about today is so-called Shape drawable. Shape drawables are defined with a simple XML syntax and stored in the drawable folder of an Android solution. […]<\/p>\n","protected":false},"author":1925,"featured_media":39167,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,4],"class_list":["post-3323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":"
Android supports all sorts of “drawable” objects (the Bitmap drawable, which can contain images in formats like PNG and JPG, is one example). The one we are going to talk about today is so-called Shape drawable. Shape drawables are defined with a simple XML syntax and stored in the drawable folder of an Android solution. […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1925"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=3323"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3323\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=3323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=3323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=3323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}