How to place an imageview on top of another imageview in android

Question

This is my layout which i tried so far without any success

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

 <LinearLayout 
    android:id="@+id/lltest" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_centerHorizontal="true">

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

</LinearLayout>

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

What i exactly want is to have my outside_imageview on top of inside_imageview with the exact height and width... How to do it through layout?

have you tried adding layout_alignLeft="@id/inside_imageview" in addition to the alignTop? — CSmith, Aug 14 '12 at 20:04
The issue was he has the inside_imageView inside a LinearLayout so the attribute `layout_alignTop` can't see the reference ID to `inside_imageView`. `outside_imageview` would align to the LinearLayout if the ID references was `lltest` instead. — DeeV, Aug 14 '12 at 20:18

DeeV · Accepted Answer · 2012-08-14T20:18:43.867

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

The layout_align[Top|Bottom|Left|Right] attribute in RelativeLayout is used to align views based on their respective x and y values within the margin. The second ImageView will now be aligned to the top, bottom, left, and right of the first ImageView based on the margins. Padding is ignored in the alignment.

Hmmm... Actually I have two more imageviews along with inner_imageview... so i thought of putting them in a seperate linearlayout... The inner one i need to do a horizontal orientation and the outer one i want a vertical... So please suggest me in this — coderslay, Aug 14 '12 at 20:28
That complicates things a bit more. You can't reference views that are children in other views. They only accept references to children in the same level. If `inside_imageview` and `outside_imageview` are the same width and height, then you merely need to put them both in two separate `Linearlayouts` and align two `LinearLayouts` by the top and left. If the dimensions are widely different, then you may have to use `layout_below` for one and `layout_toRightOf` for the other. — DeeV, Aug 14 '12 at 20:38

Francesco Vadicamo · Answer 2 · 2012-08-14T21:29:30.017

21

FrameLayout is what you need. You can simply merge the parent layout that is a FrameLayout too. Take a look at the Android Developers Blog: http://android-developers.blogspot.it/2009/03/android-layout-tricks-3-optimize-by.html

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center">

    <ImageView
        android:id="@+id/outside_imageview" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"/>

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

edited Aug 14 '12 at 21:29

answered Aug 14 '12 at 20:13

Francesco Vadicamo

5,522
35
29

3

sadly the guy that asked the question, doesn't understands and doesn't even wants to understand what frame layout can do and downvoted us all. upvoted u two guys :) – con_9 Aug 23 '12 at 06:17
This even reduces the view hierarchy by one level :woot: – Dheeraj Bhaskar Jan 04 '13 at 07:00
Nice solution. The FrameLayout is certainly the way to go. – nurnachman Jun 29 '15 at 12:25
@Francesco Vadicamo Could I please ask, I am having rendering problems. An exception is being raised which suggests that must be the root element. I don't need all elements to be on top of each other. I just need the 2 images to be neseted. Currently, the root element is a vertical LinearLayout and I would like to maintain the ordering of the child elements. What should I do? – iOSAndroidWindowsMobileAppsDev Oct 19 '16 at 10:57
@Francesco Vadicamo I tried including a different layout with merge as the root element and (show_in activity_main) but the layout is not being included – iOSAndroidWindowsMobileAppsDev Oct 19 '16 at 11:44
@JqueryNinja `` is used when you need a `FrameLayout` so you want to reuse the root `FrameLayout` that Android anyhow puts on top of the hierarchy; if you need a `LinearLayout`, simply add it as the root element of your layout, you don't need to use `` – Francesco Vadicamo Oct 25 '16 at 08:14

score 6 · Answer 3 · answered Aug 14 '12 at 20:04

6

You should try a FrameLayout. Inside a FrameLayout every Child is on top of each other.

answered Aug 14 '12 at 20:04

Michele

6,126
2
41
45

only 1 image is being shown on the device and 2 images, one on top of the other are being shown correctly in the design view of the layout – iOSAndroidWindowsMobileAppsDev Oct 19 '16 at 11:46

Aditya Vyas-Lakhan · Answer 4 · 2017-01-23T12:02:37.297

3

I tried this way and it worked for me,hope it helps

 <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5dip">
<ImageView
    android:id="@+id/image_first"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/imga"/>
<ImageView
    android:id="@+id/imageview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/image"/>
</FrameLayout>

edited Jan 23 '17 at 12:02

answered Sep 01 '16 at 09:05

Aditya Vyas-Lakhan

13,409
16
61
96

only 1 image is being shown on the device and 2 images, one on top of the other are being shown correctly in the design view of the layout – iOSAndroidWindowsMobileAppsDev Oct 19 '16 at 11:47
1

so whts the issue – Aditya Vyas-Lakhan Oct 19 '16 at 11:50

score 3 · Answer 5 · answered Oct 25 '19 at 14:26

I use Elevation only... 0=floor or basement ... lol 1=floor2 10=floor10 the top top

    <ImageView
          android:id="@+id/blog_user_image_gp"
          android:layout_width="match_parent"
          android:layout_height="200dp"
          android:layout_marginTop="70dp"
          android:src="@drawable/avatar"
          android:scaleType="fitXY"
          android:foregroundGravity="center"
          android:elevation="10dp"
          />
  <android.support.v7.widget.RecyclerView
        android:id="@+id/users_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:elevation="1dp"
        android:scrollbars="vertical" />

score 1 · Answer 6 · answered Mar 15 '17 at 06:57

                <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="@dimen/_15dp">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:padding="@dimen/_10dp"
                    android:layout_marginTop="@dimen/_50dp"
                    android:background="@drawable/white_background"
                   />
                <ImageView
                    android:layout_width="@dimen/_100dp"
                    android:layout_height="@dimen/_100dp"
                    android:background="@drawable/my_credit"
                    android:layout_marginTop="@dimen/_5dp"
                    android:layout_centerHorizontal="true"
                    />
            </RelativeLayout>

it places an imageview on the above of another imagview... there is no need to use any frame layout — Sunil, Mar 15 '17 at 07:39

score -1 · Answer 7 · answered Apr 15 '18 at 13:55

-1

Just add translation z and it will be on top, make sure the translation z is greater than the view you want to be on top of. Sorry for the late response.

answered Apr 15 '18 at 13:55

MicroRJ

175
11

How to place an imageview on top of another imageview in android

7 Answers7

Linked