Monday, April 22, 2013

Create a rounded border around a layout of an Android Activity

A rounded border can be easily created around a layout in an Android Activity. An example of how it looks like is shown in the screenshot below.


To define a rounded border drawable using the Android Development Toolkit, in Eclipse, the following steps can be done:

Create a new Android drawable XML file
  1. In the Package Explorer pane of Eclipse, right click on the drawable folder.

    A pop up menu appears.

  2. Choose New | Android XML File.

    The New Android XML File dialog box appears.


  3. In the File field, type in the name of the drawable XML file e.g. myborder.xml.
  4. In the Root Element list, choose shape. Click Finish.

    The file is created and the following code is displayed in Eclipse. 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

 
</shape>

Edit the drawable Android XML file
  1. In the Eclipse code editor, type in the following to define the rounded border shape.



    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <stroke 
    android:width="1dip" 
    android:color="@android:color/darker_gray" /> 
    <solid 
    android:color="@android:color/background_dark" /> 
    <padding 
    android:left="7dip" 
    android:top="7dip" 
    android:right="7dip" 
    android:bottom="7dip" /> 
    <corners 
    android:radius="6dip" /> 
    </shape>


  2. Save the code.

Using the drawable Android XML file in a layout

When editing the layout XML of an Activity, the newly created rounded border drawable can be referenced and used. For example, in the LinearLayout element, the android:background attribute can be set to the myborder drawable created previously, as shown in the code snippet below.



<LinearLayout 
android:orientation="vertical"
android:background="@drawable/border_rounded_corner"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="GPS Week"
/>
<RelativeLayout 
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content">

<kankan.wheel.widget.WheelView
android:id="@+id/digit4GpsWeek"
android:padding="0dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"            
/>
<kankan.wheel.widget.WheelView
android:id="@+id/digit3GpsWeek"
android:padding="0dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/digit4GpsWeek"
/>
<kankan.wheel.widget.WheelView
android:id="@+id/digit2GpsWeek"
android:padding="0dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/digit3GpsWeek"
/>
<kankan.wheel.widget.WheelView 
android:id="@+id/digit1GpsWeek"
android:padding="0dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/digit2GpsWeek"
/>
</RelativeLayout>
<!-- etc -->
</LinearLayout>

The corresponding resultant Activity may look like the screenshot below.

No comments: