Board index » Android Tutorials with Source Code » Novice Tutorials

Skip to content

Decorated and Animated SeekBar Tutorial

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...
Post a reply

Decorated and Animated SeekBar Tutorial

Postby pskink » Sat Feb 06, 2010 11:33 am

[align=center]Decorating SeekBar[/align]



What you will learn: You will learn how to decorate SeekBar, and in particular how to create custom Drawable that uses custom Animation in order to make some nice animations.



:?: Problems/Questions: Write it right below...



Difficulty: 2 of 5


Description:

0.) The easiest way to decorate SeekBar is to create an custom Drawable.

Create a class called AnimSeekBarDrawable.java:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. public class AnimSeekBarDrawable extends Drawable implements Runnable {
  3.  
  4. }
  5.  
  6.  
Parsed in 0.030 seconds, using GeSHi 1.0.8.4



1.) Now lets fill it with code: create some constants and fields.

Constants STATE_* will be used later on to check what state our Drawable is in.

Field mText contains text to be drawn over our Drawable.

Field mTextXScale ranges from 0 to 1: when set to 0 mText will be drawn on the left side (with some small left padding), when set to 1 mText will be drawn on the right side (with some small right padding), any other values move mText somewhere between left and right side - proportionally to mTextXScale (e.g. 0.5 - center).

Fields mPaint and mOutlinePaint are used for mText drawing.

Field mAnimation is our custom Animation.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         static final int[] STATE_FOCUSED = {android.R.attr.state_focused};
  3.  
  4.         static final int[] STATE_PRESSED = {android.R.attr.state_pressed};
  5.  
  6.                
  7.  
  8.         private static final long DELAY = 30;
  9.  
  10.         private static final String TAG = "AnimSeekBarDrawable";
  11.  
  12.         private String mText;
  13.  
  14.         private float mTextWidth;
  15.  
  16.         private Drawable mProgress;
  17.  
  18.         private Paint mPaint;
  19.  
  20.         private Paint mOutlinePaint;
  21.  
  22.         private float mTextXScale;
  23.  
  24.         private int mDelta;
  25.  
  26.         private ScrollAnimation mAnimation;
  27.  
  28.  
Parsed in 0.031 seconds, using GeSHi 1.0.8.4


2.) Initialize fields: mProgress is SeekBar's std progress Drawable and will be used in draw method.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         public AnimSeekBarDrawable(Resources res, boolean labelOnRight) {
  3.  
  4.                 mProgress = res.getDrawable(android.R.drawable.progress_horizontal);
  5.  
  6.                 mText = "";
  7.  
  8.                 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  9.  
  10.                 mPaint.setTypeface(Typeface.DEFAULT_BOLD);
  11.  
  12.                 mPaint.setTextSize(16);
  13.  
  14.                 mOutlinePaint = new Paint(mPaint);
  15.  
  16.                 mOutlinePaint.setStyle(Style.STROKE);
  17.  
  18.                 mOutlinePaint.setStrokeWidth(4);
  19.  
  20.                 mOutlinePaint.setMaskFilter(new BlurMaskFilter(1, Blur.NORMAL));
  21.  
  22.                 mTextXScale = labelOnRight? 1 : 0;
  23.  
  24.                 mAnimation = new ScrollAnimation();
  25.  
  26.         }
  27.  
  28.  
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


3.) Now when our Drawable gets resized we need to resize mProgress too.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         @Override
  3.  
  4.         protected void onBoundsChange(Rect bounds) {
  5.  
  6.                 mProgress.setBounds(bounds);
  7.  
  8.         }
  9.  
  10.  
Parsed in 0.034 seconds, using GeSHi 1.0.8.4


