2015-01-05 14 views
6

vorrei per visualizzare le lettere all'interno di cerchi esattamente il modo in cui Google Messenger fa, in questo modo:circolari Visualizzazioni testo come Google Messenger

Google Messenger circular text views

Ho provato ad utilizzare questo file drawable

<?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"/> 

come sfondo per una visualizzazione di testo, ma che è andato disastrosamente sbagliato. Qualche idea?

+0

Si prega di fornire qualche descrizione di come è andata disastrosamente male. Inoltre, questo post potrebbe essere rilevante: http://stackoverflow.com/questions/26931909/android-how-to-define-a-configurable-size-shape – corsair992

risposta

8

Eri quasi vicino a rispondere.

Creare un file di risorse drawable nella cartella drawable: circular_textview.xml

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

Imposta questa drawable come sfondo del vostro textView.

<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"/> 

Questo è tutto

enter image description here

+0

Bello! Risposta molto perfetta – MKJParekh

8

Questo è quello che mi è venuto in mente.

ho usato TextView s con uno sfondo layer-list. Lo sfondo si adatta alle dimensioni della vista in cui è caricato, quindi per avere un cerchio è possibile forzare lo TextView ad avere la stessa larghezza e altezza.

<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"/> 

Ho testo, dimensioni, larghezza e altezza hardcoded, ma è possibile gestirli in fase di esecuzione. fontFamily="sans-serif-thin" consente di utilizzare, se disponibile, il tipo di carattere sottile che potrebbe essere migliore. L'elenco dei livelli:

<?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> 

Il primo elemento è ottenere l'ombra falsa mostrata, ma è possibile liberarsene. Inoltre, è possibile rimuovere il suo offset android:top="1dp". In questo modo avrai un anello circolare 1 dB all'esterno (mentre ora l'ombra è lanciata solo in basso e in entrambi i lati).

Anche in questo caso, ho colori hardcoded ma è possibile modificare ciò che si desidera.

+0

Bello! Risposta molto perfetta – MKJParekh

1

Prova in questo modo. res percorso/drawable/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> 

Questo codice ottiene il vostro TextView e applica la forma come sfondo ad esso:

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

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

E 'da: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Problemi correlati