Android 2 ImageViews overlapping best solution

Question

I am creating screen which consists of list of items. Each item consists of 2 ImageViews, one overlapping over another. One is icon and the other is image. We see both of them, but image covers bottom right part of icon.

Not a problem to achieve this, but would like to know what is the standard/best solution in android world nowadays for this case. Android recommends using constraintLayout almost wherever you can and all the other things like Relativelayout fall in shadow.

In this case before asking question, I planned to use negative margins in my constraintLaout to set image ove the icon:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<ImageView
    android:id="@+id/orderNumber"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:src="@drawable/ic_star_big"/>

<ImageView
    android:layout_width="130dp"
    android:layout_height="200dp"
    app:layout_constraintLeft_toRightOf="@id/orderNumber"
    app:layout_constraintTop_toBottomOf="@id/orderNumber"
    android:src="@color/black"
    android:layout_marginTop="-10dp"
    android:layout_marginStart="-15dp"/>


</androidx.constraintlayout.widget.ConstraintLayout>

Is this best way, does it have downfalls? Is there better way to achieve this?

Use FrameLayout to achieve this effect. also, better to provide expected result as image. — Yurii, Oct 31 '22 at 13:39
Does this answer your question? [How to achieve overlap/negative margin on Constraint Layout?](https://stackoverflow.com/questions/42984909/how-to-achieve-overlap-negative-margin-on-constraint-layout) — Ivo, Oct 31 '22 at 13:40
Well it really has useful info and is similar, but not quite identical question. I am not wondering is it possible to use negative margins, I am wondering is it the best fit at this moment for this simple situation that occurs pretty often. — Kratos, Oct 31 '22 at 14:28

score 0 · Accepted Answer · answered Nov 01 '22 at 15:35

After doing some research, my conclusion is that it is not yet time where we can say that some method should be standard for this case.

But would like to add that negative margins are available for longer time in ConstraintLayout and are totally solid solution for this case. Tried it and works like a charm.

IMPORTANT: Have in mind this. My code can be changed to not use negative margins. Instead of making contraints of my second view to the first one, we can add its constraints to parent and than use normal margins to achieve same situation where views overlap. The code now looks like this:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/orderNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:src="@drawable/ic_star_big"/>

    <ImageView
        android:layout_width="130dp"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:src="@color/black"
        android:layout_marginStart="18dp"
        android:layout_marginTop="18dp"/>


    </androidx.constraintlayout.widget.ConstraintLayout>

I know looks obvious on the first, but not always when you start working. That's it, happy coding!

Android 2 ImageViews overlapping best solution

1 Answers1