4.) Our Drawable will be "stateful": which means that it will be presented in different ways when pressed/focused and in normal state. Local variable "active" indicates if state is pressed/focused (true) or normal (false).

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         @Override
  3.  
  4.         protected boolean onStateChange(int[] state) {
  5.  
  6.                 boolean active = StateSet.stateSetMatches(STATE_FOCUSED, state) | StateSet.stateSetMatches(STATE_PRESSED, state);
  7.  
  8.                 mOutlinePaint.setColor(active? 0xffffffff : 0xffbbbbbb);
  9.  
  10.                 mPaint.setColor(active? 0xff000000 : 0xff606060);
  11.  
  12.                 invalidateSelf();
  13.  
  14.                 return false;
  15.  
  16.         }
  17.  
  18.  
  19.  
  20.         @Override
  21.  
  22.         public boolean isStateful() {
  23.  
  24.                 return true;
  25.  
  26.         }
  27.  
  28.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


5.) Now animations start! If we moved our finger to the left (level < 4000) lets start animation from the left to the right, so that mText is always visible. The similar amination is started if we move our finger to the right (lefel > 6000), but in this case animation starts from the right to the left.

Method startScrolling calls mAnimation.startScrolling(mTextXScale, to) but it doesn't do any magic (we need to do animation drawing by ourselves), so we call scheduleSelf(this, SystemClock.uptimeMillis() + DELAY) which in DELAY ms call run method.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         @Override
  3.  
  4.         protected boolean onLevelChange(int level) {
  5.  
  6.                 mText = (level / 100) + " %";
  7.  
  8.                 mTextWidth = mOutlinePaint.measureText(mText);
  9.  
  10.  
  11.  
  12.                 if (level < 4000 && mDelta <= 0) {
  13.  
  14.                         mDelta = 1;
  15.  
  16.                         // move to the right
  17.  
  18.                         startScrolling(1);
  19.  
  20.                 } else
  21.  
  22.                 if (level > 6000 && mDelta >= 0) {
  23.  
  24.                         mDelta = -1;
  25.  
  26.                         // move to the left
  27.  
  28.                         startScrolling(0);
  29.  
  30.                 }
  31.  
  32.                
  33.  
  34.                 return mProgress.setLevel(level);
  35.  
  36.         }
  37.  
  38.        
  39.  
  40.         private void startScrolling(int to) {
  41.  
  42.                 mAnimation.startScrolling(mTextXScale, to);
  43.  
  44.                 scheduleSelf(this, SystemClock.uptimeMillis() + DELAY);
  45.  
  46.         }
  47.  
  48.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


6.) Here we decorate our SeekBar: first draw original SeekBar's progress drawable. Then check if we are in pending animation: if so we need to update our animation with the current time and get its current value.

Finally we draw our mText according to mTextXScale.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         @Override
  3.  
  4.         public void draw(Canvas canvas) {
  5.  
  6.                 mProgress.draw(canvas);
  7.  
  8.  
  9.  
  10.                 if (mAnimation.hasStarted() && !mAnimation.hasEnded()) {
  11.  
  12.                         // pending animation
  13.  
  14.                         mAnimation.getTransformation(AnimationUtils.currentAnimationTimeMillis(), null);
  15.  
  16.                         mTextXScale = mAnimation.getCurrent();
  17.  
  18.                 }
  19.  
  20.                
  21.  
  22.                 Rect bounds = getBounds();
  23.  
  24.                 float x = 6 + mTextXScale * (bounds.width() - mTextWidth - 6 - 6);
  25.  
  26.                 float y = (bounds.height() + mPaint.getTextSize()) / 2;
  27.  
  28.                 canvas.drawText(mText, x, y, mOutlinePaint);
  29.  
  30.                 canvas.drawText(mText, x, y, mPaint);
  31.  
  32.         }
  33.  
  34.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


7.) Abstract methods we need to override: no magic here.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         @Override
  3.  
  4.         public int getOpacity() {
  5.  
  6.                 return PixelFormat.TRANSLUCENT;
  7.  
  8.         }
  9.  
  10.  
  11.  
  12.         @Override
  13.  
  14.         public void setAlpha(int alpha) {
  15.  
  16.         }
  17.  
  18.  
  19.  
  20.         @Override
  21.  
  22.         public void setColorFilter(ColorFilter cf) {
  23.  
  24.         }
  25.  
  26.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


