Add opaque "shadow" (outline) to Android TextView
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:
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