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:

give 1st image to elevation = 1, and 2nd image's left margin = -16 (adjust accordingly) — Jaydeep Devda, Aug 28 '20 at 05:05

score 2 · Accepted Answer · answered Aug 29 '20 at 12:06

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.

How to show images like twitter in android

1 Answers1