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:
So my question is: Is it possible to resize both images so looks correctly? Thank you!
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With