如何在Gmail中制作缩写图标？

Question

我想做什么： https://i.imgur.com/QCN2iwS.png

我拥有的： https://i.imgur.com/QPOdoq0.png

我想制作一个带有缩写的圆形图标。在我的场景中，首字母可以有一个或两个字母。就像你可以看到我的解决方案适用于两个字母而不是一个。如何解决这两种情况？

我的代码来自XML文件：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    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"/>

还有shape_rounded_blue_button：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/blue"/>
<corners android:radius="30dp" />
</shape>

Answer 1

由于我想实现相同的功能，我对GitHub进行了一些研究并找到了这个库： https://github.com/amulyakhare/TextDrawable

它完全符合您的要求，并具有一些简洁的功能，如自动着色。您可以将其与ImageView一起使用，并创建一个drawable，例如像这样：

val drawable = TextDrawable.builder()
        .beginConfig()
        .width(bubbleSize)
        .height(bubbleSize)
        .endConfig()
        .buildRound("FH", MATERIAL.getColor("FH"))
theImageView.setImageDrawable(drawable)

看起来像这样：

您的文字会自动在气泡中居中，因此拥有一个或两个字符没有问题。

Answer 2

您需要在 res＆gt; drawable 下创建一个drawable资源文件，并将其另存为bg_circle.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"> 
        <solid android:color="#424242"/> 
        <size android:width="120dp" android:height="120dp"/>
</shape> 

现在将icon_container文件中的layout.xml设为：

<RelativeLayout
    android:id="@+id/icon_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="@dimen/icon_width_height"
        android:layout_height="@dimen/icon_width_height"
        android:src="@drawable/bg_circle" /> 
    <TextView 
        android:id="@+id/icon_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:textSize="@dimen/icon_text" />
</RelativeLayout>

要完整代码实施，请访问Implementing Gmail like icon with text and random colors

Answer 3

您需要创建一个圆形。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
<solid android:color="@color/base30"/>

为了获得更好的效果（阴影和外观），您可以使用TextDrawable。