Tuesday, December 18, 2012

Android beginner tutorial: Part 24 - SeekBar widget

In this part we will learn about the SeekBar widget.

The SeekBar widget is a subclass of ProgressBar, which is basically a slider that lets the user drag an indicator along a bar to set a numeric value.

Let's start right away with creating a simple example.

Go to activity_main.xml and create a layout that contains a TextView and a SeekBar. Give them ids "text" and "seek".

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity" >
    
    <TextView android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        />

    <SeekBar android:id="@+id/seek"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    
</LinearLayout>

Now go to MainActivity.java class.

The SeekBar can listen to events using listeners provided by OnSeekBarChangeListener class. Implement this as an interface in the activity:

public class MainActivity extends Activity implements OnSeekBarChangeListener{

Declare seekBar and textView variables:

private SeekBar seekBar;
private TextView textView;

Set their values in onCreate() function to represent the existing widgets. Set the text of the text view to "Value: x" where x is the progress value retreived from the seekBar using getProgress() method.

Add a listener to events for the seekBar using its setOnSeekBarChangeListener.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

seekBar = (SeekBar)findViewById(R.id.seek);
textView = (TextView)findViewById(R.id.text);

textView.setText("Value: " + seekBar.getProgress());
seekBar.setOnSeekBarChangeListener(this);
}

The OnSeekBarChangeListener interface expects 3 functions to be present in the class. Those are onProgressChanged(), onStopTrackingTouch() and onStartTrackingTouch().

The functions are executed when their name suggest they should be executed.

I want the text to become bold every time the user touches the slider, and return to normal when the user releases the slider. When a value is changed, the text should be updated with the new values.

@Override
public void onProgressChanged(SeekBar sb, int progress, boolean fromUser){
textView.setText("Value: " + seekBar.getProgress());
}

@Override
public void onStopTrackingTouch(SeekBar sb){
textView.setTypeface(null);
}

@Override
public void onStartTrackingTouch(SeekBar sb){
textView.setTypeface(null, Typeface.BOLD);
}

Full code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Menu;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

public class MainActivity extends Activity implements OnSeekBarChangeListener{

private SeekBar seekBar;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

seekBar = (SeekBar)findViewById(R.id.seek);
textView = (TextView)findViewById(R.id.text);

textView.setText("Value: " + seekBar.getProgress());
seekBar.setOnSeekBarChangeListener(this);
}

@Override
public void onProgressChanged(SeekBar sb, int progress, boolean fromUser){
textView.setText("Value: " + seekBar.getProgress());
}

@Override
public void onStopTrackingTouch(SeekBar sb){
textView.setTypeface(null);
}

@Override
public void onStartTrackingTouch(SeekBar sb){
textView.setTypeface(null, Typeface.BOLD);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

If you run your application now, you'll see something like this (left - normal state, right - the user is dragging the slider):



Thanks for reading!

No comments:

Post a Comment