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

score 0 · Accepted Answer · edited May 23 '17 at 12:34

0

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

edited May 23 '17 at 12:34

Community

1
1

answered May 17 '17 at 09:47

rosu alin

5,674
11
69
150

I've just created the canvas and now im drawing the addon ring over the base ring. But the top margin on the draw function will present it different on every phone. Do you have any idea how I can make this the same on every phone? – Joey K May 17 '17 at 10:11
Well you can get the (x,y) coordinates of your ring picture. Having that, you can use it to set your other bitmaps on the ring. bitmap2 x = bitmap1x + value for x where on the first pic you want it – rosu alin May 17 '17 at 10:13

Mohit Gandhi · Answer 2 · 2017-05-25T06:44:49.907

0

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.

edited May 25 '17 at 06:44

answered May 17 '17 at 10:00

Mohit Gandhi

19
5

Place image's over image

2 Answers2