Android: ombra sul testo?


184

Mi chiedo come aggiungere l'ombra sul testo in Android?

Ho il seguente codice che viene applicato su una bitmap e volevo essere ombreggiato ...

paint.setColor(Color.BLACK);
paint.setTextSize(55);
paint.setFakeBoldText(false);
paint.setShadowLayer(1, 0, 0, Color.BLACK); //This only shadows my whole view...

2
Tieni presente che devi avere un ShadowRadius.

2
Dovresti contrassegnare la risposta @fhucho come risposta corretta; Stavo cercando di fare la stessa cosa e l'ho perso la prima volta che ho visto questo post, poiché nessuna risposta è stata contrassegnata come corretta. La risposta votata molte volte è fuorviante, in quanto non riguarda l'aggiunta programmatica dell'ombra.
areyling

Risposte:


390

Dovresti essere in grado di aggiungere lo stile, in questo modo (preso dal codice sorgente per Ringdroid):

  <style name="AudioFileInfoOverlayText">
    <item name="android:paddingLeft">4px</item>
    <item name="android:paddingBottom">4px</item>
    <item name="android:textColor">#ffffffff</item>
    <item name="android:textSize">12sp</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
  </style>

E nel tuo layout, usa lo stile in questo modo:

 <TextView android:id="@+id/info"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       style="@style/AudioFileInfoOverlayText"
       android:gravity="center" />

Modifica: il codice sorgente può essere visualizzato qui: https://github.com/google/ringdroid

Edit2: per impostare questo stile a livello di codice, dovresti fare qualcosa del genere (modificato da questo esempio per abbinare le risorse di ringdroid dall'alto)

TextView infoTextView = (TextView) findViewById(R.id.info);
infoTextView.setTextAppearance(getApplicationContext(),  
       R.style.AudioFileInfoOverlayText);

La firma per setTextAppearanceè

public void setTextAppearance (Context context, int resid)

Da: Livello API 1
Imposta il colore, la dimensione, lo stile, il colore del suggerimento e il colore di evidenziazione del testo dalla risorsa TextAppearance specificata.


1
Ma l'OP chiede widget personalizzati!
HRJ,

Potrebbe essere, ma non c'è nulla che suggerisca che non potrebbe usare questo metodo su un ImageView. Ho pensato che stesse dipingendo direttamente perché non poteva capirlo altrimenti.
Jim Schubert,

fantastico ... aggiunge la profondità necessaria al carattere standard e lo fa sembrare 10 volte migliore su uno sfondo solido.
Matt K,


2
Davvero aiutato, pollice in alto fratello
Saad Bilal,

72

Puoi fare sia in codice che in XML. Solo 4 cose di base da impostare.

  1. colore dell'ombra
  2. Shadow Dx: specifica l'offset dell'ombra sull'asse X. Puoi dare valori - / +, dove -Dx disegna un'ombra a sinistra del testo e + Dx a destra
  3. shadow Dy: specifica l'offset dell'asse Y dell'ombra. -Dy specifica un'ombra sopra il testo e + Dy specifica sotto il testo.
  4. raggio dell'ombra: specifica quanto l'ombra deve essere sfocata ai bordi. Fornisci un valore piccolo se l'ombra deve essere prominente. Altrimenti altrimenti.

per esempio

    android:shadowColor="@color/text_shadow_color"
    android:shadowDx="-2"
    android:shadowDy="2"
    android:shadowRadius="0.01"

Questo disegna un'ombra prominente sul lato inferiore sinistro del testo. Nel codice, puoi aggiungere qualcosa del genere;

    TextView item = new TextView(getApplicationContext());
    item.setText(R.string.text);
    item.setTextColor(getResources().getColor(R.color.general_text_color));
    item.setShadowLayer(0.01f, -2, 2,   getResources().getColor(R.color.text_shadow_color));

7
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="20dp" >

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:shadowColor="#000"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="50"
        android:text="Text Shadow Example1"
        android:textColor="#FBFBFB"
        android:textSize="28dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Text Shadow Example2"
        android:textColor="#FBFBFB"
        android:textSize="28dp"
        android:textStyle="bold" />

</LinearLayout>

Nel codice di layout XML sopra, la vista di testo1 viene fornita con l'effetto Ombra nel layout. di seguito sono riportati gli elementi di configurazione

android: shadowDx - specifica l'offset dell'ombra sull'asse X. Puoi dare valori - / +, dove -Dx disegna un'ombra a sinistra del testo e + Dx a destra

android: shadowDy - specifica l'offset dell'ombra sull'asse Y. -Dy specifica un'ombra sopra il testo e + Dy specifica sotto il testo.

android: shadowRadius - specifica quanto l'ombra dovrebbe essere sfocata ai bordi. Fornisci un valore piccolo se l'ombra deve essere prominente. android: shadowColor - specifica il colore dell'ombra


Effetto ombra su Android TextView in modo pragmatico

Usa lo snippet di codice seguente per ottenere pragmaticamente l'effetto ombra sul secondo TextView.

TextView textv = (TextView) findViewById(R.id.textview2);
textv.setShadowLayer(30, 0, 0, Color.RED);        

Produzione :

inserisci qui la descrizione dell'immagine


3

Se vuoi ottenere un'ombra come quella che fa Android nel Launcher, stiamo gestendo questi valori. Sono utili se vuoi creare TextView che appariranno come Widget, senza uno sfondo.

android:shadowColor="#94000000"
android:shadowDy="2"
android:shadowRadius="4"

2

Disegna 2 testi: uno grigio (sarà l'ombra) e sopra di esso disegna il secondo testo (coordinate y 1px in più del testo ombra).


1
Grazie ragazzi per i vostri post. L'ho risolto usando due oggetti paint e usando setShadaowLayer su uno degli oggetti paint.
Grendizer,

2
Questo potrebbe sembrare a posto se usi alpha, ma non sembrerà l'ombra piacevole, morbida e impostata in modo dichiarativo.
Shibby,

2
 <style name="WhiteTextWithShadow" parent="@android:style/TextAppearance">
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
    <item name="android:shadowColor">@android:color/black</item>
    <item name="android:textColor">@android:color/white</item>
</style>

quindi usa come

 <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            tools:text="Today, May 21"
            style="@style/WhiteTextWithShadow"/>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.