如何实现类似Gmail的首字母圆形图标？适配单双字母场景

Alright, let's get that single-letter circular icon looking perfect alongside your working double-letter version!

The Root Problem #

Your current setup uses wrap_content for the TextView's width/height, paired with a shape that has a fixed 30dp corner radius. When you have a single letter, the TextView's width shrinks to fit the narrow text, making the view wider than it is tall (or vice versa)—turning your "circle" into an oval. The double-letter text fills more space, so the view stays roughly square, keeping the circle intact.

Solution 1: Fixed Size + Percentage Radius (Simple & Reliable) #

This is the easiest fix. We'll set equal fixed dimensions for the TextView and use a percentage radius in the shape to ensure it's always a perfect circle:

1. Update your TextView to have equal width and height (pick a size that fits your design—here we use 60dp to match the 30dp radius plus padding):

<TextView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:padding="10dp"
    android:textSize="20dp"
    android:textAllCaps="true"
    android:textColor="@color/white"
    android:background="@drawable/shape_rounded_blue_button"
    android:layout_gravity="center_horizontal"
    android:gravity="center"
    local:MvxBind="Text Initials"/>

2. Modify the shape_rounded_blue_button drawable to use a percentage radius instead of fixed dp—this ensures the corners curve to half the view's size, no matter what:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/blue"/>
    <corners android:radius="50%" /> <!-- 50% = half the view's width/height, perfect circle -->
</shape>

Solution 2: Adaptive Size with Aspect Ratio (Flexible) #

If you want the icon to adjust its size based on the text but stay a circle, use a ConstraintLayout to enforce a 1:1 aspect ratio:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/initials_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:padding="10dp"
        android:textSize="20dp"
        android:textAllCaps="true"
        android:textColor="@color/white"
        android:background="@drawable/shape_rounded_blue_button"
        android:gravity="center"
        local:MvxBind="Text Initials"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintWidth_default="wrap"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Keep the updated shape with 50% radius from Solution 1—this combo will make the view expand just enough to fit the text, while staying perfectly square (and thus a circle).

Either solution will make both single and double-letter icons look consistent as circles!

内容的提问来源于stack exchange，提问作者Golden Panda