8.) Method that will be called as the result of scheduleSelf(this, SystemClock.uptimeMillis() + DELAY). It checks if we have pending animation: if so we call scheduleSelf again in order to make next step of animation. Finally we call invalidateSelf() for repainting our Drawable.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         public void run() {
  3.  
  4.                 mAnimation.getTransformation(AnimationUtils.currentAnimationTimeMillis(), null);
  5.  
  6.                 // close interpolation of mTextX
  7.  
  8.                 mTextXScale = mAnimation.getCurrent();
  9.  
  10.                 if (!mAnimation.hasEnded()) {
  11.  
  12.                         scheduleSelf(this, SystemClock.uptimeMillis() + DELAY);
  13.  
  14.                 }
  15.  
  16.                 invalidateSelf();
  17.  
  18.         }
  19.  
  20.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


9.) This is our custom Animation: nothing special here, we just need to update mCurrent in applyTransformation method (it's called by mAnimation.getTransformation method).

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         static class ScrollAnimation extends Animation {
  3.  
  4.                 private static final long DURATION = 750;
  5.  
  6.                 private float mFrom;
  7.  
  8.                 private float mTo;
  9.  
  10.                 private float mCurrent;
  11.  
  12.                
  13.  
  14.                 public ScrollAnimation() {
  15.  
  16.                         setDuration(DURATION);
  17.  
  18.                         setInterpolator(new DecelerateInterpolator());
  19.  
  20.                 }
  21.  
  22.                
  23.  
  24.                 public void startScrolling(float from, float to) {
  25.  
  26.                         mFrom = from;
  27.  
  28.                         mTo = to;
  29.  
  30.                         startNow();
  31.  
  32.                 }
  33.  
  34.                
  35.  
  36.                 @Override
  37.  
  38.                 protected void applyTransformation(float interpolatedTime, Transformation t) {
  39.  
  40.                         mCurrent = mFrom + (mTo - mFrom) * interpolatedTime;
  41.  
  42.                 }
  43.  
  44.                
  45.  
  46.                 public float getCurrent() {
  47.  
  48.                         return mCurrent;
  49.  
  50.                 }
  51.  
  52.         }
  53.  
  54.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4



The Full Source:

file main.xml

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <TableLayout
  7.  
  8.         xmlns:android="http://schemas.android.com/apk/res/android"
  9.  
  10.    android:layout_width="fill_parent"
  11.  
  12.    android:layout_height="wrap_content"
  13.  
  14.    android:stretchColumns="1"
  15.  
  16. >
  17.  
  18.         <TableRow>
  19.  
  20.                 <TextView
  21.  
  22.                     android:padding="4dip"
  23.  
  24.                     android:layout_gravity="center_vertical|right"
  25.  
  26.                     android:textStyle="bold"
  27.  
  28.                     android:text="voltage:"
  29.  
  30.                 />
  31.  
  32.                 <SeekBar  
  33.  
  34.                     android:id="@+id/seek_bar0"
  35.  
  36.                     android:padding="4dip"
  37.  
  38.                 />
  39.  
  40.         </TableRow>
  41.  
  42.         <TableRow>
  43.  
  44.                 <TextView
  45.  
  46.                     android:padding="4dip"
  47.  
  48.                     android:layout_gravity="center_vertical|right"
  49.  
  50.                     android:textStyle="bold"
  51.  
  52.                     android:text="pressure:"
  53.  
  54.                 />
  55.  
  56.                 <SeekBar  
  57.  
  58.                     android:id="@+id/seek_bar1"
  59.  
  60.                     android:padding="4dip"
  61.  
  62.                 />
  63.  
  64.         </TableRow>
  65.  
  66.         <TableRow>
  67.  
  68.                 <TextView
  69.  
  70.                     android:padding="4dip"
  71.  
  72.                     android:layout_gravity="center_vertical|right"
  73.  
  74.                     android:textStyle="bold"
  75.  
  76.                     android:text="temperature:"
  77.  
  78.                 />
  79.  
  80.                 <SeekBar  
  81.  
  82.                     android:id="@+id/seek_bar2"
  83.  
  84.                     android:padding="4dip"
  85.  
  86.                 />
  87.  
  88.         </TableRow>
  89.  
  90. </TableLayout>
  91.  
  92.  
Parsed in 0.005 seconds, using GeSHi 1.0.8.4

file AnimSeekBarTest.java

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. package org.pskink.animseekbar;
  3.  
  4.  
  5.  
  6. import android.app.Activity;
  7.  
  8. import android.content.res.Resources;
  9.  
  10. import android.graphics.drawable.Drawable;
  11.  
  12. import android.os.Bundle;
  13.  
  14. import android.widget.SeekBar;
  15.  
  16.  
  17.  
  18. public class AnimSeekBarTest extends Activity {
  19.  
  20.         @Override
  21.  
  22.         public void onCreate(Bundle savedInstanceState) {
  23.  
  24.                 super.onCreate(savedInstanceState);
  25.  
  26.                 setContentView(R.layout.main);
  27.  
  28.                 setup((SeekBar) findViewById(R.id.seek_bar0), 25);
  29.  
  30.                 setup((SeekBar) findViewById(R.id.seek_bar1), 50);
  31.  
  32.                 setup((SeekBar) findViewById(R.id.seek_bar2), 75);
  33.  
  34.         }
  35.  
  36.    
  37.  
  38.         private void setup(SeekBar seekBar, int v) {
  39.  
  40.                 Resources res = getResources();
  41.  
  42.                 Drawable d = new AnimSeekBarDrawable(res, v < seekBar.getMax() / 2);
  43.  
  44.                 seekBar.setProgressDrawable(d);
  45.  
  46.                 seekBar.setProgress(v);
  47.  
  48.         }
  49.  
  50. }
  51.  
  52.  
Parsed in 0.039 seconds, using GeSHi 1.0.8.4

file AnimSeekBarDrawable.java

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. package org.pskink.animseekbar;
  3.  
  4.  
  5.  
  6. import android.content.res.Resources;
  7.  
  8. import android.graphics.BlurMaskFilter;
  9.  
  10. import android.graphics.Canvas;
  11.  
  12. import android.graphics.ColorFilter;
  13.  
  14. import android.graphics.Paint;
  15.  
  16. import android.graphics.PixelFormat;
  17.  
  18. import android.graphics.Rect;
  19.  
  20. import android.graphics.Typeface;
  21.  
  22. import android.graphics.BlurMaskFilter.Blur;
  23.  
  24. import android.graphics.Paint.Style;
  25.  
  26. import android.graphics.drawable.Drawable;
  27.  
  28. import android.os.SystemClock;
  29.  
  30. import android.util.Log;
  31.  
  32. import android.util.StateSet;
  33.  
  34. import android.view.animation.Animation;
  35.  
  36. import android.view.animation.AnimationUtils;
  37.  
  38. import android.view.animation.DecelerateInterpolator;
  39.  
  40. import android.view.animation.Transformation;
  41.  
  42.  
  43.  
  44.        
  45.  
  46. public class AnimSeekBarDrawable extends Drawable implements Runnable {
  47.  
  48.         static final int[] STATE_FOCUSED = {android.R.attr.state_focused};
  49.  
  50.         static final int[] STATE_PRESSED = {android.R.attr.state_pressed};
  51.  
  52.                
  53.  
  54.         private static final long DELAY = 30;
  55.  
  56.         private static final String TAG = "AnimSeekBarDrawable";
  57.  
  58.         private String mText;
  59.  
  60.         private float mTextWidth;
  61.  
  62.         private Drawable mProgress;
  63.  
  64.         private Paint mPaint;
  65.  
  66.         private Paint mOutlinePaint;
  67.  
  68.         private float mTextXScale;
  69.  
  70.         private int mDelta;
  71.  
  72.         private ScrollAnimation mAnimation;
  73.  
  74.  
  75.  
  76.         public AnimSeekBarDrawable(Resources res, boolean labelOnRight) {
  77.  
  78.                 mProgress = res.getDrawable(android.R.drawable.progress_horizontal);
  79.  
  80.                 mText = "";
  81.  
  82.                 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  83.  
  84.                 mPaint.setTypeface(Typeface.DEFAULT_BOLD);
  85.  
  86.                 mPaint.setTextSize(16);
  87.  
  88.                 mOutlinePaint = new Paint(mPaint);
  89.  
  90.                 mOutlinePaint.setStyle(Style.STROKE);
  91.  
  92.                 mOutlinePaint.setStrokeWidth(4);
  93.  
  94.                 mOutlinePaint.setMaskFilter(new BlurMaskFilter(1, Blur.NORMAL));
  95.  
  96.                 mTextXScale = labelOnRight? 1 : 0;
  97.  
  98.                 mAnimation = new ScrollAnimation();
  99.  
  100.         }
  101.  
  102.  
  103.  
  104.         @Override
  105.  
  106.         protected void onBoundsChange(Rect bounds) {
  107.  
  108.                 mProgress.setBounds(bounds);
  109.  
  110.         }
  111.  
  112.        
  113.  
  114.         @Override
  115.  
  116.         protected boolean onStateChange(int[] state) {
  117.  
  118.                 boolean active = StateSet.stateSetMatches(STATE_FOCUSED, state) | StateSet.stateSetMatches(STATE_PRESSED, state);
  119.  
  120.                 mOutlinePaint.setColor(active? 0xffffffff : 0xffbbbbbb);
  121.  
  122.                 mPaint.setColor(active? 0xff000000 : 0xff606060);
  123.  
  124.                 invalidateSelf();
  125.  
  126.                 return false;
  127.  
  128.         }
  129.  
  130.        
  131.  
  132.         @Override
  133.  
  134.         public boolean isStateful() {
  135.  
  136.                 return true;
  137.  
  138.         }
  139.  
  140.        
  141.  
  142.         @Override
  143.  
  144.         protected boolean onLevelChange(int level) {
  145.  
  146.                 mText = (level / 100) + " %";
  147.  
  148.                 mTextWidth = mOutlinePaint.measureText(mText);
  149.  
  150.  
  151.  
  152.                 if (level < 4000 && mDelta <= 0) {
  153.  
  154.                         mDelta = 1;
  155.  
  156.                         // move to the right
  157.  
  158.                         startScrolling(1);
  159.  
  160.                 } else
  161.  
  162.                 if (level > 6000 && mDelta >= 0) {
  163.  
  164.                         mDelta = -1;
  165.  
  166.                         // move to the left
  167.  
  168.                         startScrolling(0);
  169.  
  170.                 }
  171.  
  172.                
  173.  
  174.                 return mProgress.setLevel(level);
  175.  
  176.         }
  177.  
  178.        
  179.  
  180.         private void startScrolling(int to) {
  181.  
  182.                 mAnimation.startScrolling(mTextXScale, to);
  183.  
  184.                 scheduleSelf(this, SystemClock.uptimeMillis() + DELAY);
  185.  
  186.         }
  187.  
  188.  
  189.  
  190.         @Override
  191.  
  192.         public void draw(Canvas canvas) {
  193.  
  194.                 mProgress.draw(canvas);
  195.  
  196.  
  197.  
  198.                 if (mAnimation.hasStarted() && !mAnimation.hasEnded()) {
  199.  
  200.                         // pending animation
  201.  
  202.                         mAnimation.getTransformation(AnimationUtils.currentAnimationTimeMillis(), null);
  203.  
  204.                         mTextXScale = mAnimation.getCurrent();
  205.  
  206.                 }
  207.  
  208.                
  209.  
  210.                 Rect bounds = getBounds();
  211.  
  212.                 float x = 6 + mTextXScale * (bounds.width() - mTextWidth - 6 - 6);
  213.  
  214.                 float y = (bounds.height() + mPaint.getTextSize()) / 2;
  215.  
  216.                 canvas.drawText(mText, x, y, mOutlinePaint);
  217.  
  218.                 canvas.drawText(mText, x, y, mPaint);
  219.  
  220.         }
  221.  
  222.  
  223.  
  224.         @Override
  225.  
  226.         public int getOpacity() {
  227.  
  228.                 return PixelFormat.TRANSLUCENT;
  229.  
  230.         }
  231.  
  232.  
  233.  
  234.         @Override
  235.  
  236.         public void setAlpha(int alpha) {
  237.  
  238.         }
  239.  
  240.  
  241.  
  242.         @Override
  243.  
  244.         public void setColorFilter(ColorFilter cf) {
  245.  
  246.         }
  247.  
  248.  
  249.  
  250.         public void run() {
  251.  
  252.                 mAnimation.getTransformation(AnimationUtils.currentAnimationTimeMillis(), null);
  253.  
  254.                 // close interpolation of mTextX
  255.  
  256.                 mTextXScale = mAnimation.getCurrent();
  257.  
  258.                 if (!mAnimation.hasEnded()) {
  259.  
  260.                         scheduleSelf(this, SystemClock.uptimeMillis() + DELAY);
  261.  
  262.                 }
  263.  
  264.                 invalidateSelf();
  265.  
  266.         }
  267.  
  268.        
  269.  
  270.         static class ScrollAnimation extends Animation {
  271.  
  272.                 private static final long DURATION = 750;
  273.  
  274.                 private float mFrom;
  275.  
  276.                 private float mTo;
  277.  
  278.                 private float mCurrent;
  279.  
  280.                
  281.  
  282.                 public ScrollAnimation() {
  283.  
  284.                         setDuration(DURATION);
  285.  
  286.                         setInterpolator(new DecelerateInterpolator());
  287.  
  288.                 }
  289.  
  290.                
  291.  
  292.                 public void startScrolling(float from, float to) {
  293.  
  294.                         mFrom = from;
  295.  
  296.                         mTo = to;
  297.  
  298.                         startNow();
  299.  
  300.                 }
  301.  
  302.                
  303.  
  304.                 @Override
  305.  
  306.                 protected void applyTransformation(float interpolatedTime, Transformation t) {
  307.  
  308.                         mCurrent = mFrom + (mTo - mFrom) * interpolatedTime;
  309.  
  310.                 }
  311.  
  312.                
  313.  
  314.                 public float getCurrent() {
  315.  
  316.                         return mCurrent;
  317.  
  318.                 }
  319.  
  320.         }
  321.  
  322. }
  323.  
  324.  
Parsed in 0.055 seconds, using GeSHi 1.0.8.4


[align=center]Thats it :)[/align]

