android studio: center ProgressPar on top of RoundedImageView

Question

I'm working on a chat app where users can send Texts/Images to another user. so if the sender is the current user then the messages(text/Image) will appear on the right of the page. and if the current user is the receiver then messages appear on left. Like this:

I want to add progressBar on the centre of the image on both sides. (for loading image purposes). Here is the XML of the right-side:

<RelativeLayout
        android:layout_width="@dimen/_280sdp"
        android:layout_alignParentEnd="true"
        android:layout_height="wrap_content">

        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/imageIV"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:layout_alignParentEnd="true"
            android:adjustViewBounds="true"
            app:riv_corner_radius="15dp"
            android:layout_below="@+id/date"
            android:src="@drawable/ic_baseline_image_24"
            />

        <ProgressBar
            android:visibility="gone"
            android:id="@+id/pb"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignStart="@+id/imageIV"
            android:layout_alignBottom="@+id/imageIV"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="85dp"
            android:layout_marginTop="85dp"
            android:layout_marginEnd="85dp"
            android:layout_marginBottom="85dp" />

        <LinearLayout
            android:orientation="vertical"
            android:id="@+id/message_wrapper"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageIV"
            android:padding="@dimen/_5sdp"
            android:layout_alignParentEnd="true"
            android:background="@drawable/background_right"
            android:layout_marginTop="10dip">
        <TextView
            android:id="@+id/show_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello"
            android:visibility="gone"
            android:textSize="18sp"
            android:textColor="#fff"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"/>

        <TextView
            android:id="@+id/messageTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:text="time"
            android:textColor="#fff"
            android:textSize="10dp" />

        </LinearLayout>
        <TextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="date"
            android:layout_alignParentEnd="true"
            android:textColor="#AEAEAE"
            android:paddingEnd="@dimen/_5sdp"
            android:textSize="8dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txt_seen"
            android:paddingTop="@dimen/_5sdp"
            android:layout_below="@+id/message_wrapper"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            />
    </RelativeLayout>

and Here is the XML of the Left-side:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/_280sdp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="5dp"
    android:id="@+id/messageLayout"
    android:layout_height="wrap_content">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:padding="@dimen/_3sdp"
        android:src="@drawable/pl"/>
    <com.makeramen.roundedimageview.RoundedImageView
        android:id="@+id/imageIV"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:layout_toEndOf="@+id/profile_image"
        android:adjustViewBounds="true"
        app:riv_corner_radius="15dp"
        android:layout_below="@+id/date"
        android:src="@drawable/ic_baseline_image_24"
        />
    <ProgressBar
        android:id="@+id/pb"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignStart="@+id/imageIV"
        android:layout_alignBottom="@+id/imageIV"
        android:layout_marginStart="85dp"
        android:layout_marginTop="85dp"
        android:layout_marginEnd="85dp"
        android:layout_marginBottom="85dp" />

    <LinearLayout
        android:id="@+id/message_wrapper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/_5sdp"
        android:layout_below="@+id/imageIV"
        android:layout_toEndOf="@id/profile_image"
        android:background="@drawable/background_left"
        android:layout_marginTop="10dip">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
    <TextView
        android:id="@+id/show_message"
        android:visibility="gone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:textSize="18sp"
        android:text="Hello"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        />

    <TextView
        android:id="@+id/messageTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="time"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:textSize="8dp" />
    </LinearLayout>
    </LinearLayout>


    <TextView
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="date"
        android:layout_toRightOf="@+id/profile_image"
        android:textColor="#AEAEAE"
        android:paddingRight="@dimen/_5sdp"
        android:textSize="8dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txt_seen"
        android:paddingTop="@dimen/_5sdp"
        android:visibility="gone"
        android:layout_below="@+id/message_wrapper"
        />
</RelativeLayout>

How can I do this? please help.

Answer 1

You can add extra progress layout_alignEnd/layout_alignTop attributes for right layout:

    <ProgressBar
    android:id="@+id/pb"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_alignStart="@+id/imageIV"
    android:layout_alignBottom="@+id/imageIV"
    android:layout_alignEnd="@+id/imageIV"
    android:layout_alignTop="@+id/imageIV" />

and layout_alignTop/layout_alignEnd for the left layout:

    <ProgressBar
    android:id="@+id/pb"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_alignStart="@+id/imageIV"
    android:layout_alignBottom="@+id/imageIV"
    android:layout_alignTop="@+id/imageIV"
    android:layout_alignEnd="@+id/imageIV"
    />