To begin we first need to create a new Android application. Create your new app with the following settings:
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:
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:
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
button1up
button1off
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:
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
MultiQuote
| 