9

I was wondering if anyone can provide hint or source to achieve following slider widget used in "Circle – Who's Around?" This is the first time I have ever came across this and I am not sure what to exactly name this widget.: enter image description here

enter image description here

I was thinking of using custom seekbar background to do this but, I am not sure how do I figure out exact pixels that the seekbar will reach of next step. Since, that will be independent to devices. In my case I am planning to use images, rather than the indicators.

Please don't point to this link http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/ because this is not what I want to achieve. They seem to have used static image footer to show D,W,K. I have tried that app and it doesn't even step to the exact dots or D,W,K. I have looked at AT&T Android Slider Controls but, they don't seem to provide any source for it. I have found some iOS devs achieving that but, I don't really understand obj C code in order to achieve that in Android.

Milan
  • 1,845
  • 5
  • 19
  • 33

3 Answers3

1

This is just a seekbar with a custom thumb and background. You could use a 9patch for the background so it fills nicely and just set them in your styles

seaplain
  • 771
  • 7
  • 25
  • I have never used 9patch but, how am I gonna add (lets say) A,B,C,D in the background of the seekbar that steps exactly on A,B,C,D. I know about using custom thumbs but, I am looking for achieving exact points in seekbar steps. – Milan Jan 23 '13 at 04:00
  • Ah I understand, I'm not sure how to do this. If you can't find a better answer I would try to make another layout underneath with the lines etc in it that is spaced using weighting. My guess is that the points will be placed evenly along the seekbar based on its width and thus you should be able to align the two. In no way an elegant solution but it may work depending on what you want – seaplain Jan 23 '13 at 04:06
1

Following @Milanix answer using the library at https://github.com/karabaralex/android-comboseekbar here it is a minimum example code that worked for me:

<com.infteh.comboseekbar.ComboSeekBar
        android:id="@+id/seekbar" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        custom:color="#000"
        custom:textSize="12sp"
        custom:multiline="false"
        />

Then in the Activity

private ComboSeekBar mSeekBar;
List<String> seekBarStep = Arrays.asList("All","1","5","10","20");
mDistanceSeekBar.setAdapter(seekBarStep);

This will create a black segmented seekbar using default drawables. If you need to add some customization have a look at ComboSeekBar.onDraw(), CustomDrawable.draw() and CustomThumbDrawable.draw().

This project is all but finished but still a solid starting point.

Siddhivinayak
  • 1,103
  • 1
  • 15
  • 26
Giulio Prina Ricotti
  • 132
  • 1
  • 4
  • When i added the library into my project and tried it, it gives me this "error: Error parsing XML: unbound prefix" in the XML file in this line – RonEskinder Nov 14 '14 at 16:27
0

@Giulio thank you for your post, I have the same problem as Ron Eskinder. I heve fixed it by removing :"custom:color" , "custom:textsize" and "custom:multiline" in xml file. then in Java I put this: 

mSeekBar =  (ComboSeekBar) findViewById(R.id.seekbar);
List<String> seekBarStep = Arrays.asList("All","1","5","10","20");
mSeekBar.setAdapter(seekBarStep);

Hope this will help

Lajnior
  • 11
  • 3