How Show the Letter with the Circle Android

I follow this solution to make a circular Imagen with the First letter (Such as Gmail Contacts)

but i don't know how visualize that image...

I'm use a EditText but it doesn't work.

Someone can help me.

Upvotes: 7

Views: 14208

Answers (2)

Konstantin Romanov
Konstantin Romanov

Reputation: 11

You also can use something like this, custom Drawable.

public class LetterOvalDrawable
    extends Drawable {

  private final Paint textPaint;
  private final Paint shapePaint;
  private final Rect textRect;
  private String letter;

  public LetterOvalDrawable() {
    textPaint = new Paint();
    shapePaint = new Paint();
    textPaint.setAntiAlias(true);
    shapePaint.setAntiAlias(true);
    textPaint.setTextAlign(Paint.Align.LEFT);
    textRect = new Rect();
  }

  public LetterOvalDrawable(float textSize, @NonNull Typeface typeFace) {
    textPaint = new Paint();
    shapePaint = new Paint();
    textPaint.setAntiAlias(true);
    shapePaint.setAntiAlias(true);
    textPaint.setTextAlign(Paint.Align.LEFT);
    textRect = new Rect();

    textPaint.setTextSize(textSize);
    textPaint.setTypeface(typeFace);
  }

  @Override
  public void draw(@NonNull Canvas canvas) {
    int height = getBounds().height();
    int width = getBounds().width();
    RectF rect = new RectF(0.0f, 0.0f, width, height);
    canvas.drawRoundRect(rect, rect.bottom, rect.right, shapePaint);

    if (letter == null) return;

    textPaint.getTextBounds(letter, 0, letter.length(), textRect);
    float x = width / 2f - textRect.width() / 2f - textRect.left;
    float y = height / 2f + textRect.height() / 2f - textRect.bottom;
    canvas.drawText(letter, x, y, textPaint);
  }

  @Override
  public void setAlpha(int alpha) {
    textPaint.setAlpha(alpha);
    shapePaint.setAlpha(alpha);
  }

  @Override
  public void setColorFilter(@Nullable ColorFilter colorFilter) {
    shapePaint.setColorFilter(colorFilter);
  }

  @Override
  public int getOpacity() {
    return PixelFormat.TRANSLUCENT;
  }

  public void setLetter(String letter) {
    if (letter == null || letter.length() < 1) {
      this.letter = null;
      return;
    }
    if (letter.length() == 1) this.letter = letter.toUpperCase();
    else this.letter = letter.substring(0, 1).toUpperCase();
  }

  public @NonNull
  Paint getShapePaint() {
    return shapePaint;
  }

  public @NonNull
  Paint getTextPaint() {
    return textPaint;
  }
}

To customize it in runtime use getters getShapePaint() and getTextPaint().

Upvotes: 1

Vipul Asri
Vipul Asri

Reputation: 9223

This link will surely solve your purpose and you will be able to understand the working too.

OR

You can simply do like this (only one color will be applied to all of the title/initial list backgrounds with this code but you can surely customize it):

circle.xml in the drawable folder of the project

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
        <solid android:color="@color/color_accent" />
</shape>

then in your layout(xml) code just add a TextView like this :

<TextView
    android:id="@+id/title"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/circle"
    android:gravity="center_vertical" />

and then set the title TextView with initial element of the sentence or list like : title.setText(dataList.get(i).charAt(0)).

Upvotes: 29

Related Questions