Создание макета с несколькими видами изображений друг за другом

Question

Я пытаюсь создать макет, где изображения могут быть загружены за другим. Вот пример:

Как бы я создал макет, как это? Или, может быть, есть библиотека, о которой я не знаю?

До сих пор я разобрался только в создании фона для изображений в виде одного круга:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorWhite"/>
    <stroke android:width="1dp"
        android:color="@color/dividerColor"/>
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/>

</shape>

И установил фон для этого drawable и загружая его с глиссадой. Как бы я создать макет, где они находятся друг за другом?

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent">
    <ImageView
        app:srcCompat="@drawable/circle_background_on"
        android:layout_width="50dp"
        android:layout_height="50dp"/>
    <ImageView
        android:layout_marginStart="30dp"
        app:srcCompat="@drawable/circle_background_on"
        android:tint="@color/red"
        android:layout_width="50dp"
        android:layout_height="50dp"/>
    <ImageView
        android:layout_marginStart="60dp"
        app:srcCompat="@drawable/circle_background_on"
        android:tint="@color/green"
        android:layout_width="50dp"
        android:layout_height="50dp"/>
</RelativeLayout>

Answer 2

Я лично использую FrameLayout для такого рода требований интерфейса.

<FrameLayout
    android:layout_gravity="center"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">

    <ImageView
        android:background="@drawable/shape_1"
        android:layout_gravity="end"
        android:layout_height="100dp"
        android:layout_width="100dp" />

    <ImageView
        android:background="@drawable/shape_2"
        android:layout_gravity="end"
        android:layout_height="100dp"
        android:layout_marginEnd="40dp"
        android:layout_width="100dp" />

    <ImageView
        android:background="@drawable/shape_3"
        android:layout_gravity="end"
        android:layout_height="100dp"
        android:layout_marginEnd="80dp"
        android:layout_width="100dp" />


</FrameLayout>

Answer 3

Вы можете создать макет такого типа, используя LinearLayout (горизонтальная ориентация) и ImageView, просто добавьте android:layout_marginStart="-20dp" с каждым из горизонтальных изображений ImageView.

Вы также можете динамически добавить ImageView, используя view.addView(imageView).

Или Вы можете использовать эту библиотеку для той же реализации StackImageView