Hi,

welcome to this little tutorial about an (in my opinion) undocumented feature how to stretch the background of buttons niceley.

Let's start from scratch.

Just a simple Activity with three buttons of different size.



Greetings,
DaRolla

Now it's time for our own graphic. Lets put ugly.png to the background of the three buttons and see what happens.



Greetings,
DaRolla

As you can see, the background graphic is stretched. Well, that looks ugly! At this point I resigned. The only solution I could imagine was to create three different graphics that fits the button size. Then I wanted to change the text and I had to recreate the graphics...

That definityl sucks !

Then I joined pskink and his making own theme thread.

Lets see the solution, then the explanation.



Greetings,
DaRolla

As you can see, the border of the graphic isn't stretched, but the inside (that yelow-to-white gradient).

And the name of the graphic isn't nice.png but nice.9.png.

This is very important!

It's still referenced in the xml through @drawable/nice.

That .9.png suffix tells Android that there are more information inside the graphic.

Please take a closer look at the graphic.

It has black lines of 1 pixel size on top, buttom, left and right.

These are the areas which can be stretched.

The rest is painted as it is.

So the top border, buttom border, left border and right border are painted normally.

The rest is stretched.


Do you understand what I mean?

Greetings,
DaRolla

Now you understand that stretching stuff, I'll show you the original graphic that is used to show the white buttons.

It's btn_default_normal.9.png and can be found in the folder android-sdk-windows-1.0_r2\tools\lib\res\default\drawable.

Greetings,
DaRolla

To be honest, I do not know why the btn_default_normal.9.png has just 1 pixel top and 1 pixel left, but the lines on buttom and right.

Maybe you can experiment with this and help me out.

Greetings,
DaRolla

In his thread making own theme pskink uses this button. It has only a black border on the top and to the left, and it seems that it is enough...



Greetings,
DaRolla

darolla wrote:To be honest, I do not know why the btn_default_normal.9.png has just 1 pixel top and 1 pixel left, but the lines on buttom and right.

Maybe you can experiment with this and help me out.

Greetings,
DaRolla

ok, short answer: left & top black lines are for image streching, bottom & right are for text placing inside given drawable.

more info: sdk docs, available-resources.html#ninepatch

Well, the SDK has an app: draw9patch(.bat on windows) which allows you to easilly make your own 9 patch images.

Wow these 9 pngs are a really great idea... it'd be neat if browsers could render these. Web developers would be blown away by their power.

Mrs Harris wrote:Wow these 9 pngs are a really great idea... it'd be neat if browsers could render these. Web developers would be blown away by their power.

True indeed, but can't such behaviour be simulated with svg? Though probably not that easy by FAR .

MrSnowflake wrote:Well, the SDK has an app: draw9patch(.bat on windows) which allows you to easilly make your own 9 patch images.

When running draw9patch, I was annoyed that you can only draw one pixel at a time. [s]Turns out, you don't have draw black lines. Just the endpoints.[/s] No, that causes an error.

hi ... I am an android newbie ... I am trying to create a simple buttons code wherein the following happens :

1) there is an initial screen which says view picture. When I click on it , it should display the next picture with two buttons previous and next

2) I should be able to go back and forth between the images using the above two buttons
here is my .java file

package com.nextpic.Android;

import android.app.Activity;
import android.os.Bundle;
import android.view.*;
import android.widget.Button;

public class NextpicAndroid extends Activity {
/** Called when the activity is first created. */

Button button1,button2,button3,button4,button5;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

button1 = (Button) findViewById(R.id.Button01);
button2 = (Button) findViewById(R.id.Button02);

button3 = (Button) findViewById(R.id.Button03);

button4 = (Button) findViewById(R.id.Button04);

button1.setOnClickListener(new ClickListener1());
//button2.setOnClickListener(new ClickListener1());
//button3.setOnClickListener(new ClickListener1());
//button4.setOnClickListener(new ClickListener1());
//button5.setOnClickListener(new ClickListener1());


}


class ClickListener1 implements Button.OnClickListener{

public void onClick(View v)
{
if(v == button1)
{
setContentView(R.layout.image1);

}


if(v == button2)
{

setContentView(R.layout.main);

}


if(v == button3)
{
setContentView(R.layout.image2);
}


if(v == button4)
{
setContentView(R.layout.image1);

}

else if(v == button5)
{

}



}
}
}

my xml file ( there are two more )

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

<RelativeLayout
android:background="@drawable/d"
android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"

>

<Button
android:id="@+id/Button04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@+string/Button04"
android:typeface="serif"
android:textStyle="bold|italic"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
>

</Button>
<Button
android:id="@+id/Button05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="22px"
android:text="@+string/Button05"
android:typeface="serif"
android:textStyle="bold|italic"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
>
</Button>

</RelativeLayout>

can anybody pls tell me how to do it right ??

refer it:


http://developer.android.com/guide/samp ... cher1.html