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

Why don't you use RelativeLayout to achieve that.. you can then put the imageview that contains the image first and on top of it you will put the frame image.. — Cata, Jun 21 '12 at 07:21

score 4 · Answer 1 · answered Jun 21 '12 at 07:29

4

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".

answered Jun 21 '12 at 07:29

Ovidiu Latcu

71,607
15
76
84

Unfortunately this hasn't helped as well as the answer below. With this, I am seeing my main image inside the background image with some white margins, while I am expecting background image to clip the main image by its shape. When I remove the padding, main image just overlaps background! – Nznoonee Jun 21 '12 at 07:55
I've updated my initial answer again with the link to three images. This will shed some light on what I expect. I know that this can be achieved via shape but unfortunately I can't use this approach – Nznoonee Jun 21 '12 at 08:37
in this case you should look at http://stackoverflow.com/questions/2459916/how-to-make-an-imageview-to-have-rounded-corners, because you will have to round the corners of your image. – Ovidiu Latcu Jun 21 '12 at 08:54

score 4 · Accepted Answer · answered Jun 21 '12 at 10:07

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>

score 3 · Answer 3 · answered Jun 21 '12 at 07:30

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" />

ImageView with rounded corners via another Image as a background

3 Answers3