androidhtmlandroid-layoutxmiandroid-shapedrawable

How to make this CardView with a circle containing a letter


Layout example

I want that CardView, contains Name and First letter of the name in the circle. Just like the contact on our phone.


Solution

  • You can just use the Material Components Library:

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ..>
    
       <TextView
           android:id="@+id/textview"
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:gravity="center"
           android:textSize="30sp"
           android:text="D"
           />
    
    </androidx.cardview.widget.CardView>
    

    Then in your code you can apply a MaterialShapeDrawable:

        TextView textView = findViewById(R.id.textview);
        ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(new RoundedCornerTreatment()).setAllCornerSizes(new RelativeCornerSize(0.5f))
                .build();
        MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
        shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color....));
        ViewCompat.setBackground(textView,shapeDrawable);
    

    The RelativeCornerSize(0.5f) apply rounded corners with size=50%. In this way the view becomes a circle.

    enter image description here

    Just a note about new RelativeCornerSize(0.5f): It changed in 1.2.0-beta01. Before it was new RelativeCornerSize(50).