Friday, May 13, 2011

Android - a rounded corner background panel

This example demonstrates how you can create an image by xml declaration. You will use the <shape> xml object and this file will need to be put in the image directories. The following example shows how to build a red oval panel and a white box panel.


drawable-mdpi/white_box.xml - white rounded corner box

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="5px"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

drawable-mdpi/red_box.xml - red oval shaped box

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000"/>
    <corners android:radius="20px"/>
    <padding android:left="5dp" android:top="0dp" android:right="5dp" android:bottom="0dp" />
</shape>

res/values/styles.xml


We will create a customStyle to use these panels.


<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="customStyle">
        <item name="android:textColor">#ffffff</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">12dip</item>
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/red_box</item>
  </style>
</resources>

Using the white box panel

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:id="@+id/tv" android:layout_width="wrap_content" style="@style/customStyle"
android:layout_height="wrap_content" android:layout_margin="50dip" android:text="demo text"/>
</RelativeLayout>

No comments:

Post a Comment