Download the free trial version
Basic4android Video
Features
Tutorials and manuals
Showcase
Screenshots

Go Back   Android Development Forum - Basic4android > Basic4android > Basic4android Getting started & Tutorials
Documentation Wiki Register Members List B4P Search Today's Posts Mark Forums Read

Basic4android Getting started & Tutorials Android development starts here. Please do not post questions in this sub-forum.

Nine patch images tutorial

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 01-22-2012, 09:33 AM
Erel's Avatar
Administrator
 
Join Date: Apr 2007
Posts: 15,689
Awards Showcase
Basic4ppc Founder 
Total Awards: 1
Default Nine patch images tutorial

Android supports a special format of PNG images that can be resized by replicating specific parts of the image.
This images also include padding information.
These images are named nine-patch images.

You can read more about this format here: Canvas and Drawables | Android Developers

For example the following three labels use the same background nine-patch image:



Android SDK includes a tool named draw9patch.bat that can help you with building and modifying such images. This tool is available under: <android-sdk>\Tools
You can read more about it here: Draw 9-patch | Android Developers

The following steps are required to use a nine patch image as a view background:
- Copy the image to <project folder>\Objects\res\drawable
- Set the image to be read-only (otherwise it will be deleted during compilation).
- Add the following sub to your code (requires Reflection library):
Code:
Sub SetNinePatchDrawable(Control As View, ImageName As String)
    
Dim r As Reflector
    
Dim package As String
    
Dim id As Int
    package = r.GetStaticField(
"anywheresoftware.b4a.BA""packageName")
    id = r.GetStaticField(package & 
".R$drawable", ImageName)
    r.Target = r.GetContext
    r.Target = r.RunMethod(
"getResources")
    Control.Background = r.RunMethod2(
"getDrawable", id, "java.lang.int")
End Sub
For buttons you can use this sub which creates a StateListDrawable from two nine-patch images:
Code:
Sub SetNinePatchButton(Btn As Button, DefaultImage As String, PressedImage As String)
    
Dim r As Reflector
    
Dim package As String
    
Dim idDefault, idPressed As Int
    package = r.GetStaticField(
"anywheresoftware.b4a.BA""packageName")
    idDefault = r.GetStaticField(package & 
".R$drawable", DefaultImage)
    idPressed = r.GetStaticField(package & 
".R$drawable", PressedImage)
    r.Target = r.GetContext
    r.Target = r.RunMethod(
"getResources")
    
Dim sd As StateListDrawable
    sd.Initialize
    sd.AddState(sd.State_Pressed, r.RunMethod2(
"getDrawable", idPressed, "java.lang.int"))
    sd.AddCatchAllState( r.RunMethod2(
"getDrawable", idDefault, "java.lang.int"))
    Btn.Background = sd
End Sub
Now you should use this sub to set the views backgrounds:
Code:
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout(
"1")
    SetNinePatchDrawable(Label1, 
"label_bg")
    SetNinePatchDrawable(Label2, 
"label_bg")
    SetNinePatchDrawable(Label3, 
"label_bg")
End Sub
Tips
- Don't modify the image files located under res\drawable directly with the draw9patch tool. It removes the read-only attribute and then the image will be deleted.
- The image name is case sensitive.
- After adding a new image you should clean the project by choosing Tools - Clean Project. This causes a generated file (R.java) to be recreated and include the new resources.

An example is attached.
Attached Files
File Type: zip NinePatchExample.zip (7.4 KB, 165 views)
Reply With Quote
  #2 (permalink)  
Old 01-22-2012, 03:09 PM
Basic4ppc Veteran
 
Join Date: Nov 2011
Location: Spain
Posts: 275
Thumbs up

This is great, many many thaks.

FYI, here is a great & vast collection of free 9patch images.
Quote:
I have decided to start a blog to share some great 9 patch pngs used for the android platform. I have had trouble to find good quality 9 patch pngs in the past so thought this would be a good place to share some of my work.

Enjoy them all free of use, including in commercial android products.
Credits by offering a link to this blog would be greatly appreciated.

Do not use for your own website or blog without permission.
Not for resale/redistribution in packages without permission.
Reply With Quote
  #3 (permalink)  
Old 01-25-2012, 09:05 PM
Junior Member
 
Join Date: Nov 2011
Posts: 16
Default

Hello,
I'm keep getting an Error after putting the Ninepatch Images into the /res/drawable and try to Clean Project or Debug:


EDIT:
I named the image "nine-pressed.png" instead of "nine_pressed.9.png".
Solved.


Thanks for the Tutorial !

Last edited by reeZZer : 01-25-2012 at 09:13 PM.
Reply With Quote
  #4 (permalink)  
Old 01-25-2012, 09:21 PM
Basic4ppc Veteran
 
Join Date: Nov 2011
Location: Spain
Posts: 275
Default

Delete that Thumbs.db file from there, and/or close the program (probably the explorer window) that is using it.
Reply With Quote
  #5 (permalink)  
