tiper / materialspinner

Implementation of a Material Spinner for Android with TextInputLayout functionalities

MaterialSpinner

MaterialSpinner aims to provide a Material Design Spinner.

This widget is based on TextInputLayout.

For more information please check:

• Spinner
• Text Fields

Screenshot

Dependency

Add this in your root build.gradle file (not your module build.gradle file):

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

Then, add the library to your module build.gradle

dependencies {
    implementation 'com.github.tiper:MaterialSpinner:latest.release.here'
    implementation 'com.android.support:design:android.design.version.here'
}

If your using the Material Components for Android, make sure you have android.useAndroidX=true and android.enableJetifier=true in your gradle.properties file!

Features

• Quick way to select a value from a list.
• Support for having no value selected or clearing it.
• Styling and theming just like for TextInputLayout.
• Showing a hint.
• Showing an error.
• Showing a prompt when spinnerMode is dialog.
• Showing a bottom sheet when spinnerMode is bottomsheet.
• Custom spinner drawables.
• RTL support.

Usage

There is a sample provided which shows how to use the library, but for completeness, here is all that is required to get MaterialSpinner working:

XML:

<com.tiper.MaterialSpinner
    android:id="@+id/material_spinner"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

If you want the options to be presented to the user as a dialog window just add:

app:spinnerMode="dialog"

If you want the options to be presented to the user as a bottom sheet window just add:

app:spinnerMode="bottomsheet"

JAVA:

final MaterialSpinner materialSpinner = findViewById(R.id.material_spinner);
materialSpinner.setAdapter(adapter);

Kotlin (with synthetics):

material_spinner.adapter = adapter

That's it!

License

Copyright 2019 Tiago Pereira

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

materialspinner's Issues

Search in dropdown

Please add some enhancement to include text search in dropdown mode for long list of data values

Not working with Androidx

With use androidx libraries spinner not working properly.
Can you fix it?

implementation 'androidx.appcompat:appcompat:1.0.2'

Spinner Items Not Closing

I have noticed that the spinner items does not close on some devices even after successfully selecting the item of choice

Text alignment

I want to align the text of the select item centered.
The set spinner adapter is created with a custom layout with a text view using android:textAlignment="center".
That adapter shows the item text centered in the standard Android Spinner view.

The items in the popup are centered as expected, but the selected item is shown aligned left.
Tried using android:textAlignment="center" directly on the material spinner seems to have no effect.

I also tried settings android:gravity="center" on the spinner. That centers the item text, but also centered the hint text in the border above. But I want the hint text to remain left aligned.

Not sure if I'm to blind to find the correct attribute or if it is not working.

NPE when clearing selection if no adapter set

When I try to clear the spinnerSelection.

spinner.setSelection(-1)

And then I get:

java.lang.NullPointerException: Attempt to invoke interface method 'int java.util.List.size()' on a null object reference
at android.widget.ArrayAdapter.getCount(ArrayAdapter.java:344)
at com.tiper.MaterialSpinner$DropDownAdapter.getCount(MaterialSpinner.kt:775)
at com.tiper.MaterialSpinner.setSelection(MaterialSpinner.kt:131)

I get the list that would be used for the spinner from the server, and I was setting it to null when no connection or connection error. Now I set to an empty array and it works.

Maybe it's not a bug, but it took me a while to figure out that the problem was the null adapter. Maybe you can throw a different exception? Or clear it anyway even if it has no adapter

Spinner Causes App Crash

Error: java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.os.Handler.post(java.lang.Runnable)' on a null object reference
at com.tiper.MaterialSpinner$4$1.onFocusChange(MaterialSpinner.kt:281)
I have used the design library and android.enableJetifier and android.useAndroidX=true. My Implementation is in Java.

Add the library Error

Library is not adding by using provided dependency:
implementation 'com.github.tiper:MaterialSpinner:latest.release.here'

Error:
Unable to resolve dependency for ':app@debug/compileClasspath': Could not find any version that matches com.github.tiper:MaterialSpinner:latest.release.here.

How do i implement style in java code programatically.

How do i implement style in java code programatically.I tried in two ways such as :

1st : com.tiper.MaterialSpinner materialSpinner = new com.tiper.MaterialSpinner(this,null,R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox); ///// Not working

2nd : com.tiper.MaterialSpinner spinner = new com.tiper.MaterialSpinner(new androidx.appcompat.view.ContextThemeWrapper(this, R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox));

Originally posted by @rajvimal in #6 (comment)

Issues at TextInputLayout

Hi, are you checking for the compatible with new TextInputLayout?
I think you should replace from android.support.design.widget.TextInputLayout
to com.google.android.material.textfield.TextInputLayout. Because it can't be compiled, I got error unresolved super types android.support.design.widget.TextInputLayout

Thx
Yuda Oktavian

Selected item Text Color is showing Black

Hi @tiper Selected item Text Color is showing Black even that I set the android:textColor="@color/white" but its not working.

How do i implement style in java code programatically.I tried in two ways as below :

