David Gonzalez

Android Software Craftsman

Your Forms Don’t Need to Be Ugly Part 2

Last week we started to talk about how ugly forms can be displayed and raised some issues about it. Today is time to stop ranting and start contributing.

Introducing FloatingHints

A while ago thanks to Chris Banes and Cyril Mottier there was a buzz around a pattern called Floating Label Layout. I used this approach in the last project I’ve been working on and the feedback was very good. Therefore, I’m releasing this small library called FloatingHints which you could use if you want to add a bit of styling to those ugly forms.

The snapshot version is already available at Sonatype while the release version will be soon released at Maven Central.

If you wouldn’t use that form, why would the user?

In the previous post from the series we saw one of the most common form structures. A couple of EditText where the user will write the user and password and a button used to start the Login action.

With the addition of the Floating Label pattern one can have a much nicer and clear screen. No one likes to fill these forms, not even the users excited about using your service… so why don’t we encourage them to do so?

Custom Animations

One of the key features of FloatingHints is that the animations which are in charge of showing or hiding the floating hint are fully customisable. By default, the hint will be shown using a Slide in to Top and will be hidden using a Slide out to Bottom

This can be easily customised via XML attributes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <com.malmstein.floatinghints.FloatingHintEditTextLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:floatLayoutInAnimation="@anim/abc_fade_in"
    app:floatLayoutOutAnimation="@anim/abc_fade_out">

    <EditText
      style="@style/FloatLabel.Form.Text"
      android:id="@+id/float_login_email"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="@string/hint_email"
      android:inputType="textEmailAddress" />

  </com.malmstein.floatinghints.FloatingHintEditTextLayout>

The result of using Fade In and Fade Out is pretty good too!

Customise the color of the hint

The FloatingHintEditTextLayout uses the attribute floatLayoutTextAppearance to change the TextAppearance of the Label.

activity_demo.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <com.malmstein.floatinghints.FloatingHintEditTextLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:floatLayoutInAnimation="@anim/abc_fade_in"
    app:floatLayoutOutAnimation="@anim/abc_fade_out"
    app:floatLayoutTextAppearance="@style/FloatLabel.Label">

    <EditText
      style="@style/FloatLabel.Form.Text"
      android:id="@+id/float_login_email"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="@string/hint_email"
      android:inputType="textEmailAddress" />

  </com.malmstein.floatinghints.FloatingHintEditTextLayout>

styles.xml

1
2
3
4
5
  <style name="FloatLabel.Label" parent="android:TextAppearance.Small">
    <item name="android:textColor">@color/float_edit_text_layout_color</item>
    <item name="android:textSize">@dimen/text_xs</item>
    <item name="android:textStyle">bold</item>
  </style>

float_edit_text_layout_color.xml

1
2
3
4
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/font_yellow" android:state_activated="true" />
  <item android:color="@color/font_grey" />
</selector>

This way we’ve just changed the text appearance of the label to yellow.

Wrapping up

The demo project from FloatingHints contains a wrap up of all the ideas in this post. Check it out, fork it and don’t hesitate in giving some feedback. It will be very much appreciated.

Stay tuned for the next post of the series!

Comments