I want that CardView
, contains Name and First letter of the name in the circle. Just like the contact on our phone.
How to make this CardView with a circle containing a letter
1.1k Views Asked by Debasish Biswas At
4
There are 4 best solutions below
0

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

You can either :
- Create a custom view with a circle shape and a TextView in the middle and you put the letter
or
- 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);
1

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">
You can just use the Material Components Library:
Then in your code you can apply a
MaterialShapeDrawable
: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 in1.2.0-beta01
. Before it wasnew RelativeCornerSize(50)
.