What is a correct way to place image over ImageView?

Question

I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:

book_template

I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:

<FrameLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight=".5" >

  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/book_frame" />
  <ImageView
    android:id="@+id/previewImage"
    android:layout_width="83dp"
    android:layout_height="83dp"
    android:layout_gravity="center_vertical|center_horizontal"
    android:src="@drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>

The result in layout builder look exactly like I want it to be:

emulator_result

On real phone it is different:

phone_result

I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly? Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You have your answer in your question.

What happening in your case image size matter for different screen resolution.

Hard-coded things always gives weird result in your case android:layout_width="83dp" android:layout_height="83dp" this piece of code.

Check this link this will guide you to manage drawables for different screens.

and here is another link

edited May 23 '17 at 12:29

Community

1
1

answered Jul 11 '13 at 15:23

Gru

2,686
21
29

score 0 · Accepted Answer · answered Jul 15 '13 at 21:37

So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo. The layout become like this:

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".5" >

            <ImageView
                android:id="@+id/bookFrame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:src="@drawable/book_frame" />

            <ImageView
                android:id="@+id/previewImage"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:layout_gravity="center_vertical|center_horizontal"
                android:padding="1dp"
                android:scaleType="centerCrop"
                android:src="@drawable/abs__ab_bottom_solid_dark_holo" />

            <ImageView
                android:id="@+id/previewBorder"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:layout_gravity="center_vertical|center_horizontal"
                android:src="@drawable/preview_border" />
        </FrameLayout>

What is a correct way to place image over ImageView?

2 Answers2