ImageView with rounded corners via another Image as a background

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

One easy solution would be to use just one ImageView with android:background for your image2, which you say is the container, andr android:src for image1, which is the actual image :

<ImageView
    ...
    android:background="@drawable/image2"
    android:src="@drawable/image1"
    android:padding="2dp" />

Just add a padding, to specify how much empty space you want to leave between the "frame" and your actual "picture".

Answer 2

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>

Answer 3

Use ImageButton.. Set Background as Image1 and Image src as Image2

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/image2"
            android:src="@drawable/image1" />