Page 1 of 1

Custom UI Components in Android

#1 H3R3T1C  Icon User is offline

  • Android Expert
  • member icon

Reputation: 276
  • View blog
  • Posts: 757
  • Joined: 30-March 07

Posted 21 September 2011 - 03:41 PM

In Android as in any other versions of Java we are able to create our own custom UI components and in this tutorial I will be showing you two different ways of creating custom UI components!

To begin we first need to create a new Android application. Create your new app with the following settings:
Posted Image

Part 1: Modify existing components the code way!

In part one we will be modifying an existing UI component. The component we will modifying is EditText by adding text lines to it. This will be final result of part one:
Posted Image

Ok to start off we need to create a new class called LinedEditText in src -> com.h3r3t1c.tutorial.customwdg

Fill in LinedEditText with the following code (Explanation of code to follow):
package com.h3r3t1c.tutorial.customwdg;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.widget.EditText;

public class LinedEditText extends EditText{

	private Paint bkg;
	private Rect mRect;
	private Paint lineColor;

	public LinedEditText(Context context) {
		super(context);
		mRect = new Rect();
		bkg = null;
		lineColor = new Paint();
		lineColor.setColor(0x800000FF);
	}
	/**
	 * 
	 * @param context Application context
	 * @param bkg background color of the LinedTextView
	 * @param lColor Line color of the LinedTextView
	 */
	public LinedEditText(Context context,Paint bkg, Paint lColor) {
		super(context);
		mRect = new Rect();
		this.bkg = bkg;
		lineColor = lColor;
		lineColor.setStyle(Paint.Style.STROKE);
	}
	@Override
    protected void onDraw(Canvas canvas) {

        int count = getLineCount();

        Rect r = mRect;
        if(bkg!=null)
        	canvas.drawColor(bkg.getColor());
        
        for (int i = 0; i < count; i++) {

            int baseline = getLineBounds(i, r);

            canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, lineColor);
            
        }

        super.onDraw(canvas);
    }


}



As you can see I have two constructors for this class, the basic and the one where you can set custom colors. To create a basic LinedEditText in your onCreate(...) use the following code:
LinedEditText te = new LinedEditText(this);
te.setGravity(Gravity.TOP);
this.setContentView(te);


The constructor for setting the custom colors can be used like so:
Paint bkg = new Paint();
bkg.setColor(Color.BLUE);
Paint line = new Paint();
line.setColor(Color.RED);
LinedEditText te = new LinedEditText(this,bkg,line);
te.setGravity(Gravity.TOP);
this.setContentView(te);


The result of using the above code is this:
Posted Image

The onDraw(...) method is where all the magic happens for creating the lines!
As you can see from the code we are using a Canvas to draw on.
The purpose of Rect r = mRect; and int baseline = getLineBounds(i, r); is so we can get the bounds of the drawn text in the Edit text so we can draw our lines to be the same length as the text and to have the line right under the text. The purpose of super.onDraw(canvas); is so that we can draw the rest of the stuff that is normally drawn by EditText!

That's it! That is all there is to modifying existing UI components with code!

Part Two: Modifying existing UI components with XML!

To start off we first need to create a new folder called drawable under res. After that we need to add three image to that folder:
button1click
Posted Image
button1up
Posted Image
button1off
Posted Image

The buttons came from this site: http://www.buttongen...r.com/index.php

Now in the drawable folder create a file called custom_button.xml
Code for custom_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" 
    	  android:state_pressed="false" 
    	  android:drawable="@drawable/button1click" />
    <item android:state_focused="true" 
    	  android:state_pressed="true"
    	  android:drawable="@drawable/button1up" />
    <item android:state_focused="false" 
    	  android:state_pressed="true"
	  android:drawable="@drawable/button1up" />
	  <item android:state_enabled="false" 
	  android:drawable="@drawable/button1off" />
    <item android:drawable="@drawable/button1click" />
</selector>



What the above code does is it tells Android what images to apply to the button under different states.

Now go to your Main.java and replace the code in your onCreate() method with the following code:
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Button b = new Button(this);
        Button b2 = new Button(this);
        
        b.setBackgroundResource(R.drawable.custom_button);
        b.setText("enabled");
        b.setWidth(200);
        b.setHeight(60);
        
        b2.setBackgroundResource(R.drawable.custom_button);
        b2.setText("disabled");
        b2.setWidth(200);
        b2.setHeight(60);
        b2.setEnabled(false);
        
        LinearLayout l = new LinearLayout(this);
        l.addView(b );
        l.addView(b2);
        this.setContentView(l);
    }


This is what our result should look like:
Posted Image

That's all there basically is to this part. The same can be done to other existing UI components!

If we wanted to create our own UI components from scratch all we would have to do is extend View and just override methods onDraw(...) to display our custom UI component!


Full source: http://www.sendspace.com/pro/dl/ejk42p

Is This A Good Question/Topic? 0
  • +

Replies To: Custom UI Components in Android

#2 farrell2k  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 797
  • View blog
  • Posts: 2,423
  • Joined: 29-July 11

Posted 21 September 2011 - 05:22 PM

The first example extending the EditText is nice, but the second isn't a custom component, it's just a state list with drawables.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1