Circular Avatar ImageView with Text Layover at the bottom

Question

I am trying to create this avatar imageview

The expectation is the image that we choose should appear behind the semi circle overlay.

This is my code for the semicircle:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/dark_grey_alpha"/>
<size
    android:width="88dp"
    android:height="44dp"/>
 <corners
    android:bottomLeftRadius="80dp"
    android:bottomRightRadius="80dp"/>

I am using the CircularImageView Library along with glide. I load the image like this:

@BindingAdapter("imageurl")
public static void avatarimage(ImageView imageView, String url) {
    Context context = imageView.getContext();
    Glide.with(context)
            .load(filePath)
            .apply(new 
         RequestOptions().placeholder(R.drawable.no_pic)
                    .error(R.drawable.no_pic))
            .into(imageView);
}

When i run the application, this is how it looks like:

And when i tried to reduce the height of the drawable to 24dp , it became like this:

What is the best way to do this?

Due to privacy concerns I wont be able to share the full layout. this is the code for the imageview

               <FrameLayout
                android:id="@+id/image_container"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:paddingBottom="3dp">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/profile_pic"
                    android:layout_width="88dp"
                    android:layout_height="88dp"
                    android:layout_gravity="center"
                    android:adjustViewBounds="false
                    app:imageurl="@{viewModel.url}" />

                <TextView
                    android:layout_width="88dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:background="@drawable/semi_circle_grey"
                    android:text="Change"
                    android:textAlignment="center"
                    android:textColor="@color/white" />

            </FrameLayout>

Answer 1

You should extend your CircleImageView class and add this code for drawing arc in your class (my language is kotlin you can convert it to java if you want)

CustomCircleImageView : CircleImageView {

    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle)


    override fun onDrawForeground(canvas: Canvas?) {
        super.onDrawForeground(canvas)
        var paint = Paint()
        paint.color = context.resources.getColor(R.color.black_alpha)
        paint.style = Paint.Style.FILL
        var radius = width/2f

        val oval = RectF()
        oval.set(width/2 - radius,
                height/2 - radius,
                width/2 + radius,
                height/2 + radius)
        canvas?.drawArc(oval, 30f, 120f, false, paint)
    }


}

then you can edit your xml for example:

<FrameLayout
            android:id="@+id/image_container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:paddingBottom="3dp">

            <com.company.example.CustomCircleImageView
                android:id="@+id/profile_pic"
                android:layout_width="88dp"
                android:layout_height="88dp"
                android:layout_gravity="center"
               android:src="@drawable/default_avatar" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|bottom"
                android:textColor="@color/white"
                android:text="Change"
                android:layout_marginBottom="4dp"
                android:textSize="12sp"
                />


        </FrameLayout>

and the result will be: