Place image's over image

Question

Im working on an android app were you can setup your own Ring.

Now I want to give the user a preview of the ring, when they selected multiple rings.

Here a preview of how it should look like

The setup of how i thought to make it is this:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="5dp">
        <ImageView
            android:id="@+id/generator_ring_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#e7e7e7"/>
        <FrameLayout
            android:id="@+id/generator_ring_addon_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </FrameLayout>
    </FrameLayout>

I'm going to add the addon rings programmatically by just creating a new ImageView in the code.

Now the hard part of this is to place the image over the other ring, and have the view the same on every screen size..

Is ther anybody who can help me getting the correct code for placing the image on the correct position on every screen size?

thanks for reading

EDIT:

the moment I am selecting the addons rings the Base Rings is already visible, so I can get the height of the image

Answer 1

User Paint API: https://developer.android.com/reference/android/graphics/Paint.html https://developer.android.com/reference/android/graphics/Canvas.html Like that you can add whatever pictures you want, programatically, move them, even create animations if you want. Also you will have just a view, which contains the canvas. So no need to have convoluted FrameLayouts into FrameLayouts. Example on how to draw images on a canvas. draw object/image on canvas

Answer 2

Using canvas you can get (x,y) coordinates of the ring.

First create canvas with ring image and than use canvas.draw() to draw another image on base image.