set an imageview over another imageview - xml

Question

I have two imageviews that I would like to set second imageview over first image like below image :

enter image description here

first image:

enter image description here

second image (moment) :

enter image description here

how can I do ?

I wrote below codes, but it does not works fine :

    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"       
        android:scaleType="fitXY"
        android:src="@drawable/ic_moment"
        />

    <ImageView
         android:id="@+id/img_view_item_main_list"
         android:layout_width="fill_parent"
         android:layout_height="220dp"
         android:scaleType="fitXY"       
         android:src="@drawable/testtesttest" />

http://stackoverflow.com/questions/11468146/android-imageview-over-imageview — Top Cat, Nov 04 '14 at 07:26
Please check this link it might help You [Link][1] [1]: http://stackoverflow.com/questions/11959841/how-to-place-an-imageview-on-top-of-another-imageview-in-android — amit kumar, Nov 04 '14 at 07:26

Aun · Accepted Answer · 2014-11-04T07:28:00.527

7

Use Framelayout or use merge tag

eg:

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

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/t" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</FrameLayout>

second image comes on the top

edited Nov 04 '14 at 07:28

answered Nov 04 '14 at 07:26

Aun

1,883
1
17
26

If you want "Special" image on the bottom right, just add `android:layout_gravity="bottom|right"` – paakjis Apr 28 '17 at 10:30

score 3 · Answer 2 · edited May 23 '17 at 12:07

try to do something like as follows

<RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@color/white" >

    <ImageView
        android:id="@+id/inside_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:layout_marginTop="5dip"
        android:src="@drawable/frame" />

      <ImageView
         android:id="@+id/outside_imageview"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignTop="@id/inside_imageview"
         android:layout_alignBottom="@id/inside_imageview"
         android:layout_alignLeft="@id/inside_imageview"
         android:layout_alignRight="@id/inside_imageview"            
         android:scaleType="fitXY" />
  </RelativeLayout>

Also you can visit how to place an image over another one on android app?

score 2 · Answer 3 · answered Nov 04 '14 at 07:27

Try this way,hope this will help you to solve your problem.

Take FrameLayout as parent and set top image layout gravity top and let.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/ic_moment" />

    <ImageView
        android:id="@+id/img_view_item_main_list"
        android:layout_width="wrap_content"
        android:layout_height="220dp"
        android:scaleType="fitXY"
        android:layout_gravity="top|left"
        android:src="@drawable/testtesttest" />

</FrameLayout>

score 2 · Answer 4 · answered Nov 04 '14 at 07:29

try like this,

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_launcher" >

    <ImageView
        android:id="@+id/img_view_item_main_list"
        android:layout_width="fill_parent"
        android:layout_height="220dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:layout_gravity="top|left"
        android:src="@drawable/ic_launcher" />

</FrameLayout>

hope it will help you

amit kumar · Answer 5 · 2014-11-04T08:33:50.463

Use it like this.

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

<ImageView  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:scaleType="center"
    android:src="@drawable/golden_gate" />

   <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="20dip"
       android:layout_gravity="center_horizontal|bottom"
       android:padding="12dip" 
       android:src="@drawable/logo"/>

</FrameLayout>

score 0 · Answer 6 · answered Nov 04 '14 at 07:33

You can use something like below layout

<RelativeLayout 
android:layout_width="match_parent" // This you can change as per your requirement
android:layout_height="match_parent" // This you can change as per your requirement
>

<ImageView
     android:id="@+id/img_view_item_main_list"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:scaleType="fitXY"       
     android:src="@drawable/testtesttest"
     android:layout_centerInParent="true"
     />

</RelativeLayout>

Hope this will be helpful to you.

score 0 · Answer 7 · answered Nov 04 '14 at 14:22

You can also use layer-list as drawable and make it a background of your image view.

my_image.xml >save it in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:drawable="your_image_1"
    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension" />
<item
    android:drawable="your_image_2"
    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension" />
</layer-list>

and in your image view.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:layout_gravity="top|left"
    android:drawable="@drawable/my_image"/>

in this way you can add several images to make it more interesting. Just make sure that is in png format and set the background of image as transparent.

set an imageview over another imageview - xml

7 Answers7