Vertical seekbar showing as a horizontal one in Android Studio

Question

I want to achieve a vertical (upright) seekbar to control volume. Currently it shows as a horizontal one. This image below is similar to the layout which I want to achieve.

After clicking the sound button, the seekbar to control volume should be open up when I click on sound icon.

Can anyone help me out with this problem?

Below is the code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true"
android:id="@+id/r1">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#38538e"
android:id="@+id/toolBar"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:layout_alignBottom="@+id/horizontalScrollView"
android:layout_marginLeft="45dp"
android:layout_marginTop="7dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">

</android.support.v7.widget.Toolbar>


<LinearLayout
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/toolbartitle"
    android:layout_toLeftOf="@+id/toolbartitle"
    android:layout_toStartOf="@+id/toolbartitle"
    android:id="@+id/linearLayout3"
    android:orientation="horizontal"></LinearLayout>

<HorizontalScrollView
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:id="@+id/horizontalScrollView"
    android:fillViewport="false"
    android:background="#ffffff"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:scrollbars="none"
    android:scrollbarAlwaysDrawHorizontalTrack="true"
    android:contextClickable="false"
    android:focusable="false"
    android:layout_marginTop="80dp">




<RelativeLayout
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:background="#ffffff"
    android:layout_alignTop="@+id/horizontalScrollView"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    <RelativeLayout
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:id="@+id/miniscrollRelative"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/home"
            android:id="@+id/textViewab"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp"/>

        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/player"
            android:id="@+id/textViewba"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="70dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/Your_play.."
            android:id="@+id/textViewca"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="130dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/downloads"
            android:id="@+id/textViewda"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="200dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/streaming"
            android:id="@+id/textViewea"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="270dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonhomea"
            android:src="@drawable/homenew"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_alignBottom="@+id/imageButtonda"
            android:layout_toRightOf="@+id/imageButtonaab"
            android:layout_toEndOf="@+id/imageButtonaab" />

        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonaa"
            android:src="@drawable/player"
            android:layout_marginLeft="60dp"
            android:background="#ffffff"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonaab"
            android:src="@drawable/player_active"
            android:layout_marginLeft="60dp"
            android:background="#ffffff"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:visibility="gone"/>

        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonba"
            android:src="@drawable/mydownload"
            android:layout_marginLeft="195dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonbab"
            android:src="@drawable/download_active"
            android:layout_marginLeft="195dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonca"
            android:src="@drawable/playlist"
            android:layout_marginLeft="130dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            />
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtoncab"
            android:src="@drawable/playlist_active"
            android:layout_marginLeft="130dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonda"
            android:src="@drawable/streaming"
            android:layout_marginLeft="265dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtondab"
            android:src="@drawable/streaming_active"
            android:layout_marginLeft="265dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            android:visibility="gone"/>


    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/miniscrollRelative"
        android:layout_marginLeft="30dp">
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/send_wishes"
            android:id="@+id/textViewfa"
            android:textSize="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/hit_parade"
            android:id="@+id/textViewga"
            android:textSize="8dp"
            android:layout_marginLeft="78dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/uzbek_instr"
            android:id="@+id/textViewha"
            android:textSize="8dp"
            android:layout_marginLeft="145dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/your_news"
            android:id="@+id/textViewia"
            android:textSize="8dp"
            android:layout_marginLeft="220dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/extras"
            android:id="@+id/textViewja"
            android:textSize="8dp"
            android:layout_marginLeft="300dp"
            android:layout_marginTop="50dp"
            android:layout_marginRight="5dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonea"
            android:src="@drawable/wishes"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:layout_alignTop="@+id/imageButtonfa"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtoneab"
            android:src="@drawable/hitparadea"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonfa"
            android:src="@drawable/hitparade"
            android:layout_marginLeft="80dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonfab"
            android:src="@drawable/hitparade1"
            android:layout_marginLeft="80dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonga"
            android:src="@drawable/instrument"
            android:layout_marginLeft="150dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtongab"
            android:src="@drawable/instrument_active"
            android:layout_marginLeft="150dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonha"
            android:src="@drawable/news"
            android:layout_marginLeft="220dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonhab"
            android:src="@drawable/news_active"
            android:layout_marginLeft="220dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonia"
            android:src="@drawable/extras"
            android:layout_marginLeft="290dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginRight="5dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtoniab"
            android:src="@drawable/extras_active"
            android:layout_marginLeft="290dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginRight="5dp"
            android:visibility="gone"/>



    </RelativeLayout>



</RelativeLayout>
</HorizontalScrollView>
<ImageButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/right"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_alignBottom="@+id/horizontalScrollView"
    android:layout_alignTop="@+id/toolBar"
    android:id="@+id/right" />
<ImageButton
    android:id="@+id/left"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/left"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignBottom="@+id/horizontalScrollView"
    android:layout_alignTop="@+id/toolBar" />
