How to make this CardView with a circle containing a letter

Question

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

Answer 1

You can either:

1. Create a custom view with a circle shape and a TextView in the middle and you put the letter

or

2. Use MaterialLetterIcon library.

MaterialLetterIcon icon = new MaterialLetterIcon.Builder(context) //
            .shapeColor(getResources().getColor(R.color.circle_color))
            .shapeType(SHAPE.CIRCLE)
            .letter("YOUR FIRST LETTER GOES HERE")
            .letterColor(getResources().getColor(R.color.letter_color))
            .letterSize(26)
            .lettersNumber(1)
            .letterTypeface(yourTypeface)
            .initials(false)
            .initialsNumber(2)
            .create();

or this TextDrawable library too

TextDrawable drawable1 = TextDrawable.builder()
                .buildRoundRect("YOUR LETTER GOES HERE", Color.RED, 10); // radius in px

TextDrawable drawable2 = TextDrawable.builder()
                .buildRound("YOUR LETTER GOES HERE", Color.RED);

Answer 2

With using MaterialLetterIcon which @Skizo-ozikS proposed:

Add implementation:

implementation 'com.github.ivbaranov:materiallettericon:0.2.3'

And inside CardView put:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <com.github.ivbaranov.mli.MaterialLetterIcon
        android:id="@+id/materialLetterIcon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:mli_letter="D"
        app:mli_shape_color="#01579B" />


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="2dp"
        android:text="debaish"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/materialLetterIcon"
        app:layout_constraintTop_toTopOf="@+id/materialLetterIcon" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginBottom="2dp"
        android:text="2 days ago"
        app:layout_constraintBottom_toBottomOf="@+id/materialLetterIcon"
        app:layout_constraintStart_toEndOf="@+id/materialLetterIcon" />

</androidx.constraintlayout.widget.ConstraintLayout>

Effect:

Answer 3

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.

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

Answer 4

Without any unknown libraries, just android librairies --> ConstraintLayout and MaterialDesign:

implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta8"
implementation "com.google.android.material:material:1.3.0-alpha01"

layout code:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="72dp"
        android:maxHeight="152dp">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <TextView
                android:id="@+id/two_line_list_item_icon"
                style="@style/TextAppearance.MaterialComponents.Subtitle1"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginStart="@dimen/two_line_item_icon_margin_start"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/two_line_list_item_title"
                app:layout_constraintHorizontal_chainStyle="spread_inside"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:background="@drawable/shape_card_circle_icon_background"
                android:gravity="center"
                android:padding="@dimen/two_line_item_icon_padding"
                android:textAlignment="center"
                android:textColor="@color/white"
                tools:text="D"
                app:srcCompat="@drawable/ic_person_white" />
    
            <TextView
                android:id="@+id/two_line_list_item_title"
                style="@style/TextAppearance.MaterialComponents.Subtitle1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:paddingStart="@dimen/two_line_item_icon_margin_start"
                android:paddingTop="@dimen/two_line_item_icon_margin_top"
                android:paddingEnd="@dimen/two_line_item_icon_margin_end"
                app:layout_constraintBottom_toTopOf="@id/two_line_list_item_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/two_line_list_item_icon"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="Prénom Nom Prénom Nom Prénom Prénom Nom Prénom Prénom Nom Prénom " />
    
            <TextView
                android:id="@+id/two_line_list_item_content"
                style="@style/TextAppearance.MaterialComponents.Body2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:paddingStart="@dimen/two_line_item_icon_margin_start"
                android:paddingEnd="@dimen/two_line_item_icon_margin_end"
                android:paddingBottom="@dimen/two_line_item_icon_margin_bottom"
                android:textColor="@color/textBlackMedium"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toEndOf="@+id/two_line_list_item_icon"
                app:layout_constraintTop_toBottomOf="@+id/two_line_list_item_title"
                tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    
    </androidx.cardview.widget.CardView>

and @drawable/shape_card_circle_icon_background is:

    <?xml version="1.0" encoding="utf-8"?>
    <shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="@color/grey" />
        <size android:width="24dp" android:height="24dp" />
    </shape>

your theme in styles.xml should be a material theme if you wants to use pre-defined "@style/TextAppearance.....". For example:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">