Top Android Material Spinner Libraries


Top Android MaterialSpinner Examples in 2018

In this top-list tutorial, we explore some of the top material spinner libraries that you can easily use in your project. These are open source libraries have several advantages that we will explore in a short while.

Let's start by answering some basic questions:

What is a Spinner?

A Spinner is an adapterview that displays items in a dropdown fashion, allowing the user to pick one at a time. Spinners reside in the android.widget package and is a class deriving from the abstract AbsSpinner class.

Here's a demo of a spinner:

Android Spinner

Learn more about :

(a). MaterialSpinner

MaterialSpinner is a spinner view for Android. This library was first created by Jared Rummler in 2016 and has been receiving several updated. It's very clean in design and is created from a textView.

public class MaterialSpinner extends TextView {..}

Material Spinner

MaterialSpinner requires Android API 14 and above. It is hosted in Maven Central. The current version is version 1.2.5. This libray has around 197 methods. It also has more than 770 stars and is released under Apache license.

Installation

This library can be installed in three ways depending on your build system and preferences:

  1. Direct download of the Android Archive file.
  2. Grabbing via Gradle:
    compile 'com.jaredrummler:material-spinner:1.2.5'
  3. Grab via Maven:
    <dependency>
    <groupId>com.jaredrummler</groupId>
    <artifactId>material-spinner</artifactId>
    <version>1.2.5</version>
    <type>aar</type>
    </dependency>

Usage

Here's a simple taste of this library:

<com.jaredrummler.materialspinner.MaterialSpinner
    android:id="@+id/spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

That is in the layout. Then in java code:

MaterialSpinner spinner = (MaterialSpinner) findViewById(R.id.spinner);
spinner.setItems("Ice Cream Sandwich", "Jelly Bean", "KitKat", "Lollipop", "Marshmallow");
spinner.setOnItemSelectedListener(new MaterialSpinner.OnItemSelectedListener<String>() {

  @Override public void onItemSelected(MaterialSpinner view, int position, long id, String item) {
    Snackbar.make(view, "Clicked " + item, Snackbar.LENGTH_LONG).show();
  }
});

Read more about MaterialSpinner here.

Full Example

Here's the full example project.

This is the main activity and the only class.


import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton; 
import android.support.design.widget.Snackbar; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.view.View;
import com.jaredrummler.materialspinner.MaterialSpinner; 

public class MainActivity extends AppCompatActivity { 

  private static final String[] ANDROID_VERSIONS = {
      "Cupcake", 
      "Donut", 
      "Eclair", 
      "Froyo", 
      "Gingerbread", 
      "Honeycomb", 
      "Ice Cream Sandwich", 
      "Jelly Bean", 
      "KitKat", 
      "Lollipop", 
      "Marshmallow", 
      "Nougat", 
      "Oreo" 
  }; 

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {

      @Override public void onClick(View view) {
        try { 
          startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("https://github.com/jaredrummler/MaterialSpinner")));
        } catch (ActivityNotFoundException ignored) {
        } 
      } 
    }); 

    MaterialSpinner spinner = (MaterialSpinner) findViewById(R.id.spinner);
    spinner.setItems(ANDROID_VERSIONS);
    spinner.setOnItemSelectedListener(new MaterialSpinner.OnItemSelectedListener<String>() {

      @Override public void onItemSelected(MaterialSpinner view, int position, long id, String item) { 
        Snackbar.make(view, "Clicked " + item, Snackbar.LENGTH_LONG).show(); 
      } 
    }); 
    spinner.setOnNothingSelectedListener(new MaterialSpinner.OnNothingSelectedListener() {

      @Override public void onNothingSelected(MaterialSpinner spinner) {
        Snackbar.make(spinner, "Nothing selected", Snackbar.LENGTH_LONG).show();
      } 
    }); 
  } 

} 

