banded background with two colors?

Question

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

enter image description here

I am currently using the following code :

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


    <item>
        <shape>
            <gradient android:endColor="#000000" android:startColor="#696969"
                android:centerColor="#696969" android:angle="270" />
            <stroke android:color="#696969" />
            <padding android:left="2dp" android:top="3dp" android:right="2dp"
                android:bottom="3dp" />
        </shape>
    </item>
</selector>

But the output looks like this ... :

enter image description here

How to get this ,two colored background ? Please suggest.. Thanks

Check this.. http://stackoverflow.com/a/9393867/1188978 – SkyWalker Dec 03 '13 at 12:11 — SkyWalker, Dec 03 '13 at 12:11

score 27 · Accepted Answer · answered Jan 04 '12 at 13:40

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.

@user658042 Excellet solution. Can we have circular corners along with this ? I tried adding but its not rendering properly. — madhuri H R, Jan 11 '21 at 07:13

score 6 · Answer 2 · edited Aug 24 '17 at 13:44

6

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.

edited Aug 24 '17 at 13:44

Sufian

6,405
16
66
120

answered Jan 04 '12 at 13:01

NikhilReddy

6,904
11
38
58

45 angle? That does not create what nibha is asking for. – TryTryAgain Jan 04 '12 at 13:05
http://www.dibbus.com/2011/02/gradient-buttons-for-android/ go through this code it may help u.... – NikhilReddy Jan 04 '12 at 13:21

score 1 · Answer 3 · answered Jan 04 '12 at 13:00

1

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

answered Jan 04 '12 at 13:00

François BOURLIEUX

656
8
22

thanks but i don't want to use images...i m looking for some programmatic way...:) – Nibha Jain Jan 04 '12 at 13:03

score 1 · Answer 4 · edited May 23 '17 at 12:32

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.

score 0 · Answer 5 · answered Jan 04 '12 at 13:00

0

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

answered Jan 04 '12 at 13:00

Davos555

1,974
15
23

banded background with two colors?

5 Answers5

Linked

Related