Add opaque "shadow" (outline) to Android TextView

Question

I have a TextView in my Activity to which I want to add a shadow. It is supposed to look like in OsmAnd (100% opaque):

But it looks like this:

You can see that the current shadow is blurred and fades away. I want a solid, opaque shadow. But how?

My current code is:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/speedTextView"
    android:text="25 km/h"

    android:textSize="24sp"
    android:textStyle="bold"
    android:textColor="#000000"
    android:shadowColor="#ffffff"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowRadius="6"
/>

Possible duplicate of http://stackoverflow.com/questions/3182393/android-textview-outline-text — kris larson, Aug 23 '16 at 18:56
Non of the solutions provided there did work for me until now. I keep trying ... — juergen d, Aug 23 '16 at 20:28
The solution you want is this one: http://stackoverflow.com/a/23909516/4504191 You set a paint style of STROKE then set the stroke width. The white outline in your image is the stroke. — kris larson, Aug 23 '16 at 20:56
I have a MapsForge activity with its own Paint methods. I did not get it to work there. — juergen d, Aug 23 '16 at 21:18

score 15 · Answer 1 · edited Jun 20 '20 at 09:12

I tried all the hacks, tips and tricks in the other posts like here, here and here.

None of them works that great or looks so good.

Now this is how you really do it (found in the Source of the OsmAnd app):

You use a FrameLayout (which has the characteristic of laying its components over each other) and put 2 TextViews inside at the same position.

MainActivity.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="#445566">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_weight="1">

        <TextView
            android:id="@+id/textViewShadowId"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:textSize="36sp"
            android:text="123 ABC" 
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/textViewId"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:textSize="36sp"
            android:text="123 ABC"
            android:textColor="#000000" />
    </FrameLayout>

</LinearLayout>

And in the onCreate method of your activity you set the stroke width of the shadow TextView and change it from FILL to STROKE:

import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
    
public class MainActivity extends AppCompatActivity {    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        //here comes the magic
        TextView textViewShadow = (TextView) findViewById(R.id.textViewShadowId);
        textViewShadow.getPaint().setStrokeWidth(5);
        textViewShadow.getPaint().setStyle(Paint.Style.STROKE);
    }
}

The result looks like this:

@user924 I don't really think it's bad just because it has two more views. This is the most reliable and simplest solution out there. — blackJack, Nov 07 '19 at 10:36
this is actually a feasible solution.. but the thing is it will be difficult to customize this... like using different textview attributes for differentl layout — miracle-doh, Dec 11 '20 at 11:46
This is very simple solution if you don't want to implement it in only one place. I encountered the problem of clipping the outline. I resolved it by adding spaces. — mspnr, Mar 30 '21 at 16:14

score 3 · Answer 2 · answered Jun 19 '19 at 23:09

I experienced the same issue, with calling setTextColor in onDraw causing infinite draw loop. I wanted to make my custom text view have a different fill color than the outline color when it rendered text. Which is why I was calling setTextColor multiple times in onDraw.

I found an alternative solution using an OutlineSpan see https://github.com/santaevpavel/OutlineSpan. This is better than making the layout hierarchy complicated with multiple TextViews or using reflection and requires minimal changes. See the github page for more details. Example

val outlineSpan = OutlineSpan(
    strokeColor = Color.RED,
    strokeWidth = 4F
)
val text = "Outlined text"
val spannable = SpannableString(text)
spannable.setSpan(outlineSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)

// Set text of TextView
binding.outlinedText.text = spannable

Add opaque "shadow" (outline) to Android TextView

2 Answers2

Now this is how you really do it (found in the Source of the OsmAnd app):

Linked