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.