TextView and Button Style: Strike Through, Shadow, Outline and More

TextView and Button are the most commonly used View. We can add some effects to these 2 views to make them more useful in different cases.

Strike Through

This effect is added in code.

//use Paint
TextView textView = (TextView) findViewById(R.id.textView);
textView.setPaintFlags(textView.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
Button button = (Button) findViewById(R.id.button);
button.setPaintFlags(button.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);

//use StrikerhroughSpan
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
String message = "What can we do with this text?";
textViewQuestion.setText(message, TextView.BufferType.SPANNABLE);
Spannable spannable = (Spannable) textViewQuestion.getText();
spannable.setSpan(strikethroughSpan, 5, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

Using Paint will affect the view’s whole text. Following are 3 buttons with the same strikethrough effect:

By using StrikethroughSpan, you can set what part of the text to be affected. For example, I only add this effect from the 5th to 10th character.

Shadow/Outline

Shadow and outline are the same effect. The difference is shadow’s radius.

In layout:

<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:shadowColor="@color/color_black"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="50"
android:text="Shadow Text"
android:textColor="#FFFFFF" />

In style:

<style name="text_shadow">
    <item name="android:shadowColor">#000000</item><br />
    <item name="android:shadowDx">1</item><br />
    <item name="android:shadowDy">1</item><br />
    <item name="android:shadowRadius">3</item><br />
</style>
  • android:shadowColor – shadow color
  • android:shadowDx – shadow’s X-axis offset
  • android:shadowDy – shadow’Y-axis offset
  • android:shadowRadius – how wide the shadow should be blurred at the edges

Round Button

In layout:

<Button
android:id ="@+id/buttonRound"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button"
android:background="@drawable/button_round"
android:padding="10dp"
/>

Create a new Drawable resource file named button_round under drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fede84"/>
            <stroke android:color="#aa892b" android:width="10dp" />
            <size android:width="100dp" android:height="100dp"/>
        </shape>
    </item>
</selector>

Leave a Comment

Your email address will not be published. Required fields are marked *

We care about your privacy and data security. Google serves cookies to analyse traffic and show ads on this site. By using this site you agree to these cookies being set. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close