okrągłe tekstowe Widoki takie jak Google Messenger

Question

chciałbym wyświetlać litery wewnątrz kręgów dokładnie tak Google Messenger robi coś takiego:

Próbowałem przy użyciu tej rozciągliwej plik

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
android:shape="oval"> 
<corners android:radius="10dip"/> 
<stroke android:color="@color/primary_color" android:width="2dip"/> 
<solid android:color="@color/primary_color"/> 

jako tło dla widoku tekstowego, ale to poszło katastrofalnie źle. Jakieś pomysły?

Answer 1

Byłeś prawie blisko, by odpowiedzieć.

Utwórz plik zasobów rozciągliwej pod rozciągliwej folderu: circular_textview.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"> 
<solid android:color="#4286F5"/> 

Ustaw tę rozciągliwej jako tło Twojego TextView użytkownika.

<TextView 
    android:layout_width="55dp" 
    android:layout_height="55dp" 
    android:text="C" 
    android:fontFamily="sans-serif-thin" 
    android:textColor="#FFF" 
    android:textSize="32sp" 
    android:gravity="center" 
    android:id="@+id/textView" 
    android:background="@drawable/circular_textview"/> 

To wszystko

Answer 2

Oto, co wymyśliłem.

użyłem TextView s z layer-list tle. Tło pasuje do rozmiaru widoku, w którym jest załadowany, więc aby mieć okrąg, można wymusić, aby TextView miał taką samą szerokość i wysokość.

<TextView 
    android:id="@+id/view" 
    android:layout_width="65dp" 
    android:layout_height="65dp" 
    android:gravity="center" 
    android:textSize="40dp" 
    android:fontFamily="sans-serif-thin" 
    android:background="@drawable/background" 
    android:text="A"/> 

Mam na stałe tekst, rozmiar, szerokość i wysokość, ale można nimi zarządzać w czasie wykonywania. fontFamily="sans-serif-thin" pozwala ci użyć, jeśli to możliwe, cienkiego kroju, który może być lepszy. Lista warstw:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:top="1dp"> 
     <shape android:shape="oval" > 
      <solid android:color="#321a1a1a"/> 
     </shape> 
    </item> 
    <item 
     android:top="1dp" 
     android:bottom="1dp" 
     android:left="1dp" 
     android:right="1dp"> 
     <shape android:shape="oval" > 
      <solid android:color="@color/red_700"/> 
     </shape> 
    </item> 
</layer-list> 

Pierwszy element to pokazanie fałszywego cienia, ale możesz się tego pozbyć. Możesz również usunąć jego przesunięcie android:top="1dp". W ten sposób będziesz miał okrągły pierścień 1dp na zewnątrz (podczas gdy teraz cień jest rzutowany tylko na dole i na obie strony).

Ponownie, mam zakodowane kolory, ale możesz zmienić to, co chcesz.

Answer 3

Spróbuj w ten sposób. Path res/odkształcalne/oval.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"> 
<gradient 
    android:startColor="#FFFF0000" 
    android:endColor="#80FF00FF" 
    android:angle="45"/> 
<padding android:left="7dp" 
    android:top="7dp" 
    android:right="7dp" 
    android:bottom="7dp" /> 
<corners android:radius="8dp" /> 
</shape> 

Ten kod dostaje TextView i stosuje kształt jako tło do niego:

Resources res = getResources(); 
Drawable shape = res. getDrawable(R.drawable.gradient_box); 

TextView tv = (TextView)findViewByID(R.id.textview); 
tv.setBackground(shape); 

To od: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Answer 4

późno, ale nie mniej ważne . Proponuję, co użyłem w jednym z moich projektów przez Amulię Khare.

https://github.com/amulyakhare/TextDrawable