Gradient styles

Andrew picture Andrew · Aug 10, 2010 · Viewed 13.1k times · Source

In my Android application I've hidden the default title bar, introduced a TabView and added my own titlebar under that TabView's tabs. At the moment, I'm using the ?android:attr/windowTitleStyle style which makes my new titlebar look gray and gradient. It looks pretty good, but my screens are looking pretty grayscale. I'd like to spice things up a bit by making this titlebar a different color gradient.

What am I looking at here? Creating my own image and using it? The ?android:attr/windowTitleStyle style seems to expand depending on the height of your custom titlebar; so I'm not sure it's actually a single image.

I've attempted to throw a LinearLayout over it with a bit of translucency (ex: making the color #800000FF), but the gradient style I have behind this LinearLayout disappears.

Thanks for your help

Update:

Per my answer down below, I've figured out that I can create an XML file that defines a gradient and use that. It works fine inside a LinearLayout (titlebar_gradient) I have on my layout. However, it is not working on the outer-most LinearLayout (background_gradient). Could someone tell me why? As I understand it, the ListView should be transparent...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/background_gradient"
 >
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="47dip"
  android:background="@drawable/titlebar_gradient"
  android:gravity="center">
  <TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="Item"
   style="?android:attr/windowTitleStyle"
   android:paddingLeft="5dip"
   android:maxLines="1"
   android:ellipsize="end" />
 </LinearLayout>
    <ListView
     android:id="@+id/android:list"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
  android:paddingTop="10dip"
  android:clickable="false"
    />
 <TextView
     android:id="@+id/android:empty"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
    />
</LinearLayout>

Answer

Andrew picture Andrew · Aug 10, 2010

I understand my problem now.

I've created an XML file in my drawables folder that looks like this

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
       <gradient
        android:startColor="#00CC66"
        android:endColor="#009966"
        android:angle="270"/>
    /shape>

In my toolbar, I set the background to this drawable.