1st : com.tiper.MaterialSpinner materialSpinner = new com.tiper.MaterialSpinner(this,null,R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox); ///// Not working

2nd : com.tiper.MaterialSpinner spinner = new com.tiper.MaterialSpinner(new androidx.appcompat.view.ContextThemeWrapper(this, R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox));

Update to androidx

Is there anything blocking updating this library to use androidx? I could make a PR if you would accept it.

I would love to use the library, but my policy is to not turn on Jetifier anymore, as androidx has been out for a while.

New Feature Requested

I was wondering if you can introduce the title on top of the list in Material Spinner, Like, If I wan to show countries list, and then there should be an option so that user can set the title like this.

Select your country" something like that.

Kind Regards,
Hassan

Not saving state on rotating screen

First of all thanx for the greate control.

When the screen is rotating the control not save the data

Typeface for spinner's hint, floating label and ...

Hi, thanks for this great library. I'm going to set typeface for hint, floating label and selected item but i don't know how!. I found the custom adapter solution for list items but for hint, floating label and etc. i couldn't figure it out. I'll be appreciated if you give me some advice or better solution.

Here's my custom adapter :

`public class SpinnerAdapter extends ArrayAdapter {

private final LayoutInflater mInflater;
private final List<String> items;
private final int mResource;

public SpinnerAdapter(@NonNull Context context, @LayoutRes int resource,
                      @NonNull List<String> items) {
    super(context, resource, 0, items);

    mInflater = LayoutInflater.from(context);
    mResource = resource;
    this.items = items;
}

@Override
public View getDropDownView(int position, @Nullable View convertView,
                            @NonNull ViewGroup parent) {
    return createItemView(position, parent);
}

@Override
public @NonNull
View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
    return createItemView(position, parent);
}

private View createItemView(int position, ViewGroup parent) {
    TextView tv = (TextView) mInflater.inflate(mResource, parent, false);
    tv.setText(items.get(position));
    return tv;
}

}`

Thank you

Add callback support to when the view is focused.

Hi,

I want to fetch some records from the server on click on the spinner, not preloaded or static data. However, I'm able to fetch the records from the server on fragment load and assign the custom adapter to Material Spinner.

But I'm trying to set onClickListener of materialSpinner, as soon as I landed in my fragment app crashes. I saw in your demo repository you have a separate button like Clear and Error Buttons, and you have implemented MaterialSpinner.onClick method. But that will not help me to call the api on click of spinner and then load the data in spinner.

Could you help me in this regard if there is any possible solution you have already in that and I could not find it? I'm new in android so could not find the way to resolve this issue.

Error
Unable to start activity ComponentInfo{com.tiper.demo/com.tiper.materialspinner.sample.MainActivity}: java.lang.RuntimeException: Don't call setOnClickListener.You probably want setOnItemClickListener instead.

Thanks in advance.

Kind Regards,
Hassan

Resizing and refreshing drawable when error is triggered.

When error is set, red error icon appears instead of spinner drawable which is OK with me. Problem is that it doesn't get reset when error is gone. Also views height get bigger when error is nonnull which doesn't happen with TextInputEditText.

EDIT: Also error message doesn't appear below like when using TextInputEditText.

Add support for search option using filterable when spinnerMode is Dialog

When there is a long list of items, preferably dialog spinnerMode is used. But for quick search its difficult to add the Filterable option in the inner class. Is there a way to implement this.?

Spinner shows package name

Hi spinner shows package name when selecting an item. Can anyone help?

Spinner for image and text

It is not possible to show both text and image in this spinner

Focus bug

Hi,

I managed to find an unpleasant bug.
When I open spinner dropdown I cant' close it. It propably try focus something and reopening spinner dropdown constantly.

However bug is only when MaterialSpinner is first focusable view in layout. Like this:

<LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        >
      <com.tiper.MaterialSpinner
            android:hint="@string/hint_category"
            android:id="@+id/categoryTypeSpinner"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:visibility="gone"
            app:boxBackgroundColor="@android:color/transparent"
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
            />
</LinearLayout>

When I add some focusable view like this:

<LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        >
    <!-- Dirty hack. -->
    <com.google.android.material.textfield.TextInputLayout
            android:layout_height="1dp"
            android:layout_width="1dp"
            app:boxBackgroundColor="@android:color/transparent"
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
            >
        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/titleTextEdit"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                />
    </com.google.android.material.textfield.TextInputLayout>
    <com.tiper.MaterialSpinner
            android:hint="@string/hint_category"
            android:id="@+id/categoryTypeSpinner"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:visibility="gone"
            app:boxBackgroundColor="@android:color/transparent"
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
            />
</LinearLayout>

Material spinner will work fine.

Unable to close view when materialSpinner is clicked

Great job!! I always hated the default android spinner. This library is awesome but on select devices, the list_item view cannot be closed. I had to switch but I hope you can solve this.

Spinner selected item text display whole model

I use custom Base Adapter when select value from spinner it display whole model data on spinner selected item instead selected item name.

