[android-beginners] Re: CustomView - horizontal slider help needed
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
[android-beginners] Re: CustomView - horizontal slider help needed
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
[android-beginners] Re: CustomView - horizontal slider help needed
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 =
[android-beginners] Re: CustomView - horizontal slider help needed
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);
