After using the Android Design Support Library's TextInputLayout
to place a floating label above an EditText
component, I was wondering if there is a way to add a floating label to the Spinner
component (not necessarily using the Design Library).
By this, I mean something like a TextView
placed above the Spinner
(obviously no animations like the TextInputLayout
), but I want the text size, font and colour to match that of the TextInputLayout
's floating label.
For example, it would look something like this (see the labels above the Spinner
s):
As I mentioned before, my main aim is to have a label above the Spinner
, just as in the TextInputLayout
- so text size, font, colour, and distances between the label and the component would be the same.
On the Google Design page about floating label text fields, there is a diagram showing dimensions of the label relative to the component, but there is no indication of the label text colour or size:
So, to summarise, I am asking:
- If there is a special component to achieve what I am asking or a custom view I can use, what would it be, and how can I use it.
- If not, what is the floating label text size, colour and font, so that I can place a TextView
above my Spinner
with the layout dimensions shown in the above image.
From the Google Design guidelines for text fields, it has the following for floating labels:
Hint and input font: Roboto Regular 16sp
Label font: Roboto Regular 12sp
Tile height: 72dp
Text top and bottom padding: 16dp
Text field divider padding: 8dp
as well as the images shown above.
So the floating label font is: Roboto Regular 12sp. You can therefore use a TextView
to display the Spinner
label as I do not know of any custom View
s or special components you could use.
However, after trying it out, it does not look quite as good as the example shown in the image. A custom view may be better for this, as it could look nicer, but the solution above is just one way of achieving something close to what I originally wanted.
I want the text size, font and colour to match that of the
TextInputLayout
's floating label.
This can be achieved easily without any external libraries. After trying to hack the TextInputLayout
and even making my own custom view, I realized that using a simple TextView
takes much less code and it's probably more efficient.
The text style can be copied from the AppCompat
library.
From the Material Design guidelines we get the following information:
8dp
Here's what the guidelines do not mention about the Material EditText
:
4dp
16dp
above it, this is left to the interface designer: this makes sense because if you place it under another EditText
, you will only need an additional 8dp
of spaceMoreover, the Design Support Library contains this style for the label of a focused element:
<style name="TextAppearance.Design.Hint" parent="TextAppearance.AppCompat.Caption">
<item name="android:textColor">?attr/colorControlActivated</item>
</style>
Inactive elements simply use TextAppearance.AppCompat.Caption
.
Add the following to your dimens.xml
file:
<dimen name="input_label_vertical_spacing">8dp</dimen>
<dimen name="input_label_horizontal_spacing">4dp</dimen>
Then add this to styles.xml
:
<style name="InputLabel" parent="TextAppearance.AppCompat.Caption">
<item name="android:paddingBottom">@dimen/input_label_vertical_spacing</item>
<item name="android:paddingLeft">@dimen/input_label_horizontal_spacing</item>
<item name="android:paddingRight">@dimen/input_label_horizontal_spacing</item>
</style>
If you want the label to always have the highlighted (accent) color, replace TextAppearance.AppCompat.Caption
with TextAppearance.Design.Hint
from the Google Design Support Library. However, this will probably look a bit weird if you also have labeled EditText
views on the same screen.
Finally, you can put a TextView
above your Spinner
(or any other element) with the style applied:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/category"
style="@style/InputLabel" />
The following screenshot shows a simple example with two normal TextInputLayout
views followed by a label and a Spinner
. I didn't apply the additional 8dp
spacing to separate them further, but this shows you that the size, font and color are reflected.
The elements inside the Spinner
have a different padding, however I prefer to keep the vertical alignment with all the other labels to get a more uniform look.