Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preventing shapes scaling in a LayeredList without using Bitmap

Trying to use LayerDrawable (defined in XML as layer-list) to layer several shape drawables onto one another; to be used as a background for a layout.

The Android guide (for LayerList) says:

All drawable items are scaled to fit the size of the containing View, by default. Thus, placing your images in a layer list at different positions might increase the size of the View and some images scale as appropriate. To avoid scaling items in the list, use a <bitmap> element inside the <item> element to specify the drawable and define the gravity to something that does not scale, such as "center".

I don't want my shapes to scale, but I'm unsure how to wrap them in bitmap tags correctly: it produces an error if I do it as follows:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap
            android:src="@drawable/layer_one"
            android:gravity="center" />
    </item>
    <item>
        <bitmap
            android:src="@drawable/layer_two"
            android:gravity="center" />
    </item>
    <item>
        <bitmap
            android:src="@drawable/layer_three"
            android:gravity="center" />
    </item>
    <item>
        <bitmap
            android:src="@drawable/layer_four"
            android:gravity="center" />
    </item>
</layer-list>

Complaining:

Binary XML file line #25: <bitmap> requires a valid src attribute

An example of one of the drawables, e.g. res/drawable/layer_one.xml:

<?xml version="1.0" encoding="utf-8"?>

<!--  res/drawable/layer_one.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" />
</shape>

The example used on the Android site uses images as drawables, not XML-defined shapes (not to say that my error is specific to these, and that I haven't made a silly mistake somewhere). Any clues appreciated, thanks.


Using drawable resources
This question's answer states that you cannot use an XML drawable as the src for a Bitmap. I've amended the title of the question, to now ask how you can prevent shapes from scaling (thereby resizing the container view) without using bitmap, or am I forced to use actual image resources?


Added an image of the desired outcome - the ability to have a background with a regular rectangle filled shape or whatever, and then layered on top of this, more shape drawables (here there are 3 ellipses). On the left is ideal, where top and left offsets are allowed, and on the right is fine, where all shapes just go to a default position:

enter image description here

like image 315
ataulm Avatar asked Apr 07 '12 15:04

ataulm


1 Answers

Yes, (as per my previous answer) you cant use xml drawable for bitmaps. It is fine to build, but when you run the app, it crashes.

Regarding the statement use a <bitmap> element inside the <item> element means that you can define further shapes in your layer-list and that's what it is for. Though you can also define Bitmaps but then your bitmaps should have a src value referring to solid image (not xml).

What you can do is to insert the layer_one, layer_two and other layer's xml into your layer_list xml. For example:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape
            android:shape="rectangle" >
            <solid android:color="#FFFFFF" />

            <corners
                android:bottomLeftRadius="15dp"
                android:bottomRightRadius="15dp"
                android:topLeftRadius="15dp"
                android:topRightRadius="15dp" />
        </shape>
    </item>

    <!-- and so on with your other shapes -->

</layer-list>

Hope it should work :)

like image 185
waqaslam Avatar answered Oct 04 '22 22:10

waqaslam