Old 02-02-2012, 12:47 PM
Basic4ppc Veteran
 
Join Date: Nov 2011
Location: Spain
Posts: 275
Post

I've created a new sub for setting up buttons supporting different images for Default, Pressed, Disabled, Focused and DisabledFocused states. You can pass an empty string for any button state you don't have an image for.

Code:
Sub SetNinePatchButton2(Btn As Button, DefaultImage As String, PressedImage As String, _
    DisabledImage 
As String, FocusedImage As String, FocusedDisabledImage As String)

    
Dim r As Reflector
    
Dim package As String
    package = r.GetStaticField(
"anywheresoftware.b4a.BA""packageName")
    
    r.Target = r.GetContext
    r.Target = r.RunMethod(
"getResources")
    
Dim sd As StateListDrawable
    sd.Initialize
    
    
Dim idDefault, idPressed, idFocused, idDisabled, idFocusedDisabled As Int
    
    
If FocusedDisabledImage.Length > 0 Then
        idFocusedDisabled = r.GetStaticField(package & 
".R$drawable", FocusedDisabledImage)
        sd.AddState2(
Array As Int (sd.State_Disabled, 0x0101009c), r.RunMethod2("getDrawable", idFocusedDisabled, "java.lang.int"))
    
End If
    
If DisabledImage.Length > 0 Then
        idDisabled = r.GetStaticField(package & 
".R$drawable", DisabledImage)
        sd.AddState(sd.State_Disabled, r.RunMethod2(
"getDrawable", idDisabled, "java.lang.int"))
    
End If
    
If PressedImage.Length > 0 Then
        idPressed = r.GetStaticField(package & 
".R$drawable", PressedImage)
        sd.AddState(sd.State_Pressed, r.RunMethod2(
"getDrawable", idPressed, "java.lang.int"))
    
End If
    
If FocusedImage.Length > 0 Then
        idFocused = r.GetStaticField(package & 
".R$drawable", FocusedImage)
        sd.AddState(
0x0101009c, r.RunMethod2("getDrawable", idFocused, "java.lang.int"))
    
End If
    
If DefaultImage.Length > 0 Then
        idDefault = r.GetStaticField(package & 
".R$drawable", DefaultImage)
        sd.AddCatchAllState( r.RunMethod2(
"getDrawable", idDefault, "java.lang.int"))
    
End If
    
    Btn.Background = sd
End Sub
Reply With Quote
  #6 (permalink)  
Old 02-21-2012, 07:20 PM
Basic4ppc Expert
 
Join Date: Feb 2012
Posts: 566
Default

Where can I download the image editor tool for Win7?
Reply With Quote
  #7 (permalink)  
Old 02-21-2012, 07:54 PM
Basic4ppc Expert
 
Join Date: Jun 2011
Location: Hertfordshire, UK
Posts: 1,126
Send a message via Yahoo to thedesolatesoul
Default

Quote:
Originally Posted by rfresh View Post
Where can I download the image editor tool for Win7?
GIMP - The GNU Image Manipulation Program
Paint.NET - Free Software for Digital Photo Editing
Reply With Quote
  #8 (permalink)  
Old 03-22-2012, 06:33 PM
COBRASoft's Avatar
Basic4ppc Veteran
 
Join Date: Dec 2011
Location: Oudenburg, Belgium
Posts: 221
Send a message via MSN to COBRASoft
Default

Erel, how can we 'remove' the nine patch image background from e.g. a panel? Let's say, I want the background to be visible for some time and at a certain point, I need to remove it again (not replacing by another one or a transparent one). Any ideas?
Reply With Quote
  #9 (permalink)  
Old 03-23-2012, 08:41 AM
Erel's Avatar
Administrator
 
Join Date: Apr 2007
Posts: 15,689
Awards Showcase
Basic4ppc Founder 
Total Awards: 1
Default

I'm not sure that I understand. You can always replace the Background property with a different drawable.
Reply With Quote
  #10 (permalink)  
Old 03-23-2012, 09:49 AM
COBRASoft's Avatar
Basic4ppc Veteran
 
Join Date: Dec 2011
Location: Oudenburg, Belgium
Posts: 221
Send a message via MSN to COBRASoft
Default

Hey,

I want no drawable at all . Kinda like 'reset' the background to original state. Perhaps panel.background = null will do the trick, have to try .

Greetings,
Sigurd
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Error in Guide 1.8 tutorial pdf - Tutorial 2 mystic7 Basic4android Updates and Questions 6 01-29-2012 11:13 AM
much images Cor Basic4android Updates and Questions 1 01-30-2011 05:53 AM
images on tabs Byak@ Questions (Windows Mobile) 3 08-08-2009 05:45 AM
Basic4ppc Desktop V6.01 Patch 1 Erel Official Updates 3 12-30-2007 08:17 PM
Patch 1 for version 6.01 Erel Announcements 0 12-30-2007 11:06 AM


All times are GMT. The time now is 10:06 AM.


Powered by vBulletin® Version 3.6.12
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0