Spinner's scrollbar style

Question

I've tried to change the style and the position of the scrollbar which is inside a spinner, but it does not work.

MainActivity.java:

package com.example.testapp;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml:

<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">

    <Spinner
        android:entries="@array/items"
        android:verticalScrollbarPosition="left"
        android:scrollbarThumbVertical="@drawable/scrollbar_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

</RelativeLayout>

drawable/scrollbar_style.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FF196C96" />
    <corners android:radius="5dp" />
    <size android:width="2dp" />

</shape>

values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">TestApp</string>
    <string name="action_settings">Settings</string>

    <string-array name="items">
        <item>Item 1</item>
        <item>Item 2</item>
        <item>Item 3</item>
        <item>Item 4</item>
        <item>Item 5</item>
        <item>Item 6</item>
        <item>Item 7</item>
        <item>Item 8</item>
        <item>Item 9</item>
        <item>Item 10</item>
    </string-array>

</resources>

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testapp"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.testapp.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Screenshot:

Note that android:verticalScrollbarPosition="left" and android:scrollbarThumbVertical="@drawable/scrollbar_style" works fine if I use them with a ListView:

Is it a bug? or is there another way to manipulate the scrollbar style and position within a Spinner?

Cum

If it is not possible, at least I need to hide the scrollbar. – Cum

Answer 1

Spinners in Android doesn't have a Scrollbar, the scrollbar exist within the listView maintained inside the Spinner, and has no public access.

There's a run-time way to override it in the link below ..

Resource: https://mcmap.net/q/1450128/-can-39-t-make-spinner-39-s-scrollbar-always-visible-android

Testament

Sorry, but this is wrong. View.SCROLLBAR_POSITION_LEFT is only valid in code level. In XML, valid values are defaultPosition, left, and right. – Cum

Answer 2

After hours of work, I got the right solution (Thanks Khaled for guiding me to the right direction). You need a custom spinner:

import java.lang.reflect.Field;
import java.lang.reflect.Method;

import org.holoeverywhere.widget.ListPopupWindow;
import org.holoeverywhere.widget.ListView;
import org.holoeverywhere.widget.Spinner;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;

public class CustomSpinner extends Spinner
{
    public CustomSpinner(Context context)
    {
        super(context);
    }

    public CustomSpinner(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public CustomSpinner(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
    }

    public CustomSpinner(Context context, AttributeSet attrs, int defStyle, int mode)
    {
        super(context, attrs, defStyle, mode);
    }

    public CustomSpinner(Context context, int mode)
    {
        super(context, mode);
    }

    @Override
    public boolean performClick()
    {
        boolean bClicked = super.performClick();

        try
        {
            Field mPopupField = Spinner.class.getDeclaredField("mPopup");
            mPopupField.setAccessible(true);
            ListPopupWindow pop = (ListPopupWindow) mPopupField.get(this);
            ListView listview = pop.getListView();

            Field mScrollCacheField = View.class.getDeclaredField("mScrollCache");
            mScrollCacheField.setAccessible(true);
            Object mScrollCache = mScrollCacheField.get(listview);
            Field scrollBarField = mScrollCache.getClass().getDeclaredField("scrollBar");
            scrollBarField.setAccessible(true);
            Object scrollBar = scrollBarField.get(mScrollCache);
            Method method = scrollBar.getClass().getDeclaredMethod("setVerticalThumbDrawable", Drawable.class);
            method.setAccessible(true);
            method.invoke(scrollBar, getResources().getDrawable(R.drawable.scrollbar_style));

            if(VERSION.SDK_INT >= VERSION_CODES.HONEYCOMB)
            {
                Field mVerticalScrollbarPositionField = View.class.getDeclaredField("mVerticalScrollbarPosition");
                mVerticalScrollbarPositionField.setAccessible(true);
                mVerticalScrollbarPositionField.set(listview, SCROLLBAR_POSITION_LEFT);
            }
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }

        return bClicked;
    }
}

Note that I used HoloEveryWhere library, but the same solution would work with android.widget.Spinner.

Cum

How do I use this custom spinner to be scrolled true? – Viscount

Answer 3

in your app theme or activity them :

  <item name="android:dropDownListViewStyle">@style/SpinnerStyle1</item>

declare SpinnerStyle1:

<style name="SpinnerStyle1" parent="Widget.AppCompat.ListView.DropDown">
        <item name="android:divider">@color/blackText</item>
        <item name="android:dividerHeight">1px</item>
        <item name="android:scrollbars">none</item>
</style>

Unrefined

Answer 4

You can create below style in styles.xml

<style name="SpinnerScrollBar" parent="Widget.AppCompat.ListView.DropDown">
    <item name="android:scrollbarThumbVertical">@color/scrollbar_color</item>
</style>

Then set that to the spinner theme

<Spinner
    ...
    android:theme="@style/SpinnerScrollBar"/>

Also you can use a drawable instead of a color if you want to have some gradient color

Warchaw

You can also specify a size to have a beautiful scrollbar <item name="android:scrollbarSize">4dp</item> – Incomparable

Answer 5

I needed to give margin at the end to the scrollbar in the dropdown list, as well as change it's color, width and radius. This is what worked for me:

create an XML under drawable folder: dropdown_scrollbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:bottom="8dp" android:top="8dp"> <!-- Margins -->
        <shape>
            <solid android:color="#594165" /> <!-- Scrollbar Color -->
            <corners android:radius="41dp" /> <!-- Scrollbar Radius -->
            <size android:width="4dp"/> <!-- Scrollbar Width -->
        </shape>
    </item>
</layer-list>

Create a style in styles.xml

<style name="customScrollbar">
     <item name="android:scrollbarThumbVertical">@drawable/dropdown_scrollbar</item>
</style>

In ur Spinner tag in layout file, add the theme attribute:

android:theme="@style/csScrollbar"

I had used a custom Spinner class by extending Spinner class. Have not tried above solution with default Spinner class.

Honesty

Worked if you want to customise the scrollbar more, thnx – Nerty