Tutorial: Android beginner tutorial Part 24 SeekBar widget

Thursday, February 5, 2015

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.

Lets 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, youll see something like this (left - normal state, right - the user is dragging the slider):

Thanks for reading!

Tutorial

Pages

Thursday, February 5, 2015

Android beginner tutorial Part 24 SeekBar widget

No comments:

Post a Comment

Blog Archive