Android - ombre sur le texte?


184

Je me demande comment ajouter une ombre sur du texte dans Android?

J'ai le code suivant qui est appliqué sur un bitmap et je voulais être ombré ...

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

2
Gardez à l'esprit que vous devez avoir un ShadowRadius.

2
Vous devez marquer la réponse @fhucho à gauche comme la bonne réponse; J'essayais de faire la même chose et je l'ai ratée la première fois que j'ai vu ce message, car aucune réponse n'a été marquée comme correcte. La réponse à plusieurs reprises est trompeuse, car elle ne concerne pas l'ajout de l'ombre par programme.
areyling

Réponses:


390

Vous devriez pouvoir ajouter le style, comme ceci (tiré du code source de 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>

Et dans votre mise en page, utilisez le style comme celui-ci:

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

Edit: le code source peut être consulté ici: https://github.com/google/ringdroid

Edit2: Pour définir ce style par programmation, vous feriez quelque chose comme ceci (modifié à partir de cet exemple pour correspondre aux ressources de ringdroid ci-dessus)

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

La signature pour setTextAppearance est

public void setTextAppearance (Contexte contextuel, int resid)

Depuis: API Niveau 1
Définit la couleur du texte, la taille, le style, la couleur d'indication et la couleur de surbrillance de la ressource TextAppearance spécifiée.


1
Mais l'OP demande des widgets personnalisés!
HRJ

C'est peut-être, mais rien ne suggère qu'il ne puisse pas utiliser cette méthode sur un ImageView. J'ai supposé qu'il peignait directement parce qu'il ne pouvait pas comprendre autrement.
Jim Schubert le

génial ... ajoute la profondeur nécessaire à la police standard et lui donne un aspect 10X meilleur sur un fond solide.
Matt K du


2
Vraiment aidé, bravo mon frère
Saad Bilal

72

Vous pouvez faire les deux en code et en XML. Seulement 4 choses de base à régler.

  1. couleur de l'ombre
  2. Shadow Dx - il spécifie le décalage de l'axe X de l'ombre. Vous pouvez donner des valeurs - / +, où -Dx dessine une ombre à gauche du texte et + Dx à droite
  3. shadow Dy - il spécifie le décalage de l'axe Y de l'ombre. -Dy spécifie une ombre au-dessus du texte et + Dy spécifie en dessous du texte.
  4. rayon de l'ombre - spécifie le degré de flou de l'ombre sur les bords. Fournissez une petite valeur si l'ombre doit être proéminente. Sinon, sinon.

par exemple

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

Cela dessine une ombre proéminente sur le côté inférieur gauche du texte. Dans le code, vous pouvez ajouter quelque chose comme ceci;

    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>

Dans le code de mise en page XML ci-dessus, le textview1 est donné avec un effet d'ombre dans la mise en page. ci-dessous les éléments de configuration sont

android: shadowDx - spécifie le décalage de l'axe X de l'ombre. Vous pouvez donner des valeurs - / +, où -Dx dessine une ombre à gauche du texte et + Dx à droite

android: shadowDy - il spécifie le décalage de l'axe Y de l'ombre. -Dy spécifie une ombre au-dessus du texte et + Dy spécifie en dessous du texte.

android: shadowRadius - spécifie à quel point l'ombre doit être floue sur les bords. Fournissez une petite valeur si l'ombre doit être proéminente. android: shadowColor - spécifie la couleur de l'ombre


Effet d'ombre sur Android TextView de manière pragmatique

Utilisez l'extrait de code ci-dessous pour obtenir l'effet d'ombre sur le deuxième TextView de manière pragmatique.

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

Production :

entrez la description de l'image ici


3

Si vous souhaitez obtenir une ombre comme celle qu'Android fait dans le lanceur, nous gérons ces valeurs. Ils sont utiles si vous souhaitez créer des TextViews qui apparaîtront sous forme de widget, sans arrière-plan.

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

2

Dessinez 2 textes: un gris (ce sera l'ombre) et par-dessus dessinez le deuxième texte (coordonnée y 1px de plus que le texte d'ombre).


1
Merci les gars pour vos messages. Je l'ai résolu en utilisant deux objets de peinture et en utilisant le setShadaowLayer sur l'un des objets de peinture.
Goldorak

2
Cela peut sembler correct si vous utilisez alpha, mais ne ressemblera pas à la belle ombre douce et déclarée.
ShibbyUK

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>

puis utilisez comme

 <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"/>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.