<FrameLayout
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:name="android.app.ListFragment"
    android:id="@+id/fragment"
    android:background="#ffffff"
    android:layout_below="@+id/horizontalScrollView"
    android:layout_alignRight="@+id/toolBar"
    android:layout_alignEnd="@+id/toolBar">

    <FrameLayout
        android:background="#f2434242"
        android:layout_width="match_parent"
        android:layout_height="202dp"
        android:layout_gravity="left|bottom">
        <ImageView
            android:layout_width="49dp"
            android:layout_height="49dp"
            android:background="@drawable/playerbar"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="263dp"
            android:layout_gravity="left|center_vertical">

            <ToggleButton
                android:background="@drawable/minipause"
                android:textOn=""
                android:textOff=""
                android:src="@drawable/mini"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:id="@+id/button2"
                android:layout_gravity="center_horizontal|top"
                android:layout_marginRight="29dp"
                android:layout_marginEnd="29dp"
                android:layout_alignTop="@+id/textView5"
                android:layout_toLeftOf="@+id/button4"
                android:layout_toStartOf="@+id/button4" />

            <Button
                android:background="@drawable/minisound"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:id="@+id/button4"
                android:layout_gravity="center_horizontal|top"
                android:layout_alignTop="@+id/button2"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />

            <SeekBar
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:id="@+id/seekBar2"
                android:layout_weight="0.87"
                android:progress="100"
                android:progressDrawable="@drawable/seekbar3"
                android:max="200"
                android:thumb="@null"
                android:maxHeight="3dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:layout_below="@+id/button2"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginTop="30dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Radio"
                android:textColor="#ffffff"
                android:id="@+id/textView5"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginLeft="54dp"
                android:layout_marginStart="54dp"
                android:layout_marginTop="38dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="UZ"
                android:textColor="#ffffff"
                android:id="@+id/textView6"
                android:layout_below="@+id/textView5"
                android:layout_alignLeft="@+id/textView5"
                android:layout_alignStart="@+id/textView5" />

        </RelativeLayout>

    </FrameLayout>

</FrameLayout>

<TextView
    android:layout_width="match_parent" android:layout_height="50dp"
    android:text="player"

    android:textSize="22sp"
    android:gravity = "center"
    android:id="@+id/toolbartitle"
    android:layout_above="@+id/toolBar"
    android:layout_alignLeft="@+id/toolBar"
    android:layout_alignStart="@+id/toolBar" />

Answer 1

You can try the following library to create a custom vertical seekbar,

dependencies {
    compile 'com.h6ah4i.android.widget.verticalseekbar:verticalseekbar:0.7.0'
}

To use in your xml layout,

<!-- This library requires pair of the VerticalSeekBar and VerticalSeekBarWrapper classes -->
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
    android:layout_width="wrap_content"
    android:layout_height="150dp">
    <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
        android:id="@+id/mySeekBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:splitTrack="false"
        app:seekBarRotation="CW90" /> <!-- Rotation: CW90 or CW270 -->
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

Reference: https://github.com/h6ah4i/android-verticalseekbar

Update: To customize the seekbar, you need to add the android:thumb & android:progressDrawable. First of all, Create the following drawables into the drawable folder,

seekbar_background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#404040" />
            <corners android:radius="40dp" />
        </shape>
    </item>
</selector>

seekbar_progress

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke
        android:width="4dp"
        android:color="#777777" />
</shape>

seekbar

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar_background"
        android:left="2dp">
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>

and finally,

seekbar_thumb

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#7FD319" />
            <size
                android:width="15dp"
                android:height="15dp" />
        </shape>
    </item>
</layer-list>

Now update your seekbar with the thumb & progreeDrawable,

 <!-- This library requires pair of the VerticalSeekBar and VerticalSeekBarWrapper classes -->
        <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center">

            <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
                android:id="@+id/opacity_seek"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"
                android:progressDrawable="@drawable/seekbar"
                android:splitTrack="false"
                android:thumb="@drawable/seekbar_thumb_green"
                app:seekBarRotation="CW270" /> <!-- Rotation: CW90 or CW270 -->
        </com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

Answer 2

I found a way to use the new google material slider in vertical orientation. I woudln't say it's hacky, but it's kind of a workaround, since I rotate and add the slider to a custom FrameLayout, instead of overwriting the slider itself. By doing this, the layout preview in Android Studio is displayed correctly and you can avoid the thumb halo getting cut off (what happens when you just use and rotate the slider itself).

The attribute set of the custom view gets forwarded to the slider, so you can customize it in the same way you would customize the slider.

This is a simplified example without respecting defStyleAttr and padding for the slider size calculation!

class VerticalSlider 
     @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null)
     : FrameLayout(context, attrs) {

private val slider: Slider = Slider(context, attrs)

init {
    slider.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT,
                                       LayoutParams.WRAP_CONTENT, Gravity.CENTER)
    slider.rotation = 90f
    addView(slider)
}

@Synchronized
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val layoutHeight = MeasureSpec.getSize(heightMeasureSpec)
    // set slider width to layout heigth and avoid thump halo gets cut off
    slider.layoutParams.width = layoutHeight - slider.haloRadius - 2
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    // update layout width to the rotated height of the slider
    // otherwise the layout remains quadratic
    setMeasuredDimension(slider.measuredHeight, measuredHeight)
}
}

example usage

Answer 3

please add android:rotation="270" in your code it will works

       <SeekBar
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:id="@+id/seekBar2"
            android:layout_weight="0.87"
            android:progress="100"
            android:progressDrawable="@drawable/seekbar3"
            android:max="200"
            android:thumb="@null"
            android:maxHeight="3dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_below="@+id/button2"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="30dp"
            android:rotation="270"/>

it will definitly works, try it