Creating a drawable for an image

Question

I am working on an android application and we are trying to reduce the footprint of the application by replacing bitmap images with drawables.

I have a following image

enter image description here

I want to create the background of this card. I tried using shape drawable but it doesnt seem to have enough option to create the background.

When I used gradient the colors get intermixed. I actually want a clear separation between two colors. How to create this background without using an image?

create a custom Shape class and pass it to ShapeDrawable constructor — pskink, Apr 13 '15 at 07:43

score 1 · Accepted Answer · answered Apr 14 '15 at 00:20

You can use rotate and layer-list to get the effect totally in xml without any java code. The following is the example, but in order to let it display more elegantly, you have to re-calculate the height, width and pick a better angle to rotate.

debit_card.xml

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

<item android:left="10dp">
    <shape>
        <solid android:color="#ffff0000"></solid>
        <size
            android:width="100dp"
            android:height="50dp"></size>
    </shape>
</item>

<item>
    <rotate
        android:fromDegrees="-27"
        android:pivotX="100%"
        android:pivotY="0">

        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="50dp"></size>
            <solid android:color="#ff00ff00"></solid>
        </shape>
    </rotate>
</item>

</layer-list>

Then you can use the drawable above in a ImageView, the layout size properties must be wrap_content/wrap_content.

<FrameLayout     
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@drawable/debit_card" />
</FrameLayout>

The final effect will look like the picture following. enter image description here

Thank you! Exactly what I wanted. – Dhruv Jagetiya Apr 14 '15 at 05:29 — Dhruv Jagetiya, Apr 14 '15 at 05:29

score 0 · Answer 2 · edited Apr 13 '15 at 09:30

0

If you really want to draw a background like this then try VectorDrawable added in API 21. And use following code to draw the background

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:viewportHeight="25"
    android:viewportWidth="25"
    android:width="256dp" >

    <path
        android:fillColor="#ff006666"
        android:pathData="l 25,0
                        l -25,15z" />
    <path
        android:fillColor="#ff009999"
        android:pathData="m 25,0
                        l -25,15,
                        l 25,0z" />

</vector>

and this will be you result.

enter image description here

edited Apr 13 '15 at 09:30

nikis

11,166
2
35
45

answered Apr 13 '15 at 09:28

rajesh

199
1
11

Still there is no VectorDrawable in support library, please check [here](http://stackoverflow.com/questions/26548354/vectordrawable-is-it-available-somehow-to-pre-lollipop-versions-of-android) for more help. – rajesh Apr 14 '15 at 05:36

Creating a drawable for an image

2 Answers2