Faça seu crachá um TextView, permitindo que você defina o valor numérico para qualquer coisa que você quiser chamando setText(). Defina o fundo do TextViewcomo um <shape>drawable XML , com o qual você pode criar um círculo sólido ou gradiente com uma borda. Um drawable XML será dimensionado para se ajustar à visualização à medida que é redimensionado com mais ou menos texto.
res / drawable / badge_circle.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#F00" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="5dip"
android:right="5dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
Você terá que dar uma olhada em como o oval / círculo é dimensionado com grandes números de 3-4 dígitos, no entanto. Se este efeito for indesejável, tente uma abordagem de retângulo arredondado como abaixo. Com números pequenos, o retângulo ainda parecerá um círculo conforme os raios convergem juntos.
res / drawable / badge_circle.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="10dip"/>
<solid
android:color="#F00" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="5dip"
android:right="5dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
Com o plano de fundo escalável criado, você simplesmente o adiciona ao plano de fundo de um TextView, assim:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold"
android:background="@drawable/badge_circle"/>
Finalmente, esses TextViewemblemas podem ser colocados em seu layout sobre os botões / guias apropriados. Eu provavelmente faria isso agrupando cada botão com seu emblema em um RelativeLayoutcontêiner, assim:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/myButton"
android:layout_width="65dip"
android:layout_height="65dip"/>
<TextView
android:id="@+id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/myButton"
android:layout_alignRight="@id/myButton"
android:text="10"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold"
android:background="@drawable/badge_circle"/>
</RelativeLayout>
Esperançosamente, essa informação é suficiente para, pelo menos, levá-lo na direção certa!
