banded background with two colors?

Question

I am trying to create a bottom bar with the background like this :

I a

Answer 1

I found a solution for you, if you are willing to give up using XML to draw it...

Drawing from: Gradients and shadows on buttons

That's what you want! But different colors, size, and as a button...

Bitmap bmResult = Bitmap.createBitmap(buttonWidth, buttonHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmResult); 
    Paint paint = new Paint();
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0xFF284560, 0xFF284060, TileMode.MIRROR));
    canvas.drawPaint(paint);
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0x55FFFFFF, 0x22FFFFFF, TileMode.CLAMP));
    paint.setMaskFilter(new BlurMaskFilter(3, BlurMaskFilter.Blur.NORMAL));
    canvas.drawRect(0, 0, bmResult.getWidth(), bmResult.getHeight()/2, paint)

...changing the color, of course.

I'm not sure if you could use an XML Layout and reference this Java Button alone or you'll have to end up making your entire layout in Java as opposed to XML...that would be another question for the SO.

Hope that helps. Although, it may be my ignorance, but I would also recommend going the 9patch route.

P.S. I'm a totally new at Java and using bitmaps, so I'll post a fuller solution for your case if I figure it all out.

Answer 2

As others pointed out, a ninepatch would be ideal in this situation (and won't take much memory). Working around with XML is not optimal. Here is something you can try:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="20dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#ff0000" />
        </shape>
    </item>

    <item android:top="20dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#0000ff" />
        </shape>
    </item>
</layer-list>

in this case your view is considered beeing 40dp high

It's a layer list with two blocks in different colors. The problem with the XML approach is that you can't adjust the height of the blocks to a percentage (=50%). You have to use half of the actual view size in dp. Which means you have to adjust this drawable each time you change your view height/layout. A ninepatch would adjust to this automatically.

Answer 3

You can used a 9png image as background.
see http://developer.android.com/guide/developing/tools/draw9patch.html

edit :
You can follow this tutorial http://android10.org/index.php/articlesother/279-draw-9-patch-tutorial

Answer 4

You could just create an image of it and repeat it along the x coordinate.

Answer 5

Create gradient.xml in /res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFFFF"
        android:endColor="#00000000"/>    
</shape>

and in your main.xml layout file in /res/layout:

<?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/gradient">   
</LinearLayout>

You can specify the angle by replacing the android:angle value and start/end colour by replacing android:startColor and android:endColor.