Android - ImageView overlay another ImageView

Question

I would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:

I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.

EDIT:

Sorry, here is my layout xml code

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginBottom="32sp" >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_person_black"
            android:adjustViewBounds="true"
            android:id="@+id/image_view_product" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/image_view_product"
            android:layout_centerHorizontal="true"
            android:background="@drawable/image_view_circle"
            android:src="@drawable/ic_circle" />

</RelativeLayout>

See [Android: Placing ImageView on overlap between layouts](http://stackoverflow.com/questions/25127468/android-placing-imageview-on-overlap-between-layouts) post — ρяσѕρєя K, Nov 23 '15 at 05:47

Shubhank Gupta · Answer 1 · 2017-08-09T19:38:13.250

I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.

<android.support.design.widget.CoordinatorLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/viewA"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/subject"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Thi"
            android:textColor="@android:color/white"
            android:textSize="17sp"
            />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/viewB"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Thi"
            android:textColor="@android:color/black"
            android:textSize="17sp"
            />
    </LinearLayout>

 </LinearLayout>

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/plus"
    app:layout_anchor="@+id/viewA"
    app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

Alternate way Try this

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    // this is your first layout to put the big image
    // use src or backgroud image as per requirement

    <LinearLayout
        android:background="@color/red_error"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>

   // this is your bottom layout
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>
</LinearLayout>

// This is the imageview which overlay the first LinearLayout 
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/success"
    android:adjustViewBounds="true"
    android:layout_gravity="center"/>
</FrameLayout>

its look like this

found one more solution for that (Edit) if your big image size is fixed height you can try this

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

<RelativeLayout
    android:id="@+id/layoutTop"
    android:background="@color/red_error"
    android:layout_width="match_parent"
    android:layout_height="200dp" >
</RelativeLayout>

<RelativeLayout
    android:id="@+id/layoutBottom"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/layoutTop" >
</RelativeLayout>

<ImageView
    android:id="@+id/overlapImage"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_above="@id/layoutBottom"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="-20dp" 
    android:adjustViewBounds="true"
   android:src="@drawable/testimage" />

 </RelativeLayout>

Refernce :- Android: Placing ImageView on overlap between layouts

Hope this will help.Good Luck

Thank you so much now I can create advanced complex things because of this — Pulkit, Aug 09 '17 at 12:01
@Pulkit Thanks for the comment. I try to improve that answer using CoordinatorLayout. I updated the answer may be its help you. — Shubhank Gupta, Aug 09 '17 at 19:42

score 2 · Answer 2 · answered Nov 23 '15 at 06:14

Try out this way: Just change layout_width and layout_height according to your need.

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

    <View
        android:id="@+id/viewOne"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#126989" />

    <View
        android:id="@+id/viewTwo"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_below="@+id/viewOne"
        android:background="#547866" />

    <View
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignBottom="@+id/viewTwo"
        android:layout_centerHorizontal="true"
        android:background="#ff7800"
        android:layout_marginBottom="35dp" />

</RelativeLayout>

It will look like this:

score 2 · Answer 3 · answered Dec 13 '17 at 07:53

I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below

<android.support.constraint.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:id="@+id/parentLayout">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_person_black"
        android:adjustViewBounds="true"
        android:id="@+id/image_view_product"/>

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintTop_toBottomOf="@+id/image_view_product"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignBottom="@id/image_view_product"
        android:layout_centerHorizontal="true"
        android:background="@drawable/circle"
        android:src="@drawable/ic_add_circle_green_24dp"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

score 1 · Answer 4 · answered Nov 23 '15 at 05:57

1

Use layout_marginTop = -20dp ( Half of your image size ). It will go up.

android:layout_marginTop="-20dp"

answered Nov 23 '15 at 05:57

Zahidul Islam

3,180
1
25
35

Having margin would make the layout less consistent on different screen devices. – cafebabe1991 Nov 23 '15 at 06:05
how? can you explain ? – Zahidul Islam Nov 23 '15 at 06:07
Please read this discussion https://groups.google.com/forum/#!topic/android-developers/2vfHxC33jtI – cafebabe1991 Nov 23 '15 at 06:10
The upper image(fan image) must have height. So,when the bottom refresh image go up half of it's size , then it will do the same for every different screen. I actually don't understand what's the problem here !! – Zahidul Islam Nov 23 '15 at 06:18

score 1 · Answer 5 · answered Nov 23 '15 at 06:05

1

put both the image in Relative layout first define the image you want to put behind the green circle than define the green circle as

android:layout_alignBottom="@+id/Image1"

Than adjust the position by giving margin to the green circle image.

answered Nov 23 '15 at 06:05

santoXme

802
5
20

score 0 · Answer 6 · answered Nov 23 '15 at 06:02

I recommend you to use a framelayout with these two images.

with the refresh imageview at the bottom and the table fan at the top.

Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.

And do the set the gravity of the refresh icon to be bottom|center to make it look this way.

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

   <ImageView 
      android:src="@drawable/ic_fan"
      android:scaleType="centerCrop"
      android:layout_height="wrap_content"
      android:layout_width="match_parent"/>

   <ImageView
            android:src="@drawable/ic_refresh"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:gravity="center|bottom"/>
</FrameLayout>

score 0 · Answer 7 · answered Nov 23 '15 at 06:36

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >

<ImageView
android:id="@+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="@+id/image_view_product" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="@+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="@drawable/image_view_circle"
android:src="@drawable/ic_circle" />

I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.

I did not run this code so if you face any issues just let me know i hope this works well for you..

Stephen · Answer 8 · 2016-08-17T09:02:05.700

Screenshot:

activity_main.xml:

   <RelativeLayout
            android:id="@+id/rl_image"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:contentDescription="null"
                android:scaleType="fitXY"
                android:src="@drawable/album9" />


            <ImageView
                android:id="@+id/imageView_round"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_alignParentBottom="true"
                 android:layout_centerHorizontal="true"
                android:src="@drawable/user_profile" />

        </RelativeLayout>

Android - ImageView overlay another ImageView

8 Answers8

Linked