Custom Bar Layout with Gradient


Image Hosted by ImageShack.us
Image Hosted by ImageShack.us

bar_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        style="@style/BarIconBack"
        android:drawableRight="@drawable/back_press" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/button1"
        android:text="Home"
        android:textColor="@color/white"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

gradient.xml

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

    <item>
        <shape>
            <solid android:color="#B00E0B" />
        </shape>
    </item>
    <item android:bottom="25dp">
        <shape>
            <gradient
                android:angle="270.0"
                android:endColor="#C71F18"
                android:startColor="#C71F18" />
        </shape>
    </item>

</layer-list>

style.xml

<style name="BarIconBack">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">0.3</item>
        <item name="android:layout_alignParentTop">true</item>
        <item name="android:layout_alignParentLeft">true</item>
        <item name="android:drawablePadding">-4dp</item>
        <item name="android:drawableLeft">@drawable/arrow_back</item>
        <item name="android:background">@null</item>
    </style>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s