Круговой аватар ImageView с наложением текста внизу

Question

Я пытаюсь создать этот аватар imageview

Ожидается, что выбранное нами изображение должно появиться за полукруглым наложением.

Это мой код для полукруга:

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

Я использую библиотеку CircularImageView вместе с glide.Я загружаю изображение так:

@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);
}

Когда я запускаю приложение, оно выглядит следующим образом:

И когда я попытался уменьшить высоту отрисовки до 24dp, это выглядело так:

Каков наилучший способ сделать это?

Из-за соображений конфиденциальности я не смогу поделиться полным макетом.это код для просмотра изображений

               <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

Вы должны расширить свой класс CircleImageView и добавить этот код для рисования дуги в своем классе (мой язык kotlin, если хотите, вы можете преобразовать его в java)

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)
    }


}

, затем вы можете отредактировать свой xml дляПример:

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

и результат будет:

Answer 2

Это то, что вы хотите?тогда попробуйте это

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<FrameLayout
    android:id="@+id/image_container"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    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"
        android:src="@drawable/pop_img5" />

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

</FrameLayout>
</RelativeLayout>