Android imageview over another imageview

Question

I want an icon (ImageView) over another ImageView. When I tried, the icon is hiding behind the white image. In my code below, first image view is for the white box and another image view is for the icon.

<RelativeLayout
            android:layout_width="54dp"
            android:layout_height="54dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp">

            <ImageView
                android:id="@+id/button_menu"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentStart="true"
                android:padding="5dp"
                android:src="@drawable/ic_menu"
                android:background="@drawable/button_white_rounded"
                android:elevation="4dp"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:tint="@color/colorText"/>

            <ImageView
                android:id="@+id/warning_circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:src="@drawable/ic_warning_circle"/>
        </RelativeLayout>

I want the orange icon in screenshot over the white box. How can I bring it on the white box image?

You have `android:elevation="4dp"` on the first one, but no elevation on the second. — Mike M., Nov 20 '19 at 05:01
put warning icon imageview over button menu i mean in xml put first view 'warning icon' and then ' button menu'. change only place of both imageview. check my answer — niceumang, Nov 20 '19 at 05:04
Do you want it to be done by `RelativeLayout` only? I'm having solution using `ConstraintLayout`. — Jeel Vankhede, Nov 20 '19 at 05:06

score 1 · Accepted Answer · answered Nov 20 '19 at 05:05

<RelativeLayout
            android:layout_width="54dp"
            android:layout_height="54dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp">

             <ImageView
                android:id="@+id/warning_circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:src="@drawable/ic_warning_circle"/>

            <ImageView
                android:id="@+id/button_menu"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentStart="true"
                android:padding="5dp"
                android:src="@drawable/ic_menu"
                android:background="@drawable/button_white_rounded"
                android:elevation="4dp"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:tint="@color/colorText"/>


        </RelativeLayout>

score 0 · Answer 2 · answered Nov 20 '19 at 05:05

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.

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

Mayur Patel · Answer 3 · 2019-11-20T05:59:55.337

Your code is perfect but either you have to remove android:elevation from button_menu or you have to add android:elevation in warning_circle.

I have updated my answer based on @MikeM. suggestion for use RelativeLayout instead of ConstraintLayout

Solution 1:

<RelativeLayout
    android:layout_width="54dp"
    android:layout_height="54dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp">

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="@drawable/button_white_rounded"
        android:padding="5dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_menu"
        android:tint="@color/colorText"
        tools:src="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@drawable/ic_warning_circle"
        tools:src="@tools:sample/avatars" />
</RelativeLayout>

Solution 2:

<RelativeLayout
    android:layout_width="54dp"
    android:layout_height="54dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp">

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="@drawable/button_white_rounded"
        android:elevation="4dp"
        android:padding="5dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_menu"
        android:tint="@color/colorText"
        tools:src="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:elevation="4dp"
        android:src="@drawable/ic_warning_circle"
        tools:src="@tools:sample/avatars" />
</RelativeLayout>

@MikeM. ConstraintLayout is more powerful as compare with RelativeLayout. You can read more about it from here https://stackoverflow.com/a/37992834/6238866 and https://stackoverflow.com/questions/37321448/differences-between-constraintlayout-and-relativelayout — Mayur Patel, Nov 20 '19 at 05:21
Yeah, I know what `ConstraintLayout` is, but they already have the `ImageView`s arranged as they want, in the plane. They're just trying to bring one forward, on the z-axis. They don't need to change the parent to do that, especially not to the one `ViewGroup` with the most overhead. `RelativeLayout` suffices, here. — Mike M., Nov 20 '19 at 05:24
@MikeM. Yes that's true but For better performance and tooling support, you should instead build your layout with ConstraintLayout. https://developer.android.com/guide/topics/ui/layout/relative — Mayur Patel, Nov 20 '19 at 05:29
`ConstraintLayout` might be easier to manipulate in the IDE designer, but I'm still not convinced that it's more performant at runtime. Admittedly, I've not done any testing recently, and the numbers I've seen published are a little old, but it's hard to imagine that `ConstraintLayout` does better than the plain old basic `ViewGroup`s for simple layouts, when they're appropriate; e.g., https://android.jlelse.eu/constraint-layout-performance-870e5f238100. — Mike M., Nov 20 '19 at 05:35
@MikeM. That is a nice article. Thanks for sharing and gaining my knowledge. I greatly appreciate the time you've taken to share your knowledge with me. — Mayur Patel, Nov 20 '19 at 05:42
No problem. I hope I didn't seem rude, or anything. I just feel that `ConstraintLayout` is overused a little much. Thanks for being gracious about it. Cheers! — Mike M., Nov 20 '19 at 05:45
@MikeM. Ohh that not an issue. I hope you will share more knowledge with me and once again thank you. — Mayur Patel, Nov 20 '19 at 05:48

score 0 · Answer 4 · answered Nov 20 '19 at 05:18

You can use FrameLayout to achieve this.. here is an example, you can modify this according to your need. In warning icon image view add gravity as bottom|end and in menu icon image view add margin of 10dp when using FrameLayout.

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp">

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_margin="10dp"
        android:padding="5dp"
        android:src="@drawable/ic_menu"
        android:background="@drawable/button_white_rounded"
        android:elevation="4dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:tint="@color/colorText"/>

    <ImageView
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@drawable/ic_warning_circle"/>

</FrameLayout>

score 0 · Answer 5 · answered Nov 20 '19 at 05:24

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="20dp">

    <ImageView
        android:layout_centerInParent="true"
        android:id="@+id/warning_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/ic_launcher_background"/>

    <ImageView
        android:id="@+id/button_menu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:padding="5dp"
        android:layout_marginRight="-20dp"
        android:layout_marginBottom="-20dp"
        android:layout_alignRight="@+id/warning_circle"
        android:layout_alignBottom="@+id/warning_circle"
        android:src="@drawable/ic_menu_gallery"
        android:background="@color/colorAccent"
        android:elevation="4dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"/>

</RelativeLayout>

Use this way!! We have a concept of layers in relative layout! Vertically down views are on the top most layer.

score 0 · Answer 6 · answered Nov 20 '19 at 07:29

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/download" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/download_img" />
    </RelativeLayout>

</RelativeLayout>

score 0 · Answer 7 · answered Nov 20 '19 at 09:44

You could try to search any ready-to-use solutions for badges like ImageBadgeView. Or try to play with BadgeDrawable from material lib.

I'd prefer to use ViewOverlay for such purposes and just add few rows of code:

button_menu.post {
    val drawable = ContextCompat.getDrawable(context, R.drawable.ic_warning_circle)
    drawable.setBounds(
        button_menu.width - drawable.intrinsicWidth,
        button_menu.height - drawable.intrinsicHeight,
        button_menu.width,
        button_menu.height
    )
    button_menu.overlay.add(drawable)
}

In this way you would reduce amount of containers in your xml layout and make it more readable.

Android imageview over another imageview

7 Answers7