Regards,
Attachments
AnimSeekBar.tar.gz
Complete eclipse project with .apk in bin folder
(15.46 KiB) Downloaded 526 times
device1.png
device1.png (14.98 KiB) Viewed 18594 times
device.png
device.png (15.07 KiB) Viewed 18594 times
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm
Top
Top

Postby darolla » Mon Mar 01, 2010 10:40 pm

funny one :)
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany
Top

Postby pskink » Tue Mar 02, 2010 8:19 am

darolla wrote:funny one :)


not only funny, but somehow useful

my [A]HSV color picker uses this feature:

http://www.anddev.org/announce_color_pi ... 10771.html
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm
Top

Postby kec6227 » Fri Apr 16, 2010 3:07 pm

I don't know if this is cheating, and it may be less efficient, but I wanted to display a textview showing the progress of my seekbar. However, all I did was use a relativelayout with a textview in the same place as my seekbar. Then implement the onSeekbarChangeListener.

If you also wanted to decorate with colors, drawables, etc, you can use an xml layout. I used the following xml for a red progress background. Just put the xml in your drawable folder and set it to the progress drawable of the seekbar.

I got this from android's stock drawables for the progress bar and just modified the progress to show the red I want.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  4.  
  5.    
  6.  
  7.     <item android:id="@+id/background">
  8.  
  9.         <shape>
  10.  
  11.             <corners android:radius="5dip" />
  12.  
  13.             <gradient
  14.  
  15.                    android:startColor="#ff9d9e9d"
  16.  
  17.                    android:centerColor="#ff5a5d5a"
  18.  
  19.                    android:centerY="0.75"
  20.  
  21.                    android:endColor="#ff747674"
  22.  
  23.                    android:angle="270"
  24.  
  25.            />
  26.  
  27.         </shape>
  28.  
  29.     </item>
  30.  
  31.    
  32.  
  33.     <item android:id="@+id/secondaryProgress">
  34.  
  35.         <clip>
  36.  
  37.             <shape>
  38.  
  39.                 <corners android:radius="5dip" />
  40.  
  41.                 <gradient
  42.  
  43.                        android:startColor="#80ffd300"
  44.  
  45.                        android:centerColor="#80ffb600"
  46.  
  47.                        android:centerY="0.75"
  48.  
  49.                        android:endColor="#a0ffcb00"
  50.  
  51.                        android:angle="270"
  52.  
  53.                />
  54.  
  55.             </shape>
  56.  
  57.         </clip>
  58.  
  59.     </item>
  60.  
  61.    
  62.  
  63.     <item android:id="@+id/progress">
  64.  
  65.         <clip>
  66.  
  67.             <shape>
  68.  
  69.                 <corners android:radius="5dip" />
  70.  
  71.                 <gradient
  72.  
  73.                        android:startColor="#FF6666"
  74.  
  75.                        android:centerColor="#FF0000"
  76.  
  77.                        android:centerY="0.75"
  78.  
  79.                        android:endColor="#8B0000"
  80.  
  81.                        android:angle="270"
  82.  
  83.                />
  84.  
  85.             </shape>
  86.  
  87.         </clip>
  88.  
  89.     </item>
  90.  
  91.    
  92.  
  93. </layer-list>
