XML Drawable consisting of two images

Question

I am trying to create a XML Drawable which I would use instead of the default marker in OSMDroid.
This is what it should look like in the end:

The black part will be loaded while creating the marker, as every marker will have a different image there. (these will be loaded from a Database if that´s important)

I tried to create a XML Drawable, and it kinda works, but the black part seems to be scaled to fit the image, thus making the marker just a big black square. (without the black part it works fine)

My current XML:

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

    <item android:drawable="@drawable/marker"/>         // main

    <item android:drawable="@drawable/markerfill" />    // black part

</layer-list>

I tried using a scale for the second item, but as I looked into scales, it looked like I can´t use scales for this.

What I want:
I load the black box into the "main" part, resize it if necessary (while keeping the proportions) and change it from Java-Code. I will be using this marker for OSMDroid.

What would be the best approach for this?

Answer 1

What I want: I load the black box into the "main" part, resize it if necessary (while keeping the proportions) and change it from Java-Code. I will be using this marker for OSMDroid.

If the first layer image will not be resized/scaled when used(I don't know how OSMDroid manages that marker) then you could use the current approach of a LayerDrawable and "place" the dynamic image with LayerDrawable.setLayerInset() :

public Drawable makeBasicMarker(Bitmap bitmap) {
        Drawable[] layers = new Drawable[2];
        layers[0] = new BitmapDrawable(getResources(),
                BitmapFactory.decodeResource(getResources(), R.drawable.marker));
        layers[1] = new BitmapDrawable(getResources(), bitmap);
        LayerDrawable ld = new LayerDrawable(layers);
        ld.setLayerInset(1, xx, xx, xx, xx); // xx would be the values needed so bitmap ends in the upper part of the image
        return ld;
    }

If the image is scaled then you need to make your own Drawable and draw the parts yourself placing them appropriately.

Answer 2

give it a try like this: 1.define a view with the first drawable; 2. draw the second item with drawBitmap() method 3. call the postInvalidate() method to redraw.

Answer 3

drawing mBar on mBG, referring to those:

void onDraw(final Canvas canvas) {

super.onDraw(canvas);

float zoomX = mWidth / (float) mBG.getWidth();
float zoomY = mHeight / (float) mBG.getHeight();

canvas.drawBitmap(mBG, 0, 0, null);

canvas.drawBitmap(mBG, new Rect(0, 0, mBG.getWidth(), mBG.getHeight()),
    new RectF(0, 0, mWidth, mHeight), null);

....
canvas.drawBitmap(mBar, new Rect(0, 0, (int) w, (int) h), new RectF(
    X_LOCATION * zoomX, Y_LOCATION * zoomY, (X_LOCATION + w)
        * zoomX, (Y_LOCATION + h) * zoomY), null);

}