Android 2 ImageViews overlapping best solution-CodePudding

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?

CodePudding user response：

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!