To demonstrate the process of using the SeekBar, we will add one to a Dialog control launched on clicking a user interface item. Here is the end result:
Add the SeekBar to an XML layout in your app as follows:
To include this in a basic layout you could use the following, saved as "level_layout.xml" for use with the below Java code:
<SeekBar
android:id="@+id/level_seek"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" />
The user selection can be retrieved when they click the button and the TextView can update as they move the slider control, to reflect the current amount selected, which in this tutorial will be a percentage value.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView android:id="@+id/level_txt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="5dp"
android:textStyle="bold"
android:text="100%"/>
<SeekBar android:id="@+id/level_seek"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" />
<Button android:id="@+id/level_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"/>
</LinearLayout>
Now in an Android Activity class, you can set the initial value and retrieve the chosen user value. To use it in a Dialog, which is a typical usage of the slider control in many application UIs, add the following to a click listener onClick block in an Activity class for a button or other control you want the SeekBar to appear for:
Retrieve references to the TextView and SeekBar items in the layout defined above:
final Dialog levelDialog = new Dialog(this);
levelDialog.setTitle("Select level:");
levelDialog.setContentView(R.layout.level_layout);
Set the maximum value for the SeekBar:
final TextView levelTxt = (TextView)levelDialog.findViewById(R.id.level_txt);
final SeekBar levelSeek = (SeekBar)levelDialog.findViewById(R.id.level_seek);
We are using 100 as the maximum since the SeekBar is going to set a percentage. Next set up a listener for changes on the SeekBar control:
levelSeek.setMax(100);
levelSeek.setProgress(100);
You can of course implement the start and stop tracking methods to tailor user interaction with the SeekBar in your app. All we do here is update the TextView with the current level as the user slides the control up or down. Next retrieve a reference to the "OK" button we added to the layout:
levelSeek.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
//change to progress
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
levelTxt.setText(Integer.toString(progress)+"%");
}
//methods to implement but not necessary to amend
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});
Set up a click listener for the button:
Button okBtn = (Button)levelDialog.findViewById(R.id.level_ok);
In this onClick method you can add whatever code you need to respond to the user's chosen level using the retrieved integer value. The method also dismisses the Dialog. Finally, still inside the onClick method, show the Dialog:
okBtn.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
//respond to level
int chosenLevel = levelSeek.getProgress();
levelDialog.dismiss();
}
});
Your app should now have the ability to let users set levels using this intuitive control, which almost all smartphone users are well accustomed to.
levelDialog.show();
Further Resources:
Android Developers: SeekBar Class
TechRepublic: Android's SeekBar your way
No comments:
Post a Comment