How to make a vertical SeekBar in Android

Question

Can a SeekBar be vertical  I am not very good at UI design  so how can I make the  SeekBar more beautiful  please give me some templates and examples

User · Accepted Answer

Here is a very good implementation of vertical seekbar. Have a look.

http://560b.sakura.ne.jp/android/VerticalSlidebarExample.zip

And Here is my own implementation for Vertical and Inverted Seekbar based on this

https://github.com/AndroSelva/Vertical-SeekBar-Android

protected void onDraw(Canvas c) {
    c.rotate(-90);
    c.translate(-getHeight(),0);

    super.onDraw(c);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (!isEnabled()) {
        return false;
    }

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
        case MotionEvent.ACTION_UP:
            int i=0;
            i=getMax() - (int) (getMax() * event.getY() / getHeight());
            setProgress(i);
            Log.i("Progress",getProgress()+"");
            onSizeChanged(getWidth(), getHeight(), 0, 0);
            break;

        case MotionEvent.ACTION_CANCEL:
            break;
    }
    return true;
}

User · Answer

Note  it appears to me that if you change the width the thumb width does not change correctly  I didn t take the time to fix it right  i just fixed it for my case  Here is what i did  Couldn t figure out how to contact the original creator   public void setThumb Drawable thumb        if  thumb    null            thumb setCallback this               Assuming the thumb drawable is symmetric  set the thumb offset            such that the thumb will hang halfway off either edge of the            progress bar            This was orginally divided by 2  seems you have to adjust here when you adjust width          mThumbOffset    int thumb getIntrinsicHeight

User · Answer

We made a vertical SeekBar by using android rotation  270     lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout     xmlns android  http   schemas android com apk res android      android orientation  horizontal      android layout width  match parent      android layout height  match parent  gt        lt SurfaceView         android id    id camera sv preview          android layout width  match parent          android layout height  match parent   gt        lt LinearLayout         android id    id camera lv expose            android layout width  32dp          android layout height  200dp          android layout centerVertical  true          android layout alignParentRight  true          android layout marginRight  15dp          android orientation  vertical  gt            lt TextView             android id    id camera tv expose              android layout width  32dp              android layout height  20dp              android textColor   FFFFFF              android textSize  15sp              android gravity  center   gt            lt FrameLayout             android layout width  32dp              android layout height  180dp              android orientation  vertical  gt                lt SeekBar                 android id    id camera sb expose                  android layout width  180dp                  android layout height  32dp                   android layout gravity  center                  android rotation  270   gt            lt  FrameLayout gt        lt  LinearLayout gt        lt TextView         android id    id camera tv help          android layout width  wrap content          android layout height  wrap content          android layout centerHorizontal  true          android layout alignParentBottom  true          android layout marginBottom  20dp          android text   string camera tv          android textColor   FFFFFF    gt    lt  RelativeLayout gt    Screenshot for camera exposure compensation

User · Answer

Getting started  Add these lines to build gradle   dependencies       compile  com h6ah4i android widget verticalseekbar verticalseekbar 0 7 2      Usage  Java code  public class TestVerticalSeekbar extends AppCompatActivity       private SeekBar volumeControl   null         Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity test vertical seekbar            volumeControl    SeekBar  findViewById R id mySeekBar            volumeControl setOnSeekBarChangeListener new SeekBar OnSeekBarChangeListener                 int progressChanged   0               public void onProgressChanged SeekBar seekBar  int progress  boolean fromUser                    progressChanged   progress                             public void onStartTrackingTouch SeekBar seekBar                       TODO Auto-generated method stub                            public void onStopTrackingTouch SeekBar seekBar                    Toast makeText getApplicationContext     seek bar progress     progressChanged                          Toast LENGTH SHORT  show                                         Layout XML   lt  -- This library requires pair of the VerticalSeekBar and VerticalSeekBarWrapper classes -- gt   lt com h6ah4i android widget verticalseekbar VerticalSeekBarWrapper     android layout width  wrap content      android layout height  150dp  gt       lt com h6ah4i android widget verticalseekbar VerticalSeekBar         android id    id mySeekBar          android layout width  0dp          android layout height  0dp          android max  100          android progress  0          android splitTrack  false          app seekBarRotation  CW90    gt   lt  -- Rotation  CW90 or CW270 -- gt   lt  com h6ah4i android widget verticalseekbar VerticalSeekBarWrapper gt    NOTE  android splitTrack  false  is required for Android N

User · Answer