This is the main layout of the main activity. We add MaterialSpinner here.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

  <com.jaredrummler.materialspinner.MaterialSpinner
      android:id="@+id/spinner"
      app:ms_dropdown_max_height="350dp"
      app:ms_dropdown_height="wrap_content"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

</RelativeLayout>

Download

No. Location Link
1. GitHub Direct Download
2. GitHub Browse
3. Original Creator Jared Rumler

(b). MaterialSpinner(by Ganfra)

This is yet another Spinner with Material Design. This library supports Android API 14+. It's created by @ganfra. This library has more than 840 stars.

MaterialSpinner will provide your Spinner with the Material Design feel. Usage is just like any regular Spinner. You can add floating label text, hint and error messages to provide you with a very modern spinner.

Android Material Spinner

This library is created from AppCompatSpinner:

public class MaterialSpinner extends AppCompatSpinner implements ValueAnimator.AnimatorUpdateListener {..}

Installation

Here's how you install materialspinner:

implementation 'com.github.ganfra:material-spinner:2.0.0'

If you use other libraries requiring appcompat-v7 like MaterialEditText make sure to exclude them if you have issue at compile time :

implementation ('com.github.ganfra:material-spinner:2.0.0'){
        exclude group: 'com.android.support', module: 'appcompat-v7'
}

Usage

In your XML you can use it like this:

<fr.ganfra.materialspinner.MaterialSpinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        app:ms_multiline="false"
        app:ms_dropDownHintView="@layout/my_custom_dropdown_hint_item_layout"
        app:ms_hintView="@layout/my_custom_hint_item_layout"
        app:ms_hint="hint"
        app:ms_enableFloatingLabel="false"
        app:ms_enableErrorLabel="false"
        app:ms_floatingLabelText="floating label"
        app:ms_baseColor="@color/base"
        app:ms_highlightColor="@color/highlight"
        app:ms_errorColor="@color/error"
        app:ms_typeface="typeface.ttf"
        app:ms_thickness="2dp"
        app:ms_hintColor="@color/hint"
        app:ms_arrowColor="@color/arrow"
        app:ms_arrowSize="16dp"
        app:ms_alignLabels="false"
        app:ms_floatingLabelColor="@color/floating_label"/>

Then in your code:

 String[] ITEMS = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};
 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, ITEMS);
 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 spinner = (MaterialSpinner) findViewById(R.id.spinner);
 spinner.setAdapter(adapter);

Full Example

Here's the full example of our MaterialSpinner:


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity; 
import android.view.View;
import android.widget.ArrayAdapter;

import fr.ganfra.materialspinner.MaterialSpinner; 

public class MainActivity extends AppCompatActivity { 

