0

How I can create this type of textured progress bar "line-diag" (ninepatch?)?

enter image description here

I have read some threads and I think the solution would be using the images of type 9-patch. But I do not understand how to do it right. Can you explain how I can make this progress bar?

ephramd
  • 561
  • 2
  • 15
  • 41

2 Answers2

0

I don't think you need a 9-patch here. Just change dynamically the width of your fill bar (I'm guessing that's the bright red one), and set the proper scaleType.-

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bar_dark" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/bar_light" />

</RelativeLayout>

enter image description here

For a ProgressBar component, this post could help.-

Android ProgressBar UI custom layout

Community
  • 1
  • 1
ssantos
  • 16,001
  • 7
  • 50
  • 70
  • Not so simple. The image contains texture, if I change the width stripes are deformed. The bar should be scalable. – ephramd Nov 02 '13 at 19:28
  • But scaleType is a property of imageview, I can not implement this solution using a progressbar. – ephramd Nov 02 '13 at 19:34
  • 1
    Oh, I was thinking of a 'custom' progress bar instead of the native component. Can't tell if it's possible, but this thread looks promising.- http://stackoverflow.com/questions/9921621/android-progressbar-ui-custom-layout – ssantos Nov 02 '13 at 19:43
  • see this link: http://www.tiemenschut.com/how-to-customize-android-progress-bars/ – pskink Nov 02 '13 at 19:53
0

No need for a 9-patch. You can use custom XML drawables. Here is a good tutorial: Android Tutorials for Beginners

Google "android custom progress bar" for more examples.

Rick Falck
  • 1,778
  • 3
  • 15
  • 19