Apologies, I forgot the links in the above post: The full composited image: http://i916.photobucket.com/albums/ad9/XCaf/SeekbarOverTestBackground.png
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 - -- 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