    private static final String ERROR_MSG = "Very very very long error message to get scrolling or multiline animation when the error button is clicked";
    private static final String[] ITEMS = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};

    private ArrayAdapter<String> adapter;

    MaterialSpinner spinner1;
    MaterialSpinner spinner2;
    MaterialSpinner spinner3;
    MaterialSpinner spinner4;
    MaterialSpinner spinner5;
    MaterialSpinner spinner6;
    MaterialSpinner spinner7;

    private boolean shown = false;

    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, ITEMS);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        initSpinnerHintAndFloatingLabel(); 
        initSpinnerOnlyHint(); 
        initSpinnerNoHintNoFloatingLabel(); 
        initSpinnerMultiline(); 
        initSpinnerScrolling(); 
        initSpinnerHintAndCustomHintView(); 
        initEmptyArray(); 

    } 

    private void initSpinnerHintAndCustomHintView() { 
        spinner6 = findViewById(R.id.spinner6);
        spinner6.setAdapter(adapter);
        spinner4.setHint("Select an item");
    } 

    private void initSpinnerHintAndFloatingLabel() { 
        spinner1 = findViewById(R.id.spinner1);
        spinner1.setAdapter(adapter);
        spinner1.setPaddingSafe(0, 0, 0, 0);
    } 

    private void initSpinnerOnlyHint() { 
        spinner2 = findViewById(R.id.spinner2);
    } 

    private void initSpinnerNoHintNoFloatingLabel() { 
        spinner3 = findViewById(R.id.spinner3);
        spinner3.setAdapter(adapter);
    } 

    private void initSpinnerMultiline() { 
        spinner4 = findViewById(R.id.spinner4);
        spinner4.setAdapter(adapter);
        spinner4.setHint("Select an item");
    } 

    private void initSpinnerScrolling() { 
        spinner5 = findViewById(R.id.spinner5);
        spinner5.setAdapter(adapter);
        spinner5.setHint("Select an item");
    } 

    private void initEmptyArray() { 
        String[] emptyArray = {};
        spinner7 = findViewById(R.id.spinner7);
        spinner7.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, emptyArray));
    } 

    public void activateError(View view) {
        if (!shown) {
            spinner4.setError(ERROR_MSG);
            spinner5.setError(ERROR_MSG);
        } else { 
            spinner4.setError(null);
            spinner5.setError(null);
        } 
        shown = !shown;

    } 

} 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin">

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:ms_arrowColor="#0000FF"
            app:ms_arrowSize="16dp"
            app:ms_floatingLabelColor="#00FF00"
            app:ms_floatingLabelText="floating label"
            app:ms_hint="hint"
            app:ms_multiline="true" />

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:ms_enableErrorLabel="false"
            app:ms_enableFloatingLabel="false"
            app:ms_hint="hint"
            app:ms_hintColor="#0000FF" />

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:ms_enableErrorLabel="false"
            app:ms_enableFloatingLabel="false" />

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:ms_alignLabels="false"
            app:ms_baseColor="@color/spinner_base_color"
            app:ms_multiline="false" />

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:ms_enableErrorLabel="false"
            app:ms_enableFloatingLabel="false"
            app:ms_dropDownHintView="@layout/dropdown_hint_item"
            app:ms_hintView="@layout/hint_item"
            app:ms_hint="hint"
            app:ms_hintColor="#0000FF" />

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Show/hide error"
            android:onClick="activateError" />

    </LinearLayout>
</ScrollView>

Download

No. Location Link
1. GitHub Direct Download
2. GitHub Browse
3. Original Creator @Ganfra

(c). Rtl Material Spinner

This is a library inspired by @Ganfra's MaterialSpinner. It provides RTL(Right To Left) alignment of items in our Material Spinner. So in a sense it's an extension of MaterialSpinner we looked at above.

RtlMaterialSpinner, like Ganfra's MaterialSpinner is created from AppCompatSpinner:

public class RtlMaterialSpinner extends AppCompatSpinner implements ValueAnimator.AnimatorUpdateListener {..}

This library is created by Ali Abdollahi and is released under Apache 2.0 license.

Android Rtl MaterialSpinner

Installation

This library is hosted in jitpack. Hence to install we have to register jitpack as a repository in our root level build.gradle:

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

Then we can add our implementation statement:

dependencies {
    implementation 'com.github.aliab:RTLMaterialSpinner:V1.0.1'
}

Usages

In your XML you add:

<ir.hamsaa.RtlMaterialSpinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        app:ms_hint="hint"
        app:ms_enableFloatingLabel="false"
        app:ms_enableErrorLabel="false"
        app:ms_floatingLabelText="floating label"
        app:ms_baseColor="@color/base"
        app:ms_highlightColor="@color/highlight"
        app:ms_errorColor="@color/error"
        app:ms_typeface="typeface.ttf"
        app:ms_thickness="2dp"
        app:ms_hintColor="@color/hint"
        app:ms_arrowColor="@color/arrow"
        app:ms_arrowSize="16dp"
        app:ms_alignLabels="false"
        app:ms_floatingLabelColor="@color/floating_label"/>

And in your java code you can use it this way:

 String[] ITEMS = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};
 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, ITEMS);
 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 spinner = (RtlMaterialSpinner) findViewById(R.id.spinner);
 spinner.setAdapter(adapter);

