Android Custom TextView

Have you ever tried to add custom behavior to in-build Android Text View or create custom attributes? If yes, this article is going to help you.

Here we'll create Single Custom TextView with support for custom attributes to display First and Last Name in different font and colors. During this process we'll learn following topics-

1. How to override default Views in Android
2. How to define custom Layout Attributes in Android

So, Let's get started...

Following sections explains necessary changes required in Java code and XML layout files.

Create Custom Text View (MyTextView.java)

1. Override Android's default TextView

 2. Implement Constructors. If you want custom attributes, override Constructor having Attributes in argument.

3. Override onMeasure(): Calculate required width and height, based on Text Size and selected Font. Once calculation is complete, set updated measure using setMeasuredDimension(reqWidth, reqHeight)
Note: It’s really important to define the correct size of the required drawing area. Android platform will not let you draw anywhere except your defined drawing area.

4. Override onDraw(Canvas canvas): Create Paint object with desired Font and Color information. Paint objects need to be passed as design briefing while drawing text or shapes.
Note: Android color is 4 byte value and Most Significant byte indicates Alpha value (00- complete transparent i.e. background will be visible and FF- complete non transparent, background is not visible)

Define Custom Attributes

1. Define a new NameSpace: xmlns:my="http://schemas.android.com/apk/res/com.my" (“com.my” is the package name defined in Manifest.xml)

2. Define the custom attributes in /res/values/attrs.xml file. Android platform need to know the new attributes that you will be using. attrs.xml file solves the purpose.
Specify the attributes within . Multiple “attr” tags can be grouped inside of “declare-styleable”. Please refer Custom Layout Resources. We will define 2 attributes- “first_name” and “last_name”.

[xml version="1.0" encoding="utf-8"?]
[resources]
    [declare-styleable name="MyTextView"]
        [attr name="first_name" format="string"/]
        [attr name="last_name" format="string"/]
    [/declare-styleable]
[/resources]

3. Use Custom Attributes in Layout

[LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:my="http://schemas.android.com/apk/res/com.my"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
]
[com.my.ui.MyTextView
android:id="@+id/MyTextView"
android:layout_width="fill_parent"
android:layout_height="50px"
my:first_name="Phil"
my:last_name="Jones"
/]

Access Custom Attributes from Java Code

public MyTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    Log.i(TAG, "MyTextView(ctxt, attrs)");
    Log.i(TAG, "Attributes...");
    for(int i=0; i<attrs.getAttributeCount(); i++){
        Log.i(TAG, attrs.getAttributeName(i));
        /*
         * Read value of custom attributes
         */
        this.firstText = attrs.getAttributeValue("http://schemas.android.com/apk/res/com.my", "first_name");
        this.lastText = attrs.getAttributeValue("http://schemas.android.com/apk/res/com.my", "last_name");
        Log.i(TAG, "firstText "+ firstText);
        Log.i(TAG, "lastText "+ lastText);
    }
    init();
}

Download complete source from Git Hub or Google Code. Share your comments.