Widget.MaterialComponents.TextInputLayout.OutlinedBox style not working in new materialCompontent version android

The outlined box was appearing in
implementation 'com.google.android.material:material:1.0.0'

but when i updated that to

implementation 'com.google.android.material:material:1.2.0-alpha01'

it's not working but it's appearing for TextInputLayout

Add support android:entries="@array/planets_array"

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
</resources>


<com.tiper.MaterialSpinner
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    ...
    android:entries="@array/planets_array" <= not supported
    ...
    android:hint="@string/planets" />

setOnClickListener is blocked but I need to use it

Due to some code I inherited I need to use setOnClickListener. Basically I want the look and feel of the spinner but when it is clicked on a separate dialog appears. I am not using any of the other features of the spinner, no drop down, etc. but I need the look with the title over the spinner etc.

I do fully use of your spinner in a number of other areas in the code, this area just happens to be a hackfest.

The code in MaterialSpinner.kt at line 319 blocks this usage - as hacky as it might be.

override fun setOnClickListener(l: OnClickListener?) {
    throw RuntimeException(
        "Don't call setOnClickListener." +
                "You probably want setOnItemClickListener instead."
    )
}

Really need this check to be optional

can not get latest version of the package

Change arrow color

Altough I used android:src="@drawable/ic_selector_drawable" , arrow color doesnt change.I would like to change default color but it is always black.Even if click the spinner,arrow color change but it is white.How to manage it?

Allow choose "none"

Hi,

Is some easy way, how select "none" in spinner?
Thanks!

Petr

On selecting value in a spinner the spinner is shown again and again..

Crash when adding @style/Widget.MaterialComponents.TextInputLayout.OutlinedBox

How do I style this? As I read from the docs, it should be styled the same as TextInputLayout but when adding a style the app crashes and says failed to inflate the MaterialSpinner class.

<com.tiper.MaterialSpinner
        android:id="@+id/spinnerRequestType"
        style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        layout_width="match_parent"
        layout_height="wrap_content"
        layout_marginTop="@dimen/margin_small" />

this is the only code I added and also I have the material dependency version 1.1.0-rc02

Custom adapter for Material spinner

Hi @tiper really awesome library you've created. I want to add country image flag and country code as fetched from api and add custom adapter in the material spinner and show it when item selected. I have successfully created the custom adapter showing bottom dialog with image flag and code but when I'm selecting one item its only text that showing in Materialspinner. please help.

How to set the text size of selected item? as custom XML file for spinner is not working

How to set text size of selected item? as custom xml layout for spinner is not working

How to stop dragging up/down the bottom sheet while scrolling up/down?

Hi,
I'm experiencing one more issue regarding scrolling up/down of bottom sheet. When I scroll up, the bottom sheet is dragged upward and coves the whole fragment/activity. Instead, I want to restrict the dragging of the sheet if I do scroll up/down.

Let say I've 100 items in the list and I've scrolled up all the items and I'm now at last item in the sheet, now when I scroll down the sheet is dragged downwards instead of scrolling down and in this way the sheet is dismissed and I'm unable to scroll down the items.

Can you please let me know if the solution of these issues already exist in the current code or you have to implement these?

Waiting for your reply. Let me know if you need any further clarifications regarding my issue.

Kind Regards,
Hassan

spinnermode dropdown not showing items inside custom dialog

spinnermode dropdown not showing items inside custom dialog(Custom Dialog is showing inside a Fragment)

Cannot display more than 7 items

I've noticed that I can only display 7 items (in some cases). If the array is longer, only the last 7 elements are displayed.
Here's my test data
val data = arrayOf("me","him","them","hate","love","mine","yours", "ours","tada")
val aa = ArrayAdapter(this@EngineerHome, android.R.layout.simple_spinner_item, ins)
aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)

in this case, the first two elements are ignored

can you reproduce this on your end @tiper ?

performClick() doesn't show Dropdown, Dialog or BottomSheet

Summary: performClick() doesn't work on MaterialSpinner: Dropdown, Dialog or BottomSheet doesn't show.

In my application, there is a holder around the Spinner. When this holder is clicked, the Spinner should show a Dropdown or Dialog. This works for the normal Spinner. Instead of a Dropdown or Dialog I need a BottomSheet and that's why I started using MaterialSpinner. Unfortunately, performClick() doesn't work for MaterialSpinner. No Dropdown, Dialog or BottomSheet is shown. I was wondering if there's a workaround for this or if this can be fixed.

holder.mStateSpinnerHolder.setOnClickListener(new View.OnClickListener() {
@Override
    public void onClick(View v) {
        holder.mStateSpinner.performClick();
    }
});

Edit: I extracted the code of this library to a project class and I added this method as a temporary workaround:

override fun performClick(): Boolean {
    popup.show(0)
    return super.performClick()
}

This shows the expected behaviour. Next to this method, maybe another method performClick(position: Int) should be added too to maintain the position, but this is not needed in all cases. Could this be updated in the library?