Category Archives for Android Design Support Library

Snackbar vs Toast

Wraz z Androidem 5.0 pojawił się Material Design, a razem z nim API do krótkiego wyświetlania powiadomień o nazwie Snackbar. Można na nim łatwo zaimplementować przycisk, co w przypadku Toast nie było już takie proste. Jednak mimo to Toast nie otrzymało statusu @Deprecated, czyli można stosować obydwa elementy, najlepiej w zależności od kontekstu w którym chcemy użyć krótkiego powiadomienia. Po za kontekstem, ważny może być również design i ogólny ux podczas korzystania z aplikacji. Nie spotkałem się z dokładnym przedstawienie kiedy używać którego, podpowiedzią może być to, że Snackbara wystarczy przesunąć aby zniknął, z kolei Toast miał ograniczony czas widoczności i po prostu musi swoje na ekranie wisieć.

Najprostsza implementacja wygląda w ten sposób.

Snackbar:
Snackbar.make(rl, „Snackbar”, Snackbar.LENGTH_LONG).show();

gdzie rl to RelativeLayout na którym ma być wyświetlony Snackbar.

Toast:
Toast.makeText(getApplicationContext(), „Toast”, Toast.LENGTH_LONG).show();

Jak widać, różnic zbyt wielu nie ma, Snackbar odnosi się do layoutu, z kolei Toast do contentu.
Kod który tutaj wkleiłem to implementacja Snackbara z biblioteki AndroidDesignSupportLibrary, o której już wspominałem. Tak wygląda to w najprostszej postaci:

Projekt na githubie.

Pozdrawiam!

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!

Floating Action Button dzięki Android Design Support Library

Będzie dzisiaj o wyglądzie aplikacji na Android, a konkretnie bibliotece:
Android Design Support Library
Chciało by się powiedzieć: wreszcie. Google chciało promować Material Design, a na urządzeniach starszych niż Lollipop nie dało się go tak łatwo zaimplementować. Z sytuacją walczyli niezależni developerzy, tworząc biblioteki pozwalające na prostszą implementację niektórych elementów, ale co biblioteka od Google, to jednak od Google. Dzisiaj właśnie korzystałem z niej pierwszy raz do utworzenia czegoś, na co w skrócie mówi się FAB, czyli Floating Action Button. Chodzi konkretnie o ten button:

Mała przydatna rzecz, najczęściej po prawej stronie na dole. Rzuca ładny cień, jak widać. Animuje się zapełniając, nazywa się to ripple effect. Ale do kodu, aby zacząć korzystać z biblioteki musimy dodać ją do pliku build.gradle
compile 'com.android.support:design:22.2.0′

Mamy pierwszą niezaprzeczalną zaletę, nie wszystkie niezależne biblioteki dały się dodać do projektu w ten sposób, czasem trzeba było się nakombinować…..
Pokazuję teraz w jaki sposób utworzyć ten przycisk:

<android.support.design.widget.FloatingActionButton
        android:id=”@+id/fab”
        android:layout_width=”56dp”
        android:layout_height=”56dp”
        android:layout_gravity=”bottom|end”
        android:layout_margin=”32dp”
        android:src=”@drawable/ic_add”
        android:onClick=”plusClick”
        app:elevation=”10dp”
        app:borderWidth=”0dp” />

A do nagłówka z plikiem zawierającym wygląd naszego ekranu, który zawiera nasz przycisk, dodajemy:

xmlns:app=”http://schemas.android.com/apk/res-auto”

I już, gotowe, nasz przycisk wygląda jak by pięknie unosił się nad powierzchnią. Prawda, że proste i przyjemne? Myślę, że elementy w designie opisują same siebie swoimi nazwami, jeśli coś jest nie jasne, to zachęcam do zabawy, czyli zmieniania wartości i patrzenia na wyniki, chyba w ten sposób tworzy się najdoskonalszy design. A kto nie lubi, zapraszam do zapoznania się z dokumentacją. Mogę jeszcze pokazać dwa ciekawe parametry:

app:fabSize=”normal”
app:rippleColor=””

FabSize może przyjąć jeszcze parametr mini, z kolei rippleColor to kolor efektu zapełniania przycisku. Aby najlepiej go dojrzeć można przytrzymać placem przycisk, wtedy ten powoli się zapełni. Jeśli skopiowaliście kod, zaczniecie się zastanawiać skąd wziąć ten parametr src, czyli element znajdujący się w środku (na rysunku jest to gwiazdka), najczęściej jednak potrzebujemy +. Już podaję link:
Znajdujemy tam to co nam aktualnie potrzebne i pobieramy. Teraz mamy już wszystko, aby tworzyć zgodne z wytycznymi Google przyciski typu fab w naszej aplikacji.
Pozdrawiam!