Search code examples
androidandroid-layoutandroid-imageviewtextview

Circular Image View with overlapping text ( Click able )


I want to create a button which should be like the sample image. Circular Image View with overlapping text ( Clickable ).I have tried some libraries but none of them offer android:text="something" function.

Is there any library that offers them both together?

  <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="3dp"
                android:paddingBottom="5dp"
                android:paddingTop="5dp">
  <LinearLayout
                    android:id="@+id/layout2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/layout1"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="2dp"
                    android:paddingLeft="10dp">
  <de.hdodenhof.circleimageview.CircleImageView
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                        android:id="@+id/profile_image"
                        android:layout_width="96dp"
                        android:layout_height="96dp"
                        android:src="@drawable/tem_hashtag_bn_04"
                        app:civ_border_width="1dp"
                        app:civ_border_color="#FF000000"/>
</LinearLayout>
  </RelativeLayout>

Click able Circular Image View

Click able Circular Image View


Solution

  • Try this

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <de.hdodenhof.circleimageview.CircleImageView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/myCircleImageView"
            android:layout_width="96dp"
            android:layout_height="96dp"
            android:src="@color/colorPrimary"
            app:civ_border_width="2dp"
            app:civ_border_color="#FF000000"/>
    
    
        <TextView
            android:id="@+id/cmll_completed_per"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/myCircleImageView"
            android:layout_alignLeft="@id/myCircleImageView"
            android:layout_alignRight="@id/myCircleImageView"
            android:layout_alignTop="@id/myCircleImageView"
            android:layout_gravity="center"
            android:gravity="center"
            android:padding="10dp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:text="100%" />
    
    </RelativeLayout>
    

    OUTPUT

    enter image description here