Vertical seekbar showing as a horizontal one in Android Studio
android, android-fragments, android-vertical-seekbar
Solution
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>
Problem
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" /> ```