Ananya Srivastav Ananya Srivastav - 1 month ago 23
Android Question

Vertical seekbar showing as a horizontal one in Android Studio

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.

app

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

You can try the following library to create 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