TextInputLayout, czyli animowany EditText

To już kolejny wpis o bibliotece:
Android Design Support Library
Dzisiaj chciałem skupić się na bardzo ładnie animowanym polu typu EditText, a mianowicie:

Prawda, że ładne? Zwłaszcza, że możemy dowolnie dobrać sobie te kolory. Ale do kodu. Aby uzyskać taki efekt potrzebujemy obudować nasze pole EditText czymś takim:

<android.support.design.widget.TextInputLayout
        android:layout_width=”match_parent”
        android:layout_height=”wrap_content”
        android:theme=”@style/TextInputTheme”
        android:id=”@+id/usernameTIL” >

<EditText
            android:id=”@+id/usernameET”
            android:layout_width=”match_parent”
            android:layout_height=”wrap_content”
            android:textSize=”23sp”
            android:hint=”@string/username” />

</android.support.design.widget.TextInputLayout>

Oczywiście, o czym wspominałem w poprzednim wpisie, musimy dodać bibliotekę do gradle:

compile ‚com.android.support:design:22.2.0’

Kod który wkleiłem wygląda jakby opisywał się sam, więc nie będę się nad nim rozwodził, ale pokażę w jaki sposób ustawić sobie kolory na takie, które nas interesują i pasują do projektu. Wszystko kryje w pliku styles.xml, dodajemy tam:

<style name=”TextInputTheme” parent=”TextAppearance.AppCompat”>
        <item name=”android:textColorHint”>@color/primary</item>
        <item name=”colorAccent”>@color/accent</item>
        <item name=”colorControlNormal”>@color/controlNormal</item>
        <item name=”colorControlActivated”>@color/controlActivated</item>
    </style>

Tutaj również wszystko jest samo-opisowe, a jeśli nie jest, to zapraszam do dokumentacji, bądź samodzielnych prób. Te mają to do siebie, że czasem możemy zmienić inny element niż chcieliśmy, ale w efekcie osiągnąć coś innego, ciekawszego niż planowaliśmy. Przynajmniej mi, czasem się tak zdarza.

Ostatnią rzeczą o której chciałem powiedzieć jest efekt uzyskany po wykonaniu po stronie javy tego kodu:

setErrorEnabled(true);
setError(getString(R.string.error_message));

Dzięki temu, możemy ustalić, aby wymagane było uzupełnienie naszego pola. W przypadku jeśli ktoś przejdzie do następnego elementu, zostanie w polu EditText wyświetlona informacja zawarta w stringu error_message. Tutaj również pojawia się ładna animacja, zresztą, sprawdźcie sami.

Pozdrawiam!