Question

I have two images – 1)a rectangular one, displaying the actual content and 2)a white image with rounded transparent corners

Is it possible to place image 1 inside image 2, keeping its size but making it to be the same shape as 2?

Basically I want Image 2 be the container of image 1.

I’ve tried layer and inset drawables but all the time image 1 overlapped image 2.

Thanks in advance!

UPDATE 1:

Here’s my ImageView xml part:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="72dp"
android:orientation="horizontal">

    <ImageView
        android:id="@+id/avatar"
        android:src="@drawable/mainImg"
        android:background="@drawable/backgroundImg"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_gravity="center"
        android:contentDescription="@string/desc" />

</LinearLayout>

UPDATE 2:

Below is the link to three images
1) background
2) main image
3) expected result (with rounded corners)

ImageShack upload

Answer 1

I have had to deal with this issue with an app I recently made. Notice how, in the first and second screenshot, the thumbnails are all framed.

To accomplish this, I’m stacking the image and the frame on top of each other in a FrameLayout. First I layout the actual image (@id/thumbnail), followed by the frame (@id/frame).

Important things to note are that the thumbnail is using a scaleType of “fitXY”, and has a slight margin so the corners don’t stick out behind the frame’s rounded corners.

This really only works if your frame border is opaque, so you may have to make your frame edges the same color as your background.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/thumbnail_size"
    android:layout_height="@dimen/thumbnail_size"
    android:layout_margin="5dp"
    android:gravity="center"
    android:orientation="vertical"
     >

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_margin="4dp"
        android:scaleType="fitXY" />

    <ImageView
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/pixel_frame"
        android:scaleType="fitXY" />

</FrameLayout>