Hi MobDev, Glad you found it useful. For some reason, I referred to you as xxx in my OP to you, probably because I wrote it offline, and if there's a way to edit Google Groups' posts once they're submitted, it eludes me *completely*.
I will organize these notes a bit better and post a tutorial on custom seekbars on anddev In The Near Future(TM); I will post a trackback here when I do. In the meantime if you run into problems just ask - sometimes the interactions of some of the layout attributes can be a bit confusing. -XCaf On Jan 29, 11:54 am, MobDev <developm...@mobilaria.com> wrote: > wow ! > great information, I will be having a look at this next week ! > At a first glance it looks like a very gooid pointer on how to get > thins done :D Thx a lot ! > > On 28 jan, 02:49, XCaffeinated <ssatn...@gmail.com> wrote: > > > > > Apologies, I forgot the links in the above post: > > > The full composited > > image:http://i916.photobucket.com/albums/ad9/XCaf/SeekbarOverTestBackground... > > > The four component > > images:http://i916.photobucket.com/albums/ad9/XCaf/CustomSeekbarParts.png > > > -XCaf > > > On Jan 27, 8:39 pm, XCaffeinated <ssatn...@gmail.com> wrote: > > > > Hi xxx > > > > Sliders in Android are called Seekbars. This may help you when you > > > search online. > > > > Recently, I needed to do exactly what you are describing. You can see > > > a test screenshot of this - a Seekbar with images to the left and > > > right (and a text label above as well, which is also an image, and all > > > are composited on top of a test menu background) here: > > > > The component images are (I’ve combined them into one photobucket > > > image, but they are four separate images in my Android project, and > > > some have been resized): > > > > You can see from this screenshot that the ‘left’, ‘right’ and ‘above’ > > > images are actually all part of a single image. All images are pngs. > > > > You use an .xml file containing a layer-list to specify which pngs to > > > use for your seekbar elements. In my screenshots you can see that I > > > have a translucent Seekbar base, and then a solid overlay to indicate > > > the actual progress (I’m not using a thumb or secondary progress > > > here). This .xml file looks like: > > > > <?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/sbrsoundbase_normal" > > > > </item> > > > <item android:id="@android:id/progress" > > > android:drawable="@drawable/sbrsoundoverlay_normal" > > > > </item> > > > </layer-list> > > > > where sbrsoundbase_normal is the png for the seekbar base, and > > > sbrsoundoverlay_normal is the png for the progress overlay. These are > > > the second and third images in the component screenshot above. > > > > Once you’ve decided what images you want, you will need a layout > > > similar to: > > > > <?xml version="1.0" encoding="utf-8"?> > > > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ > > > android" > > > android:layout_width="fill_parent" > > > android:layout_height="fill_parent" > > > android:gravity="center" > > > android:background="@drawable/screenbackground"> > > > > <LinearLayout > > > android:layout_width="wrap_content" > > > android:layout_height="wrap_content" > > > android:gravity="center_horizontal" > > > android:background="@drawable/sbrsoundbackground"> > > > > <SeekBar android:id="@+id/sbrsound" > > > android:layout_width="wrap_content" > > > android:layout_height="wrap_content" > > > android:progressDrawable="@drawable/sbrsound" > > > android:secondaryProgress="0" > > > android:thumb="@null" > > > android:max="10" > > > android:minHeight="10dip" > > > android:minWidth="200dip" > > > android:layout_marginTop="15dip" > > > android:paddingTop="20dip" > > > android:paddingBottom="20dip"> > > > </SeekBar> > > > </LinearLayout> > > > </LinearLayout> > > > > The progressDrawable attribute is where you reference the .xml file > > > described previously. > > > > I’ve included an overall parent background image (screenbackground), > > > in a master LinearLayout, to show how you might reuse a single > > > standard fullsize image for all your menu backgrounds. This > > > corresponds to the ‘Backgound Image’ png in the screenshot. > > > > The attributes most likely to bite you are minHeight and minWidth. I > > > had to make my minHeight *exactly* equal to my artwork height which is > > > 15 pixels high (15 pixels == 10 dip on Droid) in order to avoid > > > scaling artifacts; I’m sure there is a better way to do this, but I’ve > > > not investigated fully. Similarly for minWidth – it is the exact > > > width dimension of my artwork, 300 pixels (200 dip for the Droid). So > > > this is not elegant, but hopefully will get you going in the right > > > direction. > > > > The paddingXXX attributes make it much easier for people with large > > > fingers to interact with the Seekbar (try removing them and you will > > > see ), whereas layout_marginTop just adds a bit of space above the > > > control. > > > > The max attribute again works in conjunction with the artwork so the > > > Seekbar appears to increment in discrete chunks (one element at a time > > > in whatever direction the user is sliding in). If you remove it, max > > > will default to 100, and you will see the Seekbar slide almost > > > continuously as the user slides his finger. > > > > The gravity attribute applies to all it’s children. So the first > > > ‘gravity=”center”’ translates to “center the sound background image, > > > and the sound Seekbar images”. The second > > > ‘gravity=”center_horizontally”’ translates to “center the sound > > > Seekbar images left to right” > > > > The .java portion of this is extremely straightforward: > > > > public class CustomSeekbar extends Activity { > > > > private static final String TAG = "MYTAG"; > > > > SeekBar sbrSound; > > > > @Override > > > protected void onCreate(Bundle savedInstanceState) { > > > super.onCreate(savedInstanceState); > > > setContentView(R.layout.main); > > > > sbrSound = (SeekBar)findViewById(R.id.sbrsound); > > > sbrSound.setOnSeekBarChangeListener(mSoundSeekbarListener); > > > } > > > > private OnSeekBarChangeListener mSoundSeekbarListener = new > > > OnSeekBarChangeListener() { > > > public void onProgressChanged(SeekBar seekBar, int progress, > > > boolean fromTouch) { > > > Log.v(TAG, "SOUND SEEKBAR: Progress changed: progress = " > > > + progress + > > > "from user = " + fromTouch); > > > } > > > > public void onStartTrackingTouch(SeekBar seekBar) { > > > Log.v(TAG, "SOUND SEEKBAR: Start tracking"); > > > } > > > > public void onStopTrackingTouch(SeekBar seekBar) { > > > Log.v(TAG, "SOUND SEEKBAR: Stop tracking"); > > > } > > > }; > > > > } > > > > As you can see R.id.sbrsound is used to correlate the Java code with > > > the XML. Additionally we attach a listener to our Seekbar. That’s it. > > > > Caveats: > > > -Android guidelines recommend that you don’t make focusable images to > > > the immediate left or right of a Seekbar. The reason is if you are > > > using the keyboard or D-pad, you need to be able to increment/ > > > decrement the slider, and that would be difficult/impossible using the > > > arrow keys, if there were focusable images on the left or right of > > > your Seekbar. The static images that we’ve used here are not focusable > > > so they are fine. > > > > -This example is for landscape orientation only. If you need portrait > > > you can, for example, create a separate drawable-port-xxxx folder and > > > put your portrait-specific artwork in there (more on this in the > > > Android docs). There are probably many other solutions. > > > > -For simplicity, I’ve not included a focused state set of images here. > > > As you get more familiar with these types of controls you will want to > > > add these so D-Pad users get some visual feedback as to where they are > > > at onscreen. This means you will need to replace the discrete > > > drawable references with selector .xmls. > > > > Hope this is enough to get you started. If you’d like the original > > > artwork and/or the Eclipse project, send me a PM. > > > > Hope this helps! > > > XCaf > > > > On Jan 27, 9:01 am, MobDev <developm...@mobilaria.com> wrote: > > > > > Hi, > > > > I am trying to create a Custom view which basically should become a > > > > horizontal slider... > > > > Now my slider would exist out of several images, one image as a > > > > background, a superimposed image (foreground) with the actual slider, > > > > and an extra icon on either side... > > > > So how should I start working towards such an element ? > > > > - should I use ImageViews for all those Images (I am used to using > > > > Image class from J2ME), and can those be superimposed in the onDraw > > > > method of my new class ? > > > > - Android doesnt recognize the Image class, and the only thing I saw > > > > which might be similar is Bitmap.. Is this correct and how do I create > > > > one from a resource PNG file ? I couldn't find the Canvas.drawImage > > > > method but only the Canvas.drawBitmap method... > > > > Thanks in advance...- Hide quoted text - > > > > - Show quoted text -- Hide quoted text - > > - Show quoted text - -- You received this message because you are subscribed to the Google Groups "Android Beginners" group. NEW! Try asking and tagging your question on Stack Overflow at http://stackoverflow.com/questions/tagged/android To unsubscribe from this group, send email to android-beginners+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/android-beginners?hl=en