Wrap it inside a FrameLayout so that there is no Size issue      lt FrameLayout                 android layout width   dimen  20dp                  android layout marginStart   dimen  15dp                  android layout marginEnd   dimen  15dp                  android layout height  match parent                  android orientation  vertical  gt                    lt SeekBar                     android layout width  150dp                      android layout height  30dp                      android layout gravity  center                      android rotation  270    gt     lt  FrameLayout gt

User · Answer

This worked for me  just put it into any layout you want to    lt FrameLayout     android layout width  32dp      android layout height  192dp  gt        lt SeekBar         android layout width  192dp          android layout height  32dp          android layout gravity  center          android rotation  270    gt    lt  FrameLayout gt

User · Answer

When moving the thumb with an EditText  the Vertical Seekbar setProgress may not work  The following code can help        Override public synchronized void setProgress int progress        super setProgress progress       updateThumb       private void updateThumb         onSizeChanged getWidth    getHeight    0  0       This snippet code found here   https   stackoverflow com a 33064140 2447726

User · Answer

Working example  import android content Context  import android graphics Canvas  import android util AttributeSet  import android view MotionEvent   public class VerticalSeekBar extends SeekBar        public VerticalSeekBar Context context            super context              public VerticalSeekBar Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle              public VerticalSeekBar Context context  AttributeSet attrs            super context  attrs              protected void onSizeChanged int w  int h  int oldw  int oldh            super onSizeChanged h  w  oldh  oldw              Override    public synchronized void setProgress int progress      it is necessary for calling setProgress on click of a button          super setProgress progress       onSizeChanged getWidth    getHeight    0  0              Override     protected synchronized void onMeasure int widthMeasureSpec  int heightMeasureSpec            super onMeasure heightMeasureSpec  widthMeasureSpec           setMeasuredDimension getMeasuredHeight    getMeasuredWidth                protected void onDraw Canvas c            c rotate -90           c translate -getHeight    0            super onDraw c               Override     public boolean onTouchEvent MotionEvent event            if   isEnabled                  return false                     switch  event getAction                  case MotionEvent ACTION DOWN              case MotionEvent ACTION MOVE              case MotionEvent ACTION UP                  setProgress getMax   -  int   getMax     event getY     getHeight                      onSizeChanged getWidth    getHeight    0  0                   break               case MotionEvent ACTION CANCEL                  break                    return true            There  paste the code and save it  Now use it in your XML layout    lt android widget VerticalSeekBar   android id    id seekBar1    android layout width  wrap content    android layout height  200dp      gt    Make sure to create a package android widget and create VerticalSeekBar java under this package

User · Answer

I tried in many different ways  but the one which worked for me was  Use Seekbar inside FrameLayout   lt FrameLayout     android id    id VolumeLayout      android layout width  match parent      android layout height  match parent      android layout above   id MuteButton      android layout below   id volumeText      android layout centerInParent  true  gt           lt SeekBar         android id    id volume          android layout width  500dp          android layout height  60dp          android layout gravity  center          android progress  50          android secondaryProgress  40          android progressDrawable   drawable seekbar volume          android secondaryProgressTint   color tint neutral          android thumbTint   color tint neutral        gt    And in Code   Setup Pre Draw callback on Seekbar  Where you can change the Width and height of the Seekbar I did this part in c   so Code i used was              var volumeSlider   view FindViewById lt SeekBar gt  Resource Id home link volume                var volumeFrameLayout   view FindViewById lt FrameLayout gt  Resource Id linkVolumeFrameLayout                void OnPreDrawVolume object sender  ViewTreeObserver PreDrawEventArgs e                                volumeSlider ViewTreeObserver PreDraw -  OnPreDrawVolume                  var h   volumeFrameLayout Height                  volumeSlider Rotation   270 0f                  volumeSlider LayoutParameters Width   h                  volumeSlider RequestLayout                               volumeSlider ViewTreeObserver PreDraw    OnPreDrawVolume    Here i Add listener to PreDraw Event and when its triggered  I remove the PreDraw so that it doesnt go into Infinite loop   So when Pre Draw gets executed  I fetch the Height of FrameLayout and assign it to Seekbar  And set the rotation of seekbar to 270  As my seekbar is inside frame Layout and its Gravity is set as Center  I dont need to worry about the Translation  As Seekbar always stay in middle of Frame Layout   Reason i remove EventHandler is because seekbar RequestLayout    Will make this event to be executed again

User · Answer

