Android:Put an image over another image

Question

I have three ImageViews and i want 1 ImageView to be in the background and the other 2 images should be laying on that one. I cannot use any other view because the image is downloaded in the image form that cannot be set as Linear or Relative layout background.

FIRST IMAGE

THIS IS THE SECOND IMAGE WHAT I WANT ACTUALLY

Solution 1

You can try as below xml layout...

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/ic_launcher"
        android:scaleType="fitXY" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="100dip"
        android:background="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="100dip"
        android:background="@drawable/ic_launcher" />

</FrameLayout>

Solution 2

This is the easiest way I've found to merge more than one image at one. This is very helpful if we want share merged file.

Resources r = getResources();    
Drawable[] layers = new Drawable[3];
layers[0] = r.getDrawable(R.drawable.image3);
layers[1] = r.getDrawable(R.drawable.image1);
layers[2] = r.getDrawable(R.drawable.image2);

LayerDrawable layerDrawable= new LayerDrawable(layers);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
// align image1 over image3
layerDrawable.setLayerGravity(1, Gravity.TOP);
layerDrawable.setLayerInsetTop(1, 250);

// align image2 over image3
layerDrawable.setLayerGravity(2, Gravity.BOTTOM);
layerDrawable.setLayerInsetBottom(2, 250);
}
 // both image1 & 2 placed over image3 in layerDrawable.
imageView.setImageDrawable(layerDrawable);

Hope this will work.

Solution 3

You can use like this :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</FrameLayout>

Solution 4

To overlap views or block a display area for a single item Frame layout(here) can be used.

you can use

     <FrameLayout 
        android:layout_width="..."
        android:layout_height="..."
        android:background="Image1"
        <ImageView
            android:layout_width="..."
            android:layout_height="..."
            android:background="image2">
         <ImageView
            android:layout_width="..."
            android:layout_height="..."
            android:background="image3">   
     </FrameLayout>

View more solutions