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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With