Building Custom Components in Android.

Hi everyone,

In this tutorial we will be building a Custom TextView.
ie. this TextView will be extending the inBuil TextView and have its own custom attributes
along with the default attributes in a TextView in Android.

So we will start.

We will be making a custom textview and presenting to the UI using

1. XML
2. Java Code

1. Using Java Code

Create a class named CustomTV and extend TextView.

CustomTV.java

package com.coderzheaven.customcomponent;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.TextView;
import com.coderzheaven.customcomponent.R;

public class CustomTV extends TextView {

	public CustomTV(Context context) {
		super(context);
	}

	public CustomTV(Context context, AttributeSet attrs) {
	    super(context, attrs);
	}

	public CustomTV(Context context, AttributeSet attrs, int defStyle) {
	    super(context, attrs, defStyle);
	    
	}
	   
}

Now we go to the MainActivity and place the Custom textview using java code.

package com.coderzheaven.customcomponent;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		LinearLayout lin = (LinearLayout) findViewById(R.id.lin);

		CustomTV tv = new CustomTV(this);
		tv.setText("I am a custom TextView from java code With Custom Attributes");
		tv.setPadding(20, 20, 20, 20);
		lin.addView(tv);

	}

}

activity_main.xml

<LinearLayout 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"
    android:id="@+id/lin"
    android:orientation="vertical"
    tools:context=".MainActivity" >
  
</LinearLayout>

1. Using XML

There is no change in the java code above. Instead we will be adding one more TextView in the
activity_main.xml which is our custom one.

<LinearLayout 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"
    android:id="@+id/lin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <com.coderzheaven.customcomponent.CustomTV
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="I am Custom TextView in the XML with Custom Attributes" />

</LinearLayout>

NOW WE WILL SEE HOW CAN APPLY OUR OWN ATTRIBUTES TO OUR CUSTOM TEXTVIEW.

Let’s say my custom textview should have an attribute “my_color” to which I can apply my own color as string.
[We know there is already a method for setting color in a TextView, but this is only for illustration purpose]

Create an xml named “attrs.xml” inside res/values and copy this code into it.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CustomTV">
        <attr name="my_color" format="string" />
    </declare-styleable>

</resources>

Now go to activity_main.xml and change xml code like this.
Make sure to add your custom namespace [xmlns:custom=”http://schemas.android.com/apk/res/com.coderzheaven.customcomponent”]

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.coderzheaven.customcomponent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/lin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <com.coderzheaven.customcomponent.CustomTV
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        custom:my_color="#FF0000"  
        android:text="I am Custom TextView in the XML with Custom Attributes" />

</LinearLayout>

Now if you run, you can see your custom color to your custom TextView.

Our CustomTV.java will change like this inorder to get the custom attributes and apply
our own modifications.

package com.coderzheaven.customcomponent;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.TextView;
import com.coderzheaven.customcomponent.R;

public class CustomTV extends TextView {

	public CustomTV(Context context) {
		super(context);
	}

	public CustomTV(Context context, AttributeSet attrs) {
		super(context, attrs);

		TypedArray a = context.obtainStyledAttributes(attrs,
				R.styleable.CustomTV);

		final int N = a.getIndexCount();
		for (int i = 0; i < N; ++i) {
			int attr = a.getIndex(i);
			switch (attr) {
			case R.styleable.CustomTV_my_color:
				String my_color = a.getString(attr);
				setCustomColor(my_color);
				break;
			}
		}
		a.recycle();

	}

	public void setCustomColor(String color) {
		this.setTextColor(Color.parseColor(color));
	}

	public CustomTV(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

	}

}

Apply your custom attribute in Java code also.

   tv.setCustomColor("#00FF00");