Android material design "Text field dropdown menu", picker (spinner)

user_1041046 0
Viewed 3765

I'm designing a view according to Google Material Design and I need to follow rules specified for Text fields and add a label, hint, underline and icon to all inputs. This works fine with simple text inputs by wrapping TextView in TextInputLayout. However it becomes more complicated with other input types such as pickers, menus, spinner and their hover, focused, disabled, error states.

Please look at Text fields article in material website, under Field types, Prefixes & suffixes and Other inputs or images included below.

I found this question with partial answer and this one with no (actual) answer, both from 2015.

I'm using API 26 and Android studio 2.3.3 (both current version) but in component palette, I neither see these components nor anything similar.

Question

Although it is possible to implement each one of these controls using layouts, icons and shapes and write bunch of codes to support each different state, aren't they supposed to be part of the design library?

Am I missing a component or library (from Google not a 3rd party library) that I need to add to my project to be able to use this components or after 2 years, those actually still do not exist?

Following are images are what I'm referring to:

Label, Icon, underline, and hint label, suffix, underline Picker Date Picker

android-studio-2.3 material-design android-studio android
1 Answers

The guide lines for material are defined for both mobile and web applications. Because of that some components are not implemented for android. I don't know if it can help you but, specifically for drop downs and textfields there is a useful library called BetterSpinner that could help you.

To use it just add it to your gradle like

implementation ('com.weiwangcn.betterspinner:library-material:1.1.0') {
    exclude group: 'com.android.support', module: 'appcompat-v7'
}

note that it uses some of the support lib for apcompat v-7 so make sure to exclude them if you are already importing it for your project.

Afterwards to use it just do like:

<com.weiwangcn.betterspinner.library.material.MaterialBetterSpinner
    android:id="@+id/spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Some Hint"
    app:met_floatingLabel="normal"/>

That will give you the behaviour of putting the hint above the field like it happens with the input layout. You can take that out by changing the value of the app:met_floatingLabel="normal"

You can also use this lib for edit texts instead of having to use the input text field inside a input layout which for me gets huge in the xml using just: 

<com.rengwuxian.materialedittext.MaterialEditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Name"
        app:met_floatingLabel="normal"/>

Sorry I could not do more, I also have the same problems with the material components sometimes. Hope that lib helps you though.

user_71964230
Related