0

I'm trying with the custom seekbar inside have number scale, But is not working. This seekbar must support all screen resolutions. how can i make like this. Please give your valuable idea.

My custom_seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
    android:id="@+android:id/background"
    android:drawable="@drawable/unselect"/>
<item
    android:id="@android:id/secondaryProgress"
    android:drawable="@drawable/select">
</item>
<item
    android:id="@android:id/progress"
    android:drawable="@drawable/select">
</item>

activity_main.xml

<LinearLayout 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"
android:background="@color/default_screen_bg"
android:orientation="vertical"
tools:context=".MainActivity" >



<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:indeterminate="false"
    android:max="10"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:progressDrawable="@drawable/custom_seekbar" />

 </LinearLayout>

Unselesct.png

enter image description here

select.png

enter image description here

myresult screen like this

enter image description here

I'm expecting like this

enter image description here enter image description here enter image description here enter image description here

Swati Garg
  • 995
  • 1
  • 10
  • 21
Murali Ganesan
  • 2,925
  • 4
  • 20
  • 31

1 Answers1

1

There's number to solutions to the problem:

  • Use 9patch image for backgorund (which is basically should be used as background for seekbar). Like the following:

enter image description here (name should be unselect_patch.9.png) and slightly modify custom_seekbar.xml to look like the following:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/unselect_patch"/>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
                android:src="@drawable/select"
                android:tileMode="disabled" />
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
                android:src="@drawable/select"
                android:tileMode="disabled" />
        </clip>
    </item>

</layer-list>

enter image description here

  • Just provide exact size of the image in layout (e.g. layout_width="@dimen/select_image_width");

To support all resolutions - provide images for different resolutions, as described in Supporting Multiple Screens. The same images will not work fine for all resolutions and here's better just follow best practices described in detail at the link above.

sandrstar
  • 12,503
  • 8
  • 58
  • 65
  • @sandrstar can u help me if i want numbers from 1 to 142 then may i need to put image that must contain numbers from 1 to 142 or is there any method that can draw scale like lines and numbers using onDraw() that should produce final image like above – Erum Aug 07 '14 at 04:30
  • @ErumHannan no, there's no such method, if You need custom draw, then seek bar should be extended and onDraw() hooked. – sandrstar Aug 07 '14 at 04:36
  • @sandrstar can u help me regarding this any idea ..... how will i draw may i need to take any loop for displaying of scale like lines till 4 and then 5th line should be large enough and again 4 lines – Erum Aug 07 '14 at 04:38
  • can u pls come in chat – Erum Aug 07 '14 at 04:38
  • @ErumHannan if You need help with some particular drawing, I would suggest to research custom views first and then (if any issues) share your code and raise new question. Unfortunately, now I can provide only general idea, because there might be some issues with exact implementation. – sandrstar Aug 07 '14 at 04:42
  • whats the general idea ? – Erum Aug 07 '14 at 04:43
  • @ErumHannan 1) implement custom view which extends SeekBar, override onDraw() and provide own drawing of background. 2) also, you can try to create that background programatically and set as SeekBar background. I think both ideas might work fine, but it's difficult to say which one will be more applicable in your case. – sandrstar Aug 07 '14 at 04:46
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58843/discussion-between-erum-hannan-and-sandrstar). – Erum Aug 07 '14 at 04:47