You can do it by yourself -  it s now so difficult  Here is an example from my project  https   github com AlShevelev WizardCamera  Let start from settings  attrs xml     lt  xml version  1 0  encoding  utf-8   gt   lt resources gt       lt declare-styleable name  ExpositionBar  gt           lt attr name  button icon  format  reference    gt           lt attr name  button icon size  format  dimension    gt            lt attr name  stroke width  format  dimension    gt            lt attr name  stroke color  format  color    gt           lt attr name  button color  format  color    gt           lt attr name  button color pressed  format  color    gt            lt attr name  min value  format  float    gt           lt attr name  max value  format  float    gt       lt  declare-styleable gt   lt  resources gt    Here is a couple of utility functions   fun  lt T  Comparable lt T gt  gt T fitInRange range  Range lt T gt    T       when           this  lt  range lower - gt  range lower         this  gt  range upper - gt  range upper         else - gt  this        fun Float reduceToRange rangeFrom  Range lt Float gt   rangeTo  Range lt Float gt    Float       when           this    rangeFrom lower - gt  rangeTo lower         this    rangeFrom upper - gt  rangeTo upper         else - gt                val placeInRange    this - rangeFrom lower     rangeFrom upper - rangeFrom lower                rangeTo upper - rangeTo lower    placeInRange    rangeTo lower                   And at last  but not least - a class for vertical seek bar   class ExpositionBar  JvmOverloads constructor      context  Context      attrs  AttributeSet    null      defStyleAttr  Int   0     View context  attrs  defStyleAttr         private val drawingRect   RectF 0f  0f  0f  0f      private val drawingPaint   Paint Paint ANTI ALIAS FLAG       private val strokeWidth  Float       ColorInt     private val strokeColor  Int      ColorInt     private val buttonFillColor  Int      ColorInt     private val buttonFillColorPressed  Int      private val icon  VectorDrawable      private val valuesRange  Range lt Float gt       private var centerX   0f     private var minY   0f     private var maxY   0f      private var buttonCenterY   0f     private var buttonRadiusExt   0f     private var buttonRadiusInt   0f     private var buttonMinY   0f     private var buttonMaxY   0f     private var buttonCenterBoundsRange   Range 0f  0f       private var iconTranslationX   0f     private var iconTranslationY   0f      private var isInDragMode   false      private var onValueChangeListener    Float  - gt  Unit     null      private var oldOutputValue   Float MIN VALUE      init           val typedArray   context obtainStyledAttributes attrs  R styleable ExpositionBar           icon    typedArray getDrawable R styleable ExpositionBar button icon  as VectorDrawable         val iconSize   typedArray getDimensionPixelSize R styleable ExpositionBar button icon size  0          icon setBounds 0  0  iconSize  iconSize           strokeWidth   typedArray getDimensionPixelSize R styleable ExpositionBar stroke width  0  toFloat           drawingPaint strokeWidth   strokeWidth          strokeColor   typedArray getColor R styleable ExpositionBar stroke color  Color WHITE          buttonFillColor   typedArray getColor R styleable ExpositionBar button color  Color BLACK          buttonFillColorPressed   typedArray getColor R styleable ExpositionBar button color pressed  Color BLUE           val minValue   typedArray getFloat R styleable ExpositionBar min value  0f          val maxValue   typedArray getFloat R styleable ExpositionBar max value  0f          valuesRange   Range minValue  maxValue           typedArray recycle              override fun onSizeChanged w  Int  h  Int  oldw  Int  oldh  Int            super onSizeChanged w  h  oldw  oldh           drawingRect right   width toFloat           drawingRect bottom   height toFloat            buttonCenterY   drawingRect centerY            recalculateDrawingValues              override fun onDraw canvas  Canvas            drawingPaint color   strokeColor         drawingPaint style   Paint Style STROKE             Draw the center line         canvas drawLine centerX  minY  centerX  buttonMinY  drawingPaint          canvas drawLine centerX  buttonMaxY  centerX  maxY  drawingPaint              Draw the button         canvas drawCircle centerX  buttonCenterY  buttonRadiusExt  drawingPaint          drawingPaint style   Paint Style FILL         drawingPaint color   if isInDragMode  buttonFillColorPressed else buttonFillColor         canvas drawCircle centerX  buttonCenterY  buttonRadiusInt  drawingPaint              Draw button icon         canvas translate iconTranslationX  iconTranslationY          icon draw canvas          canvas translate -iconTranslationX  -iconTranslationY              SuppressLint  ClickableViewAccessibility       override fun onTouchEvent event  MotionEvent   Boolean           if  isEnabled                return false                    when event actionMasked                MotionEvent ACTION DOWN - gt                    if isButtonHit event y                        isInDragMode   true                     invalidate                                               MotionEvent ACTION MOVE - gt                    if isInDragMode                        buttonCenterY   event y fitInRange buttonCenterBoundsRange                      recalculateDrawingValues                       invalidate                        val outputValue   buttonCenterY reduceToRange buttonCenterBoundsRange  valuesRange                      if  outputValue    oldOutputValue                            onValueChangeListener  invoke outputValue                          oldOutputValue   outputValue                                                                   MotionEvent ACTION UP              MotionEvent ACTION CANCEL - gt                    isInDragMode   false                 invalidate                                   return true            fun setOnValueChangeListener listener    Float  - gt  Unit              onValueChangeListener   listener            private fun recalculateDrawingValues             centerX   drawingRect left   drawingRect width   2         minY   drawingRect top         maxY   drawingRect bottom          buttonRadiusExt   drawingRect width     2 - strokeWidth   2         buttonRadiusInt   buttonRadiusExt - strokeWidth   2         buttonMinY   buttonCenterY - buttonRadiusExt         buttonMaxY   buttonCenterY   buttonRadiusExt          val buttonCenterMinY   minY   buttonRadiusExt   strokeWidth   2         val buttonCenterMaxY   maxY - buttonRadiusExt - strokeWidth   2         buttonCenterBoundsRange   Range buttonCenterMinY  buttonCenterMaxY           iconTranslationX   centerX - icon bounds width     2         iconTranslationY   buttonCenterY - icon bounds height     2            private fun isButtonHit y  Float   Boolean           return y  gt   buttonMinY  amp  amp  y  lt   buttonMaxY           You can use it as shown here    lt com shevelev wizard camera main activity view widgets ExpositionBar     android id    id expositionBar      android layout width   dimen mainButtonSize      android layout height  300dp      android layout gravity  end center vertical       android layout marginEnd   dimen marginNormal      android layout marginBottom  26dp       app button icon     drawable ic brightness      app button icon size     dimen toolButtonIconSize      app stroke width     dimen strokeWidthNormal      app stroke color     color mainButtonsForeground      app button color     color mainButtonsBackground      app button color pressed     color mainButtonsBackgroundPressed      app min value  -100      app max value  100    gt    Voila

