Showing contact name with initial letter in circle

Question

I need to display the contact name initial letter inside circle like in lollipop contacts. I didn't find any solution.

The circle should different colour for each user.

Answer 1

You can follow this. If you wanna save time you can use this library.

Edit

The link may be invalid any point of time. So I want to add the details below this.

repositories{
  maven {
    url 'http://dl.bintray.com/amulyakhare/maven'
  }
}

dependencies {
  compile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'
}    

You can add which ever methodology you are following.

Basically you have to add one ImageView with same height and width and add this TextDrawable as a background of your view.

TextDrawable drawable = TextDrawable.builder()
            .buildRect("A", Color.RED);
ImageView image = (ImageView) findViewById(R.id.image_view);
image.setImageDrawable(drawable);    

The library has support for circle,square and rectangle drawables.

Answer 2

I didn't see any library for this but my solution is draw a circle in run time in a predefined layout in your xml use this : How to draw circle by canvas in Android?

Then in your list adapter choose first letter of each name string using substring(0,1) ,and using setText() you can set list item textView to first letter. If you need source code let me know to put it for you.

UPDATE: I recently used very easy approach for this in one of my apps, you should make a layout like this in your layout folder:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/rlWeekDay"
  android:layout_width="45dp"
  android:layout_height="45dp"
  android:layout_gravity="right"
  android:layout_margin="3dp"
  android:background="@drawable/circle_shape">

<TextView
    android:id="@+id/tvWeekDayFirstLetter"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text=" E "
    android:textStyle="bold"
    android:textColor="@color/colorPrimary"
    android:textSize="20sp" />
</RelativeLayout>

And your shape in drawable folder as circle_shape.xml:

   <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
         <shape android:shape="oval"
            android:dither="true">

            <corners
            android:bottomRightRadius="100dp"
            android:bottomLeftRadius="100dp"
            android:topLeftRadius="100dp"
            android:topRightRadius="100dp"/>

        <solid android:color="#ccc" />

    </shape>
</item>
<item android:bottom="3dp">
<shape android:shape="oval"
    android:dither="true">
<solid android:color="@color/white"/> <!-- this one is ths color of the  Rounded Button -->
<corners
    android:bottomRightRadius="100dp"
    android:bottomLeftRadius="100dp"
    android:topLeftRadius="100dp"
    android:topRightRadius="100dp"/>



 </shape>
   </item>
     </layer-list>

Then in your listView or recyclerview use this as the item to inflate.like this

Answer 3

Simple and small code to do this -

<com.google.android.material.button.MaterialButton
        android:id="@+id/"
        android:layout_width="40dp"
        android:layout_height="50dp"
        android:text="A"
        android:clickable="false"
        app:backgroundTint="@color/Blue200"
        android:padding="0dp"
        app:cornerRadius="50dp"
        />

Answer 4

By using a Material Card View and a Textview, it would be easy to create such a view.

 <com.google.android.material.card.MaterialCardView
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:cardBackgroundColor="@color/red"
        app:cardCornerRadius="50dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/initialTv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="AB" />

    </com.google.android.material.card.MaterialCardView>