Android custom button layout tutorial

1 12 2012

The goal of this tutorial is to create customized button with your own background. The result will be something like that:

Normal button state

Button in normal state

Button pressed state

Button in pressed state

There are two ways of creating such background. The common one is to define it in XML file – this way I will describe here. The other, more elastic way is to define it at runtime in Java Code. And this is described in another tutorial.

1. Create background graphics files
First you need to create backround image for each button state (normal, pressed, focused etc.). For simplicity it is enough just to provide graphics for pressed and normal state. My files looks like that:

button_left_normal.png

button_left_normal.png

button_left_pressed.png

button_left_pressed.png

2. Create scalable 9patches from background files

9 patch is common format that allows button background to scale to fit desired size (width and height). You have to define which fragments should be resized while scaling (middle part of image) and which not (image corners), in order not to change background image shape.

Android SDK provides 9patch tool to create these. It is in your Andrid directory in \Android\android-sdk\tools\draw9patch.exe. Run it and draw line on the left and top edge, then save it to drawables directory (it will have extension like <file_name>.9.png. My files are as follows:

button_left_normal.9.png

button_left_normal.9.png

button_left_pressed.9.png

button_left_pressed.9.png

Some draw9patch.exe tutrials and instructions are available on the internet. I hope these three will be helpful: Android developers tutorial or YouTube tutorial.

3. Define xml selector
Selector is responsible for reacting on button press changes and showing proper backgrounds to the user. Here you define background files for each state (use 9patch images! These with *.9.png extension!), and put it in your /res/drawable folder. Example:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/button_left_pressed"/>
    <item android:state_focused="true" android:drawable="@drawable/button_left_pressed"/>
    <item android:drawable="@drawable/button_left_normal"/>
</selector>

4. Create UI button and define its background
Now all you need to do is to define a button and set its background to selector file defined earlier. In my case this is button_bgnd_left.xml file:

<Button
    android:id="@+id/calc_addPerson_button"
    android:layout_width="@dimen/height_button_big"
    android:layout_height="fill_parent"
    android:background="@drawable/button_bgnd_left"
    android:drawableLeft="@drawable/add_person"
    android:text="@string/calculation_button_addPerson_text" />

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!

Advertisements




Android: button with rotated (vertical) text

13 10 2012

If you want to build button with vertical text like that:

Vertical Button

You can override standard button and its onDraw() method. There you have to rotate text before drawing it. Same thing can be done with TextView – since button actually is extended TextView.

1. Write your own Button implementation

Here is code that actually you can copy-paste to your poject:

public class VerticalButton extends Button{
	final boolean topDown;

	public VerticalButton(Context context, AttributeSet attrs){
		super(context, attrs);
		final int gravity = getGravity();
		if(Gravity.isVertical(gravity) && (gravity&Gravity.VERTICAL_GRAVITY_MASK) == Gravity.BOTTOM) {
			setGravity((gravity&Gravity.HORIZONTAL_GRAVITY_MASK) | Gravity.TOP);
			topDown = true;
		}else
			topDown = false;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
		super.onMeasure(heightMeasureSpec, widthMeasureSpec);
		setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
	}

	@Override
	protected void onDraw(Canvas canvas){
		TextPaint textPaint = getPaint(); 
		textPaint.setColor(getCurrentTextColor());
		textPaint.drawableState = getDrawableState();

		canvas.save();

		if(topDown){
			canvas.translate(getWidth(), 0);
			canvas.rotate(90);
		}else {
			canvas.translate(0, getHeight());
			canvas.rotate(-90);
		}

		canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());
		getLayout().draw(canvas);
		canvas.restore();
	}
}

As you see – there is topDown flag. Depending on it the text will be rotated left or right (read from top to down or from down to top). This flag is set depending on the gravity defined in your layout.xml (set grafity to BOTTOM or TOP to see difference).

2. Place vertical button in activity

Do it by drag and drop in graphical layout editor (choose Custom & Library Views – Vertical button will be visible here since it extends some standard android view):

Vertical Button in graphical editor

or write xml code in layout.xml:

<pl.looksok.utils.VerticalButton
    android:id="@+id/verticalButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/verticalButton" />

please notice that package name of VerticalButton.java has to be written here (pl.looksok.utils).

3. That’s all!

Note: This code was found somewhere in the Internet (I can’t claim credit) – I really don’t remember wherefrom I took it :)

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!








%d bloggers like this: