0

I want to create a custom seek-bar. Along with other resources I have followed this two examples:

http://developer-dot-android.blogspot.ro/2012/03/custom-seekbar-tutorial.html

http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/

http://code.google.com/p/android-apktool/wiki/9PatchImages

All what I have tried crash at this line:

   ........
  <nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:src="@drawable/whitepatch">
  </nine-patch>

with:

Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #5: <nine-patch> requires a valid 9-patch source image
04-16 15:46:45.242: E/AndroidRuntime(20508):    at android.graphics.drawable.NinePatchDrawable.inflate(NinePatchDrawable.java:320)
04-16 15:46:45.242: E/AndroidRuntime(20508):    at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:881)
04-16 15:46:45.242: E/AndroidRuntime(20508):    at android.graphics.drawable.LayerDrawable.inflate(LayerDrawable.java:165)
.....

I have tried to generate my own 9-patch images using draw9patch.bat tools from sdk as described here. (without any other workaround because I don't know how, just import the .png and then save it as .9.png).

I have try to copy/paste the whitepatch.9.png used in the first tutorial, into my project. Same result. I really don't know what to do with this. Please help me!

enter image description here

AlexAndro
  • 1,918
  • 2
  • 27
  • 53

1 Answers1

0

Nine Patch Image is an PNG image with the extension 9.png. The Nine Patch image contains the meta information about the Scalable area (Top and Left) and Content area (Right and Bottom). You must mention the mandatory scalable area by marking around the top and left with 1 pixel(black color) excluding the corners which is distorted when scaled otherwise Android won't recognize it as a Nine Patch Image.

The below links will be more helpful

http://radleymarx.com/blog/simple-guide-to-9-patch/

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images

http://www.androiddom.com/2011/05/android-9-patch-image-tutorial.html

Sankar V
  • 4,794
  • 3
  • 38
  • 56
  • The problem with 9-patch solved thanks to the second link(does not crash anymore), anyway I still have troubles with the design. The green area does not extend when I pull the `seekbar` to right. Following the tutorials only the white background has to be 9-patc, right? – AlexAndro Apr 16 '13 at 14:15
  • Seekbar stretches only when the content increases. when u drag it only moves right. Sorry if am understand wrongly – Sankar V Apr 16 '13 at 14:20
  • I have uploaded a new picture in my question(this is how it should appear). When I zoom in/out(drag the `thumb`), the bar does not fill with green. I can move the `thumb` (black dot) up/down but the background remains white. – AlexAndro Apr 16 '13 at 14:30
  • @SankarV Hey Sankar - what did you do to fix the exception? I'm having the exact same problem and I don't know what is wrong with my image. I even tried using a sample image from http://stackoverflow.com/questions/10574363/android-splash-screen-image-sizes-to-fit-all-devices. Any ideas? – Anthony May 23 '13 at 15:46
  • @Anthony it will be better to discuss if you open a new question and provide me the link – Sankar V May 24 '13 at 05:28
  • @SankarV No problem - here is the direct link to the 9-patch image I'm using that seems to be invalid. http://i.stack.imgur.com/AZv2V.png – Anthony May 24 '13 at 13:43