User · Answer

Try this   import android content Context  import android graphics Canvas  import android support annotation NonNull  import android util AttributeSet  import android view MotionEvent  import android widget SeekBar          Implementation of an easy vertical SeekBar  based on the normal SeekBar      public class VerticalSeekBar extends SeekBar                  The angle by which the SeekBar view should be rotated              private static final int ROTATION ANGLE   -90                  A change listener registrating start and stop of tracking  Need an own listener because the listener in SeekBar        is private              private OnSeekBarChangeListener mOnSeekBarChangeListener                  Standard constructor to be implemented for all views                 param context The Context the view is running in  through which it can access the current theme  resources  etc          see android view View View Context              public VerticalSeekBar final Context context            super context                         Standard constructor to be implemented for all views                 param context The Context the view is running in  through which it can access the current theme  resources  etc          param attrs   The attributes of the XML tag that is inflating the view          see android view View View Context  AttributeSet              public VerticalSeekBar final Context context  final AttributeSet attrs            super context  attrs                         Standard constructor to be implemented for all views                 param context  The Context the view is running in  through which it can access the current theme  resources  etc          param attrs    The attributes of the XML tag that is inflating the view          param defStyle An attribute in the current theme that contains a reference to a style resource that supplies default                        values for the view  Can be 0 to not look for defaults          see android view View View Context  AttributeSet  int              public VerticalSeekBar final Context context  final AttributeSet attrs  final int defStyle            super context  attrs  defStyle                         non-Javadoc    see to overridden               Override     protected final void onSizeChanged final int width  final int height  final int oldWidth  final int oldHeight            super onSizeChanged height  width  oldHeight  oldWidth                         non-Javadoc    see to overridden               Override     protected final synchronized void onMeasure final int widthMeasureSpec  final int heightMeasureSpec            super onMeasure heightMeasureSpec  widthMeasureSpec           setMeasuredDimension getMeasuredHeight    getMeasuredWidth                           non-Javadoc    see to overridden               Override     protected final void onDraw  NonNull final Canvas c            c rotate ROTATION ANGLE           c translate -getHeight    0            super onDraw c                         non-Javadoc    see to overridden               Override     public final void setOnSeekBarChangeListener final OnSeekBarChangeListener listener               Do not use super for the listener  as this would not set the fromUser flag properly         mOnSeekBarChangeListener   listener                        non-Javadoc    see to overridden               Override     public final boolean onTouchEvent  NonNull final MotionEvent event            if   isEnabled                  return false                     switch  event getAction              case MotionEvent ACTION DOWN              setProgressInternally getMax   -  int   getMax     event getY     getHeight     true               if  mOnSeekBarChangeListener    null                    mOnSeekBarChangeListener onStartTrackingTouch this                             break           case MotionEvent ACTION MOVE              setProgressInternally getMax   -  int   getMax     event getY     getHeight     true               break           case MotionEvent ACTION UP              setProgressInternally getMax   -  int   getMax     event getY     getHeight     true               if  mOnSeekBarChangeListener    null                    mOnSeekBarChangeListener onStopTrackingTouch this                             break           case MotionEvent ACTION CANCEL              if  mOnSeekBarChangeListener    null                    mOnSeekBarChangeListener onStopTrackingTouch this                             break           default              break                     return true                        Set the progress by the user   Unfortunately  Seekbar setProgressInternally int  boolean  is not accessible                  param progress the progress          param fromUser flag indicating if the change was done by the user              public final void setProgressInternally final int progress  final boolean fromUser            if  progress    getProgress                  super setProgress progress               if  mOnSeekBarChangeListener    null                    mOnSeekBarChangeListener onProgressChanged this  progress  fromUser                                   onSizeChanged getWidth    getHeight    0  0                         non-Javadoc    see to overridden               Override     public final void setProgress final int progress            setProgressInternally progress  false

