Android - shadow on text?

Question

I am wondering how to add shadow on text in android?

I have the following code which is applied on a bitmap and I wanted to be shadowed...

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

You should mark the answer @fhucho left as the correct answer; I was trying to do the same thing and missed it the first time I saw this post, as no answer was marked as correct. The answer upvoted many times is misleading, as it doesn't relate to adding the shadow programmatically. — areyling, Jun 13 '11 at 02:01
Possible duplicate of [Add opaque "shadow" (outline) to Android TextView](http://stackoverflow.com/questions/39106454/add-opaque-shadow-outline-to-android-textview) — juergen d, Sep 02 '16 at 10:12

score 398 · Accepted Answer · edited Sep 10 '17 at 14:21

398

You should be able to add the style, like this (taken from source code for 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>

And in your layout, use the style like this:

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

Edit: the source code can be viewed here: https://github.com/google/ringdroid

Edit2: To set this style programmatically, you'd do something like this (modified from this example to match ringdroid's resources from above)

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

The signature for setTextAppearance is

public void setTextAppearance (Context context, int resid)

Since: API Level 1
Sets the text color, size, style, hint color, and highlight color from the specified TextAppearance resource.

edited Sep 10 '17 at 14:21

Cœur

37,241
25
195
267

answered Mar 21 '10 at 14:06

Joseph Yaduvanshi

20,241
5
61
69

1

But the OP is asking for custom widgets! – HRJ Feb 04 '11 at 15:33
That may be, but there's nothing to suggest that he couldn't use this method on an ImageView. I assumed he was painting directly because he couldn't figure it out otherwise. – Joseph Yaduvanshi Feb 04 '11 at 16:03
awesome... adds much needed depth to the standard font and makes it look 10X better on a solid background. – Matt K Sep 22 '11 at 20:56
@Farhan see here: http://stackoverflow.com/questions/4630440/how-to-change-a-textviews-style-at-runtime/4632208#4632208 – Joseph Yaduvanshi Nov 06 '11 at 19:47
I would like to mention that style (the .xml file) should be defined in /res/values directory and has the tag as the root one, otherwise it won't work. Good luck! – lomza Dec 28 '11 at 11:38
is there reference for it...i can't find it https://developer.android.com/reference/android/text/style/package-summary.html – Muhammad Umer Mar 25 '14 at 18:25
@MuhammadUmer It's the documentation for [TextView](http://developer.android.com/reference/android/widget/TextView.html) – Joseph Yaduvanshi Mar 25 '14 at 19:27
i meant where is shadow in it – Muhammad Umer Mar 25 '14 at 20:16
I don't follow. When you go to the documentation for TextView linked in my last comment, you don't see `android:shadow*` styles? I do. – Joseph Yaduvanshi Mar 26 '14 at 03:36
2

Really helped, thumbs up bro – Saad Bilal Oct 25 '17 at 09:24
perfect answer :) – Ramkesh Yadav Dec 13 '17 at 12:00

score 77 · Answer 2 · edited Jul 02 '16 at 21:44

You can do both in code and XML. Only 4 basic things to be set.

shadow color
Shadow Dx - it specifies the X-axis offset of shadow. You can give -/+ values, where -Dx draws a shadow on the left of text and +Dx on the right
shadow Dy - it specifies the Y-axis offset of shadow. -Dy specifies a shadow above the text and +Dy specifies below the text.
shadow radius - specifies how much the shadow should be blurred at the edges. Provide a small value if shadow needs to be prominent. Else otherwise.

e.g.

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

This draws a prominent shadow on left-lower side of text. In code, you can add something like this;

    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));

score 12 · Answer 3 · answered Aug 09 '18 at 07:54

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

In the above XML layout code, the textview1 is given with Shadow effect in the layout. below are the configuration items are

android:shadowDx – specifies the X-axis offset of shadow. You can give -/+ values, where -Dx draws a shadow on the left of text and +Dx on the right

android:shadowDy – it specifies the Y-axis offset of shadow. -Dy specifies a shadow above the text and +Dy specifies below the text.

android:shadowRadius – specifies how much the shadow should be blurred at the edges. Provide a small value if shadow needs to be prominent. android:shadowColor – specifies the shadow color

Shadow Effect on Android TextView pragmatically

Use below code snippet to get the shadow effect on the second TextView pragmatically.

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

Output :

Thank you brother, first text view helped me what I wanted to achieve. — Md. Rejaul Karim, Jul 10 '23 at 11:55

score 4 · Answer 4 · answered Dec 06 '17 at 15:43

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

then use as

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

score 3 · Answer 5 · answered Apr 03 '17 at 10:51

If you want to achieve a shadow like the one that Android does in the Launcher, we're managing these values. They're useful if you want to create TextViews that will appear as a Widget, without a background.

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

score 2 · Answer 6 · answered Mar 21 '10 at 13:55

2

Draw 2 texts: one gray (it will be the shadow) and on top of it draw the second text (y coordinate 1px more then shadow text).

answered Mar 21 '10 at 13:55

fhucho

34,062
40
136
186

1

Thanks guys for your posts. I did solve it by using two paint objects and using the setShadaowLayer on one of the paint-object. – Grendizer Apr 04 '10 at 15:10
2

This might look ok if you use alpha, but won't look like the nice, soft, declaratively-set shadow. – ShibbyUK Sep 05 '11 at 11:49

Android - shadow on text?

6 Answers6

Linked

Related