Customize TextView in Android Studio

Customize TextView in Android Studio

In this article we will learn how to customize TextView in android studio. TextView is a user interface widget that display and set text to the user. In order to create text view use the following example of TextView widget.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.pmphysiciansvisits.insert.fragments.PrivateClinicsVisitFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello"/>

</FrameLayout>

Moreover, you can use the xml layout attributes to customize the TextView. Also, there is another way to customize TextView which is Spannable Text View. Through the next part of this article we learn how to use it. Moreover, when we want to use the text view in the java file we need to create a new object of text view and use the following method

TextView textview=findViewById(R.id.textview);

Spannable TextView in android studio

A spannable TextView can be used in Android to highlight a particular portion of text with a different color, style, size, and/or click event in a single TextView widget

Set Spannable TextView Color

In order to set a different color to some portion of text, a ForegroundColorSpan can be used, as shown in the following example:

String firstWord = "Hi";
String lastWord = "Android";
Spannable spannable = new SpannableString(firstWord+lastWord);
spannable.setSpan(new ForegroundColorSpan(firstWordColor), 0, firstWord.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannable.setSpan(new ForegroundColorSpan(lastWordColor), firstWord.length(),
firstWord.length()+lastWord.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textview.setText( spannable );

Set Spannable font

In order to set a different font size to some portion of text, a RelativeSizeSpan can be
used, as shown in the following example:

Spannable spannable = new SpannableString(firstWord+lastWord);
spannable.setSpan(new RelativeSizeSpan(1.1f),0, firstWord.length(),
 Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); // set size
spannable.setSpan(new RelativeSizeSpan(0.8f), firstWord.length(), firstWord.length() +
lastWord.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); // set size
textview.setText( spannable );

Set Spannable Typeface

In order to set a different font typeface to some portion of text, a custom
TypefaceSpan can be used, as shown in the following example:

pannable spannable = new SpannableString(firstWord+lastWord);
spannable.setSpan( new CustomTypefaceSpan("SFUIText-Bold.otf",fontBold), 0,
firstWord.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannable.setSpan( new CustomTypefaceSpan("SFUIText-Regular.otf",fontRegular),
firstWord.length(), firstWord.length() + lastWord.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
text.setText( spannable );

However, in order to make the above code working, the class CustomTypefaceSpan has to be extended from the class TypefaceSpan. This can be done as follows:

public class CustomTypefaceSpan extends TypefaceSpan {
 private final Typeface newType;
 public CustomTypefaceSpan(String family, Typeface type) {
 super(family);
 newType = type;
 }
 @Override
 public void updateDrawState(TextPaint ds) {
 applyCustomTypeFace(ds, newType);
 }
 @Override
 public void updateMeasureState(TextPaint paint) {
 applyCustomTypeFace(paint, newType);
 }
 private static void applyCustomTypeFace(Paint paint, Typeface tf) {
 int oldStyle;
 Typeface old = paint.getTypeface();
 if (old == null) {
 oldStyle = 0;
 } else {
 oldStyle = old.getStyle();
 }
 int fake = oldStyle & ~tf.getStyle();
 if ((fake & Typeface.BOLD) != 0) {
 paint.setFakeBoldText(true);
 }
 if ((fake & Typeface.ITALIC) != 0) {
 paint.setTextSkewX(-0.25f);
 }
 paint.setTypeface(tf);
 }
}

TextView with image

Android allows developers to place images at all four corners of a TextView. The developers will usually place an edit icon near that field. Android provides us an interesting option called compound drawable for a TextView:

<TextView
 android:id="@+id/title"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:drawablePadding="4dp"
 android:drawableRight="@drawable/edit"
 android:text="Hello world"
 android:textSize="18dp" />

You can set the drawable to any side of your TextView as follows:

android:drawableLeft="@drawable/edit"
android:drawableRight="@drawable/edit"
android:drawableTop="@drawable/edit"
android:drawableBottom="@drawable/edit"

Setting the drawable can also be achieved programmatically in the following way:

yourTextView.setCompoundDrawables(leftDrawable, rightDrawable, topDrawable, bottomDrawable);

Single TextView with two different colors

Colored text can be created by passing the text and a font color name to the following function.

private String getColoredSpanned(String text, String color) {
 String input = "<font color=" + color + ">" + text + "</font>";
 return input;
}

The colored text can then be set to a TextView (or even to a Button, EditText, etc.) by using the example code
below.

TextView txtView = (TextView)findViewById(R.id.txtView);
String name = getColoredSpanned("Hiren", "#800000");
String surName = getColoredSpanned("Patel","#000080");
txtView.setText(Html.fromHtml(name+" "+surName));

Learn more about android XML layout file

Learn more about TextView

Related posts

Leave a Comment