Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize bitmap inside a drawable layer-list

Currently I'm developing a Android application. I want to make a text (a header) with a background that looks like this:

 _______
/______/

I have the following code:

<?xml version="1.0" encoding="UTF-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>    
            <gradient
              android:startColor="@color/jaarkleur"
              android:centerColor="@color/jaarkleur"
              android:endColor="#E66C2C00"
              android:angle="0" />
            <stroke android:width="1dp"
            android:color="#ff000000"
            />       
        </shape>
    </item>
    <item>
        <bitmap android:src="@drawable/overlay_left" android:gravity="left"  />
    </item>
    <item>
        <bitmap android:src="@drawable/overlay_right" android:gravity="right"  />
    </item>

</layer-list>

So I made to images so with a transparant triangle which are placed at both ends.

This works fine for headers with only one line, but when a header takes up two lines it looks like this:

http://i.imgur.com/lDQGo.png

So my question is: Is it possible to resize both images so looks correctly? Thank you!

like image 412
user1255553 Avatar asked Mar 07 '12 19:03

user1255553


2 Answers

I solved it using two (half-transparant) images which represent the corners.

The XML looks like this:

<?xml version="1.0" encoding="UTF-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
                <shape>    
                    <gradient
                      android:startColor="@color/jaarkleur"
                      android:centerColor="@color/jaarkleur"
                      android:endColor="#E66C2C00"
                      android:angle="0" />
                    <stroke android:width="1dp"
            android:color="#ff000000"
            />       
                </shape>
        </item>
        <item>
            <bitmap android:src="@drawable/overlay_left" android:gravity="left|top"  />
        </item>
        <item>
            <bitmap android:src="@drawable/overlay_right" android:gravity="right|bottom" />
        </item>        
</layer-list>
like image 177
user1255553 Avatar answered Nov 08 '22 12:11

user1255553


Instead of using a layer-list with gradient / border stroke and a custom image, consider using a NinePatchDrawable.

There is also a handy 9-patch creater that comes with the android SDK.

like image 27
John Leehey Avatar answered Nov 08 '22 13:11

John Leehey