Full Example

Here's a full RTLMaterialSpinner example:

package ir.hamsaa.rtlmaterialspinner.sample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ArrayAdapter;

import fr.hamsaa.materialspinner.sample.R;
import ir.hamsaa.RtlMaterialSpinner;

public class MainActivity extends AppCompatActivity {

    private static final String ERROR_MSG = "یک خطا خیلی خیلی خیلی طولانی که برای نمایش قابلیت اسکرول ایجاد شده است و بسیار خوب است!";
    private static final String[] ITEMS = {"ایتم اول", "ایتم دوم", "ایتم سوم", "ایتم چهارم", "ایتم پنجم", "ایتم ششم"};

    private ArrayAdapter<String> adapter;

    RtlMaterialSpinner spinner1;
    RtlMaterialSpinner spinner3;
    RtlMaterialSpinner spinner4;
    RtlMaterialSpinner spinner5;

    private boolean shown = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, ITEMS);
        initSpinnerHintAndFloatingLabel();
        initSpinnerNoHintNoFloatingLabel();
        initSpinnerMultiline();
        initSpinnerScrolling();

    }

    private void initSpinnerHintAndFloatingLabel() {
        spinner1 = (RtlMaterialSpinner) findViewById(R.id.spinner1);
        spinner1.setAdapter(adapter);
        spinner1.setPaddingSafe(0, 0, 0, 0);
    }

    private void initSpinnerNoHintNoFloatingLabel() {
        spinner3 = (RtlMaterialSpinner) findViewById(R.id.spinner3);
        spinner3.setAdapter(adapter);
    }

    private void initSpinnerMultiline() {
        spinner4 = (RtlMaterialSpinner) findViewById(R.id.spinner4);
        spinner4.setAdapter(adapter);
        spinner4.setHint("یک ایتم را انتخاب کنید");
    }

    private void initSpinnerScrolling() {
        spinner5 = (RtlMaterialSpinner) findViewById(R.id.spinner5);
        spinner5.setAdapter(adapter);
        spinner5.setHint("یک ایتم را انتخاب کنید");
    }

    public void activateError(View view) {
        if (!shown) {
            spinner4.setError(ERROR_MSG);
            spinner5.setError(ERROR_MSG);
        } else {
            spinner4.setError(null);
            spinner5.setError(null);
        }
        shown = !shown;

    }

}
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin">

        <ir.hamsaa.RtlMaterialSpinner
            android:id="@+id/spinner1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            app:ms_arrowColor="#0000FF"
            app:ms_arrowSize="16dp"
            app:ms_floatingLabelColor="#00FF00"
            app:ms_floatingLabelText="floating label"
            app:ms_hint="یکی از ایتم ها را انتخاب کنید"
            app:ms_isRtl="true"
            app:ms_typeface="Shabnam-Light-FD.ttf" />

        <ir.hamsaa.RtlMaterialSpinner
            android:id="@+id/spinner3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            app:ms_enableErrorLabel="false"
            app:ms_enableFloatingLabel="false"
            app:ms_isRtl="true"
            app:ms_typeface="Shabnam-Light-FD.ttf" />

        <ir.hamsaa.RtlMaterialSpinner
            android:id="@+id/spinner4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            app:ms_alignLabels="false"
            app:ms_baseColor="@color/spinner_base_color"
            app:ms_isRtl="true"
            app:ms_typeface="Shabnam-Light-FD.ttf" />

        <ir.hamsaa.RtlMaterialSpinner
            android:id="@+id/spinner5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            app:ms_isRtl="true"
            app:ms_typeface="Shabnam-Light-FD.ttf" />

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="@string/show_hide_error"
            android:onClick="activateError" />

    </LinearLayout>
</ScrollView>

Download

No. Location Link
1. GitHub Direct Download
2. GitHub Browse
3. Original Creator @aliab

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post