How to show images like twitter in android

Question

Hello All, I want to show image like shown in attached file. I have created a view but i am unable to set image one after other but the second and third image should be cut. Is there any way to achieve this view using xml?

<RelativeLayout
    android:id="@+id/rlFeedPostNotification"
    android:layout_gravity="end"
    android:layout_alignParentEnd="true"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:background="@drawable/circular_notification">

    <ImageView
        android:id="@+id/ivDownArrow"
        android:tint="@color/white"
        android:src="@drawable/ic_keyboard_arrow_down"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <TextView
        android:id="@+id/tvPost"
        android:textSize="16sp"
        android:layout_centerInParent="true"
        android:layout_toEndOf="@id/ivDownArrow"
        android:textColor="@color/white"
        android:text="New Posts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/ivProfileImgOne"
        android:layout_marginStart="10dp"
        android:src="@drawable/default_image"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/tvPost"
        android:layout_width="40dp"
        android:layout_height="40dp"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/ivProfileImgTwo"
        android:src="@drawable/default_image"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/ivProfileImgOne"
        android:layout_width="40dp"
        android:layout_height="40dp"/>


    <TextView
        android:textColor="@color/white"
        android:layout_marginEnd="18sp"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:text="+4"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

This is my view:

Answer 1

by using ConstraintLayout you can achive this type of layout.Use below xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rlFeedPostNotification"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_gravity="end"
    android:background="#00BCD4">

    <ImageView
        android:id="@+id/ivDownArrow"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/download_arrow"
        app:tint="@color/white" />

    <TextView
        android:id="@+id/tvPost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toEndOf="@id/ivDownArrow"
        android:text="New Posts"
        android:textColor="@color/white"
        android:textSize="16sp" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/text_plus4"
        android:layout_toRightOf="@id/tvPost">

        <de.hdodenhof.circleimageview.CircleImageView
            android:background="Your Background"
            app:layout_constraintRight_toRightOf="@id/ivProfileImgTwo"
            app:layout_constraintLeft_toRightOf="@id/ivProfileImgTwo"
            android:id="@+id/ivProfileImgThree"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <de.hdodenhof.circleimageview.CircleImageView
            android:background="Your Background"
            app:layout_constraintRight_toRightOf="@id/ivProfileImgOne"
            app:layout_constraintLeft_toRightOf="@id/ivProfileImgOne"
            android:id="@+id/ivProfileImgTwo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <de.hdodenhof.circleimageview.CircleImageView
            app:layout_constraintLeft_toLeftOf="parent"
            android:id="@+id/ivProfileImgOne"
            android:background="Your Background"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/text_plus4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:layout_marginEnd="18sp"
        android:text="+4"
        android:textColor="@color/white"
        android:textSize="16sp" />

</RelativeLayout>

NOTICE : if you want to add another image like ivProfileImgFour put your code exact top in ConstraintLayout otherwise your forth mage always appear on top.