Android MaterialSpinner with Floating Labels


Android MaterialSpinner Library and Example.

We will use a library created by @Ganfra called MaterialSpinner.

This is differnt from Jared Rumler's MaterialSpinner.

MaterialSpinner(Ganfra's) will provides us a Spinner with the Material style. You can use it like any regular Spinner.

It allows you to:

  1. Add floating label text
  2. Add hint and
  3. Add error messages.

Demo

Here's the example demo we explore to learn how to use MaterialSpinner library.

Android Material Spinner

Requirements

MaterialSpinner is used with android projects and requires at least API 14.

Installation

Android Studio uses the gradle as it's build system.

Therefore we normally write gradle scripts to do several tasks related to our project. Such a task can be fetching a library as a dependency and adding it to our project.

So to add MaterialSpinner into your project, navigate over to the app-level(located in app folder of your project) and add the following under the dependencies closure:

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.

[/notice. Check below.]
compile ('com.github.ganfra:material-spinner:2.0.0'){
        exclude group: 'com.android.support', module: 'appcompat-v7'
}

How to use it

First you need to add it in your xml layout where you want it rendered:

You can see there are various options:

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

MaterialSpinner allows you to set a hint and a floating label text so that suppose no floating label text is provided, the hint gets displayed.

Then in your java code you use it like a regular spinner with an adapter like ArrayAdapter:

 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);

You can activate the error mode or deactivate:

 //Activate
 spinner.setError("Error");
 //Desactivate
 spinner.setError(null);

Full MaterialSpinner Example

Let's now look at a full material spinner example.

(a) hint_item.xml

We have a TextView as our root element.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    style="?android:attr/spinnerItemStyle"
    android:paddingLeft="0dp"
    android:background="@color/spinner_hint_text_color"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ellipsize="marquee"
    android:textAlignment="inherit"/>
(b) dropdown_hint_item.xml

Also a TextView .

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="40dp"
    android:background="@android:color/darker_gray"
    android:orientation="vertical" />
(c) activity_main.xml

This layout will be inflated into the main activity.

At the root we have a ScrollView. Inside it are several MaterialSpinner widgets arranged linearly and vertically and a button at the bottom.

<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>
(b) MainActivity.java

This is the main activity and as class constants we have an error message as well as string array of items.

Then an ArrayAdapter and our spinner widgets as instance fields.

We will instantiate the ArrayAdapter and set invoke it's setDropDownViewResource method, passing in our dropdown view resource as android.R.layout.simple_spinner_dropdown_item. setDropDownViewResource() is a method responsible for Setting the layout resource to create the drop down views.

We then create several methods, each responsible for referencing a given MaterialSpinner and setting it's adapter.

Here's the full code:

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;

    }

}

Download

Also check our video tutorial it's more detailed and explained in step by step.

No. Location Link
1. GitHub Direct Download
2. GitHub Browse

Credit to the Original Creator Ganfra

How to Run

  1. Download the project.
  2. Go over to sample folder and edit import it to your android studio.Alternatively you can just copy paste the classes as well as the layouts and maybe other resources into your already created project.
  3. Then edit the app level build/gradle to add our dependency.

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