android studio: center ProgressPar on top of RoundedImageView - android-progressbar

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"
/>