CODEWITHSUNDEEP
javaandroidandroid-layout
Robin Singla
Robin Singla

Reputation: 71

Vertical slider in android using google material library

I have this google material slider aligned in horizontal direction:

<com.google.android.material.slider.Slider
    android:id="@+id/slider_tilt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/tilt_btn"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginHorizontal="65dp"
    android:valueFrom="-4"
    android:valueTo="4"
    android:stepSize="0.5"/>

but I want it to be in vertical direction and aligned to the left of the screen. I tried rotating it but then couldn't get left side alignment, please let me know if there is a way out.

Upvotes: 7

Views: 4223

Answers (3)

Dmitry
Dmitry

Reputation: 1

I used the following code (kotlin) it works however the value above the slider is still shown in the horizontal position

I just disabled it, but I think if I spend more time it can be fixed

class VerticalSlider @JvmOverloads
constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
    : com.google.android.material.slider.Slider(context, attrs, defStyleAttr) {
    
    
    override fun onDraw(c: Canvas) {
        c.rotate(270f)
        c.translate(-height.toFloat(), 0f)
        super.onDraw(c)
    }
    
    
    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(h, w, oldh, oldw)
    }
    
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec)
        setMeasuredDimension(measuredHeight, measuredWidth);
    }
    
    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {
        
        if (!isEnabled) {
            return false
        }
        when (event.action) {
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE, MotionEvent.ACTION_UP -> {
                onSizeChanged(width, height, 0, 0)
                super.onTouchEvent(MotionEvent.obtain(event.downTime, event.eventTime, event.action,
                    height.toFloat() - event.y, event.x, event.pressure, event.size, event.metaState,event.yPrecision,event.xPrecision, event.deviceId, event.edgeFlags))
            }

            MotionEvent.ACTION_CANCEL -> {}
        }
        return true
    }
    
}
enter code here

it can be used like this

<yourPakage.VerticalSlider
                android:id="@+id/verticalSlider"
                android:layout_width="0dp"
                android:layout_height="0dp"

                app:labelBehavior="gone"

                android:layout_marginTop="@dimen/dp_4"
                android:layout_marginBottom="@dimen/dp_4"
                app:layout_constraintBottom_toTopOf="@+id/textSliderValue"
                app:layout_constraintStart_toStartOf="@+id/sliderMark"
                app:layout_constraintTop_toBottomOf="@+id/sliderMark"
                app:layout_constraintEnd_toEndOf="@+id/sliderMark" />

Upvotes: 0

Renetik
Renetik

Reputation: 6373

For now I have something like this:

class VerticalSlider @JvmOverloads
constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
    : com.google.android.material.slider.Slider(context, attrs, defStyleAttr) {
    init {
        rotation = 270f
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec)
    }
}

Still I have to wrap it:

   <FrameLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent">

       <....VerticalSlider
            style="@style/InstSliderWhiteMatchWrap"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:value="100"
            app:haloRadius="15dp"
            app:thumbRadius="9dp" />

    </FrameLayout>

I had issue with haloRadius thou, had to set it to lower value to not show hard lines, looks like layout margin is not take correctly into account and I tried milliard of things... Otherwise little more readable and reusable this way for me.

Upvotes: 1

Cliven
Cliven

Reputation: 379


        <FrameLayout
            android:layout_width="32dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:orientation="vertical">

            <com.google.android.material.slider.Slider
                android:id="@+id/sldPenWidth"
                android:layout_width="200dp"
                android:layout_height="32dp"
                android:layout_gravity="center"
                android:rotation="270"
                android:value="1"
                android:valueFrom="0.1"
                android:valueTo="10" />

        </FrameLayout>

set attr android:rotation value to 270, then put it into a FrameLayout

Upvotes: 10

Related Questions