{"id":11061,"date":"2014-07-04T15:00:39","date_gmt":"2014-07-04T12:00:39","guid":{"rendered":"http:\/\/examples.javacodegeeks.com\/?p=11061"},"modified":"2019-05-09T11:11:01","modified_gmt":"2019-05-09T08:11:01","slug":"android-seekbar-example","status":"publish","type":"post","link":"https:\/\/examples.javacodegeeks.com\/android\/core\/widget\/seekbar\/android-seekbar-example\/","title":{"rendered":"Android SeekBar Example"},"content":{"rendered":"

In Android, a SeekBar<\/code> is a ProgressBar<\/code> element’s extension that allows the selection of integer values using a natural user interface. SeekBar<\/code> has a thumb that can be slided in order to choose a value between 0 and some maximum that can be set from the developer.<\/p>\n

For the need of this example, we will use the following tools in a Windows 64-bit platform:
\n <\/p>\n

    \n
  1. JDK 1.7<\/li>\n
  2. Eclipse ADT 4.3 Kepler<\/li>\n
  3. Android SDK 4.3<\/li>\n<\/ol>\n
    Tip<\/strong>
    \nYou may skip project creation and jump directly to the beginning of the example<\/strong><\/a> below.<\/div>\n<\/p>\n

    1. Create a New Android Application Project<\/h2>\n

    Open Eclipse IDE and go to File \u2192 New \u2192 Project \u2192 Android Application Project.<\/p>\n

    Fill in the name of the application, the project and the package in the appropriate fields and then click Next.<\/p>\n

    \"Figure<\/a>
    Figure 1. Create a new Android application<\/figcaption><\/figure><\/p>\n

    In the next window, the \u201cCreate Activity\u201d option should be checked. The new created activity will be the main activity of your project. Then press Next button.<\/p>\n

    \"Figure<\/a>
    Figure 2. Configure the project<\/figcaption><\/figure><\/p>\n

    In \u201cConfigure Launcher Icon\u201d window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next button.<\/p>\n

    \"Figure<\/a>
    Figure 3. Configure the launcher icon<\/figcaption><\/figure><\/p>\n

    Select the \u201cBlank Activity\u201d option and press Next.<\/p>\n

    \"Figure<\/a>
    Figure 4. Create the activity and select its type<\/figcaption><\/figure><\/p>\n

    You then have to specify a name for the new Activity and a name for the layout description of your app. The .xml files for the layout will automatically be created in the res\/layout<\/code> folder. Finally, press Finish.<\/p>\n

    \"Figure<\/a>
    Figure 5. Create a new blank activity<\/figcaption><\/figure><\/p>\n

    Now you can see the final structure of the project in the following image (I have deleted the fragment_main.xml<\/code>, as we don’t really need this).<\/p>\n

    \"Figure<\/a>
    Figure 6. The final structure of the project<\/figcaption><\/figure>
    <\/div> <\/div><\/p>\n

    2. Create the layout of the Main Activity<\/span><\/h2>\n

    As I mentioned, I ‘ll try to keep it simple. Just add a SeekBar<\/code> element at the very top of your layout and a TextView<\/code> below, that will help help us keep track of its changes; all, under the concept of a RelativeLayout<\/code>, just for demonstration.<\/p>\n

    Let’s do it by opening res\/layout\/activity_main.xml<\/code> and navigating to the respective xml tab and paste the following.<\/p>\n

    activity_main.xml<\/code><\/i><\/span><\/p>\n

    <RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\"com.javacodegeeks.android.seekbar.MainActivity\" >\n\n    <SeekBar\n        android:id=\"@+id\/seekBar1\"\n        android:layout_width=\"300dp\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_alignParentTop=\"true\"\n        android:layout_marginTop=\"26dp\"\n        android:max=\"10\"\/>\n\n    <TextView\n        android:id=\"@+id\/textView1\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@+id\/seekBar1\"\n        android:layout_marginLeft=\"29dp\"\n        android:layout_marginTop=\"14dp\" \/>\n    \n<\/RelativeLayout>\n<\/pre>\n
    Except from setting our SeekBar<\/code>‘s maximum value to 10, there isn’t any special to explain, so let’s see the MainActivity<\/code> class.<\/p>\n
    3. Code the Main Activity<\/h2>\n
    Let’s first navigate to src\/com.javacodegeeks.android.textviewtest\/MainActivity.java<\/code>. Next, complete the class like this:<\/p>\n
    MainActivity.java<\/code><\/i><\/span><\/p>\n
    package com.javacodegeeks.android.seekbar;\n\nimport android.app.Activity;\nimport android.os.Bundle;\nimport android.widget.SeekBar;\nimport android.widget.SeekBar.OnSeekBarChangeListener;\nimport android.widget.TextView;\nimport android.widget.Toast;\n\npublic class MainActivity extends Activity{\n\n\t private SeekBar seekBar;\n\t private TextView textView;\n\n\t @Override\n\t protected void onCreate(Bundle savedInstanceState) {\n\t\t \n\t  super.onCreate(savedInstanceState);\n\t  setContentView(R.layout.activity_main);\n\t  initializeVariables();\n\t  \n\t  \/\/ Initialize the textview with '0'.\n\t  textView.setText(\"Covered: \" + seekBar.getProgress() + \"\/\" + seekBar.getMax());\n\t  \n\t  seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {\n\t\t  int progress = 0;\n\t\t  \n\t\t  @Override\n\t\t  public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) {\n\t\t\t  progress = progresValue;\n\t\t\t  Toast.makeText(getApplicationContext(), \"Changing seekbar's progress\", Toast.LENGTH_SHORT).show();\n\t\t  }\n\t\t\n\t\t  @Override\n\t\t  public void onStartTrackingTouch(SeekBar seekBar) {\n\t\t\t  Toast.makeText(getApplicationContext(), \"Started tracking seekbar\", Toast.LENGTH_SHORT).show();\n\t\t  }\n\t\t\n\t\t  @Override\n\t\t  public void onStopTrackingTouch(SeekBar seekBar) {\n\t\t\t  textView.setText(\"Covered: \" + progress + \"\/\" + seekBar.getMax());\n\t\t\t  Toast.makeText(getApplicationContext(), \"Stopped tracking seekbar\", Toast.LENGTH_SHORT).show();\n\t\t  }\n\t   });\n\t }\n\t \n\t \/\/ A private method to help us initialize our variables.\n\t private void initializeVariables() {\n\t\t seekBar = (SeekBar) findViewById(R.id.seekBar1);\n\t\t textView = (TextView) findViewById(R.id.textView1);\n\t }\n}\n<\/pre>\n
    Here are some points I believe need more in-depth explanation:[ulp id=’XSQzgZ7lDbTb31Tj’]<\/p>\n