User · Answer

For API 11 and later  can use seekbar s XML attributes android rotation  270   for vertical effect    lt SeekBar android id    id seekBar1  android layout width  match parent  android layout height  wrap content  android rotation  270   gt   For older API level  ex API10   only use Selva s answer    https   github com AndroSelva Vertical-SeekBar-Android

User · Answer

Try    lt RelativeLayout 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   gt     lt SeekBar      android id    id seekBar1       android layout width  match parent       android layout height  wrap content       android rotation  270         gt     lt  RelativeLayout gt

User · Answer

I used Selva s solution but had two kinds of issues    OnSeekbarChangeListener did not work properly Setting progress programmatically did not work properly    I fixed these two issues  You can find the solution  within my own project package  at  https   github com jeisfeld Augendiagnose blob master AugendiagnoseIdea augendiagnoseLib src main java de jeisfeld augendiagnoselib components VerticalSeekBar java

User · Answer

In my case  I used an ordinary seekBar and just flipped out the layout   seekbark layout xml - my layout that containts seekbar which we need to make vertical    lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout     xmlns android  http   schemas android com apk res android      android id    id rootView      android layout width  match parent      android layout height  match parent  gt    lt SeekBar     android id    id seekBar      android layout width  match parent      android layout height  50dp      android layout alignParentBottom  true   gt    lt  RelativeLayout gt    activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout     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      tools context  com vgfit seekbarexample MainActivity  gt    lt View     android id    id headerView      android layout width  match parent      android layout height  100dp      android background   color colorAccent   gt    lt View     android id    id bottomView      android layout width  match parent      android layout height  100dp      android layout alignParentBottom  true      android background   color colorAccent   gt    lt include     layout   layout seekbar layout      android layout width  match parent      android layout height  match parent      android layout above   id bottomView      android layout below   id headerView   gt     lt  RelativeLayout gt    And in MainActivity I rotate seekbar layout   import android os Bundle import android support v7 app AppCompatActivity import android widget RelativeLayout import kotlinx android synthetic main seekbar layout     class MainActivity   AppCompatActivity      override fun onCreate savedInstanceState  Bundle         super onCreate savedInstanceState      setContentView R layout activity main       rootView post           val w   rootView width         val h   rootView height          rootView rotation   270 0f         rootView translationX     w - h    2  toFloat           rootView translationY     h - w    2  toFloat            val lp   rootView layoutParams as RelativeLayout LayoutParams         lp height   w         lp width   h         rootView requestLayout               As a result we have necessary vertical seekbar

[android] How to make a vertical SeekBar in Android?

Examples related to android

Examples related to seekbar