Parsed in 0.007 seconds, using GeSHi 1.0.8.4
kec6227
Developer
Developer
 
Posts: 30
Joined: Fri Jul 24, 2009 7:31 pm
Top

Re: Decorated and Animated SeekBar Tutorial

Postby ranjanarr » Wed Aug 18, 2010 6:14 am

How to display round thumbs?
ranjanarr
Freshman
Freshman
 
Posts: 2
Joined: Thu Aug 05, 2010 9:24 pm
Top

Re: Decorated and Animated SeekBar Tutorial

Postby Zeba Momin » Tue Apr 26, 2011 11:08 am

Hi,
I too wish to show a round thumb for my seekbar, has anyone been able to achieve it?
I cannot use an image/drawable for the thumb, I only have the color code to be set for the seekbar thumb.
Please help.
Thank you.
Zeba Momin
Developer
Developer
 
Posts: 49
Joined: Thu Sep 17, 2009 6:53 am
Top
Top

Re: Decorated and Animated SeekBar Tutorial

Postby strider2023 » Tue Jun 14, 2011 8:17 am

ranjanarr and Zeba Momin, check this link...

http://www.mokasocial.com/2011/02/creat ... n-android/
strider2023
Senior Developer
Senior Developer
 
Posts: 126
Joined: Tue Mar 02, 2010 6:34 am
Location: Chennai, India
Top
Top
Post a reply

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 4 guests

Board index The team • Delete all board cookies • All times are UTC + 1 hour