Tutorial: Buttons with (niceley) stretched background

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Tutorial: Buttons with (niceley) stretched background

Postby darolla » Tue Jan 13, 2009 10:47 am

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.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         android:orientation="vertical" android:layout_width="fill_parent"
  7.  
  8.         android:layout_height="fill_parent">
  9.  
  10.  
  11.  
  12.         <Button android:layout_width="wrap_content"
  13.  
  14.                 android:layout_height="wrap_content" android:text="Small" />
  15.  
  16.  
  17.  
  18.         <Button android:layout_width="wrap_content"
  19.  
  20.                 android:layout_height="wrap_content" android:text="MediumMediumMedium" />
  21.  
  22.  
  23.  
  24.         <Button android:layout_width="wrap_content"
  25.  
  26.                 android:layout_height="wrap_content" android:text="LongLongLongLongLongLongLongLongLong" />
  27.  
  28. </LinearLayout>
  29.  
  30.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
Attachments
white.png
white.png (7.05 KiB) Viewed 80580 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top

Postby darolla » Tue Jan 13, 2009 10:49 am

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

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         android:orientation="vertical" android:layout_width="fill_parent"
  7.  
  8.         android:layout_height="fill_parent">
  9.  
  10.  
  11.  
  12.         <Button android:layout_width="wrap_content"
  13.  
  14.                 android:layout_height="wrap_content" android:text="Small"
  15.  
  16.                 android:background="@drawable/ugly" />
  17.  
  18.  
  19.  
  20.         <Button android:layout_width="wrap_content"
  21.  
  22.                 android:layout_height="wrap_content" android:text="MediumMediumMedium"
  23.  
  24.                 android:background="@drawable/ugly" />
  25.  
  26.  
  27.  
  28.         <Button android:layout_width="wrap_content"
  29.  
  30.                 android:layout_height="wrap_content" android:text="LongLongLongLongLongLongLongLongLong"
  31.  
  32.                 android:background="@drawable/ugly" />
  33.  
  34. </LinearLayout>
  35.  
  36.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
Attachments
ugly.png
ugly.png (3.97 KiB) Viewed 80577 times
ugly.png
ugly.png (10.26 KiB) Viewed 80577 times
Last edited by darolla on Tue Jan 13, 2009 11:15 am, edited 2 times in total.
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Tue Jan 13, 2009 10:54 am

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.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         android:orientation="vertical" android:layout_width="fill_parent"
  7.  
  8.         android:layout_height="fill_parent">
  9.  
  10.  
  11.  
  12.         <Button android:layout_width="wrap_content"
  13.  
  14.                 android:layout_height="wrap_content" android:text="Small"
  15.  
  16.                 android:background="@drawable/nice" />
  17.  
  18.  
  19.  
  20.         <Button android:layout_width="wrap_content"
  21.  
  22.                 android:layout_height="wrap_content" android:text="MediumMediumMedium"
  23.  
  24.                 android:background="@drawable/nice" />
  25.  
  26.  
  27.  
  28.         <Button android:layout_width="wrap_content"
  29.  
  30.                 android:layout_height="wrap_content" android:text="LongLongLongLongLongLongLongLongLong"
  31.  
  32.                 android:background="@drawable/nice" />
  33.  
  34. </LinearLayout>
  35.  
  36.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
Attachments
nice.png
nice.png (7.96 KiB) Viewed 80574 times
nice.9.png
nice.9.png (1.38 KiB) Viewed 80574 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Tue Jan 13, 2009 11:03 am

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
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Tue Jan 13, 2009 11:07 am

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
Attachments
btn_default_normal.9.png
btn_default_normal.9.png (964 Bytes) Viewed 80557 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Tue Jan 13, 2009 11:09 am

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
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top

Postby darolla » Tue Jan 13, 2009 11:14 am

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...

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.         android:orientation="vertical" android:layout_width="fill_parent"
  7.  
  8.         android:layout_height="fill_parent">
  9.  
  10.  
  11.  
  12.         <Button android:layout_width="wrap_content"
  13.  
  14.                 android:layout_height="wrap_content" android:text="Small"
  15.  
  16.                 android:background="@drawable/btn_default_normal" android:textColor="#ffffff" />
  17.  
  18.  
  19.  
  20.         <Button android:layout_width="wrap_content"
  21.  
  22.                 android:layout_height="wrap_content" android:text="MediumMediumMedium"
  23.  
  24.                 android:background="@drawable/btn_default_normal" android:textColor="#ffffff" />
  25.  
  26.  
  27.  
  28.         <Button android:layout_width="wrap_content"
  29.  
  30.                 android:layout_height="wrap_content" android:text="LongLongLongLongLongLongLongLongLong"
  31.  
  32.                 android:background="@drawable/btn_default_normal" android:textColor="#ffffff" />
  33.  
  34. </LinearLayout>
  35.  
  36.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
Attachments
pskink.png
pskink.png (7.33 KiB) Viewed 80543 times
btn_default_normal.9.png
btn_default_normal.9.png (766 Bytes) Viewed 80543 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby pskink » Tue Jan 13, 2009 12:44 pm

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
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby darolla » Tue Jan 13, 2009 1:55 pm

Attachments
ninepatch_raw[1].png
ninepatch_raw[1].png (18.69 KiB) Viewed 80489 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby MrSnowflake » Tue Jan 13, 2009 2:47 pm

Well, the SDK has an app: draw9patch(.bat on windows) which allows you to easilly make your own 9 patch images.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Postby Mrs Harris » Fri Jan 16, 2009 4:35 pm

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
Freshman
Freshman
 
Posts: 8
Joined: Fri Jan 16, 2009 2:22 pm

Postby MrSnowflake » Fri Jan 16, 2009 4:39 pm

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 :).
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Postby MrBawn » Thu Apr 30, 2009 9:16 pm

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.
MrBawn
Once Poster
Once Poster
 
Posts: 1
Joined: Thu Apr 30, 2009 9:08 pm

Postby deepthi » Mon Aug 10, 2009 6:04 am

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 ??
deepthi
Freshman
Freshman
 
Posts: 3
Joined: Thu Jul 30, 2009 11:00 am

Postby arams » Mon Aug 10, 2009 11:29 am

arams
Experienced Developer
Experienced Developer
 
Posts: 89
Joined: Fri May 08, 2009 7:45 am

Top
Next

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 7 guests