Android – How to Strike Through or Cross out a Text in Android

This android tip is about learning how to strike through or cross out in text in android. We are going to learn the different options available to you.

When you want to cross out a test in android, you are achieve it programmatically or through xml layout file. When will still look at how to achieve this using android strings.xml resource.

I know you might be asking yourself, oh we will I need to use strike through text in android development? Ok, a simple example I can tell you is in ecommerce android application.

Imagine you want to offer promotional sales and you want to discount the original price of the product. For customers to understand what they stands to gain by buying the product, you will cross out the original price of the product beside the discounted price.

You can also use strike through text in android for emphasis. May be you want to draw the users attention to an important information.

You can also see my android tips on how to add dash-line in android

I have add some screen-shot from the example android app for this tips and I hope it will help you understand what we planned to achieve.

android strike through text

1. Create a new Android Project

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidStrikeThrough

Package: com.inducesmile.androidstrikethrough

Select Empty Activity

Name your activity: MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

2. Add the code below to activity_main.xml layout file

In the xml layout file, we are going to add some TextView and ImageView widgets. Thereafter, we will use many different ways to achieve text strike through in android.

Open your application activity_main.xml and add the code below.

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.inducesmile.androidstrikethroughtext.MainActivity">
    
    <ImageView
        android:id="@+id/product_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        android:src="@drawable/shoe"
        android:contentDescription="@string/app_name"/>

    <TextView
        android:id="@+id/product_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="16dp"
        android:textSize="18sp"
        android:textStyle="bold"
        android:text="@string/sport_trainers" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_gravity="center"
            android:textStyle="bold"
            android:text="@string/strike_line" />

        <TextView
            android:id="@+id/product_original_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="9dp"
            android:layout_gravity="center"
            android:textSize="14sp"
            android:textStyle="bold"
            android:text="$500.00" />

        <TextView
            android:id="@+id/product_discounted_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:textSize="16sp"
            android:textStyle="bold"
            android:layout_gravity="center"
            android:textColor="@color/colorAccent"
            android:text="$300.00" />
    </LinearLayout>

    <TextView
        android:id="@+id/product_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="13sp"
        android:layout_gravity="center"
        android:text="@string/description"  />
</LinearLayout>

 3. Update strings.xml resource file

Open strings.xml inside the values folder under res folder and add the code below.

<resources>
    <string name="app_name">Android StrikeThrough Text</string>
    <string name="sport_trainers">Sport Trainers</string>
    <string name="price">Price</string>
    <string name="strike_line"> <strike>Testing for line strike through in android. See examples here  crossed </strike> </string>
    <string name="description">This is one of the best trainers snickers in the market. I will improve your running and relax your feet without no pain. There is a limited edition so if you plan to buy it there is no other better time than now.</string>
</resources>

 4. How to create Strike Through or Cross out text in android

i. By using Paint.STRIKE_THRU_TEXT_FLAG

We can use the android Paint class flag to achieve this. It is very simple to use. I create a simple method as shown below.

private void strikeThroughText(TextView price){
    price.setPaintFlags(price.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
}

ii. By Using Android Spannable Class

Another way to achieve cross out text in android is by using the android Spannable class. The method below throws more light on how it can be done.

private void multiLineStrikeThrough(TextView description, String textContent){
    description.setText(textContent, TextView.BufferType.SPANNABLE);
    Spannable spannable = (Spannable)description.getText();
    spannable.setSpan(new StrikethroughSpan(), 0, textContent.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
}

iii. By using a drawable resource file

Create a drawable resource file inside your android drawable folder. Name the file strikr_through.xml or any name of your choice.

Open the resource file you have created and add the code below to it.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="line">
            <stroke android:width="2dp" android:color="@color/colorAccent"/>
        </shape>
    </item>
</selector>

Finally, use the drawable resource file as a background image resource of a TextView.

iv. Using strings.xml resource

It is also possible to use html element tag in android strings.xml file to strike through a word or line of sentence.

The example is shown below.

<string name="strike_line"> <strike>Testing for line strike through in android. See examples here  crossed </strike> </string>

5. Update MainActivity.java class

To see how all the different method we have used to cross out text in android is used, Open the MainaActivity class and add the code below.

import android.graphics.Paint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Spannable;
import android.text.Spanned;
import android.text.style.StrikethroughSpan;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView productName = (TextView)findViewById(R.id.product_name);
        TextView initialPrice = (TextView)findViewById(R.id.product_original_price);
        TextView discountPrice = (TextView)findViewById(R.id.product_discounted_price);
        TextView productDescription = (TextView)findViewById(R.id.product_description);
        strikeThroughText(initialPrice);
        discountPrice.setBackgroundResource(R.drawable.strike_through);
        multiLineStrikeThrough(productDescription, productDescription.getText().toString());
    }

    private void strikeThroughText(TextView price){
        price.setPaintFlags(price.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
    }

    private void multiLineStrikeThrough(TextView description, String textContent){
        description.setText(textContent, TextView.BufferType.SPANNABLE);
        Spannable spannable = (Spannable)description.getText();
        spannable.setSpan(new StrikethroughSpan(), 0, textContent.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    }

}

Have you used a modified or different way to strike through or cross over text in android? We will like you to share the method you have used with us.

Remember to subscribe to be among the first that receive current post on everything mobile app development and offers.

 

Add a Comment