Reputation: 357
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
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
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