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!

Cześć!

Mam na imię Michał i jestem początkującym programistą. W styczniu obroniłem tytuł inżyniera, od jakichś dwóch miesięcy pracuje, jeszcze krócej mieszkam we Wrocławiu. Swoją przygodę z programowaniem zacząłem na studiach, wcześniej nie do końca wiedziałem co chcę robić. Uczyłem się trochę C++, potem przesiadłem się na Javę, aby w końcu najbardziej jarać się Androidem. Nie pracuję w Androidzie, aktualnie pracuję w technologii GWT. To by było na tyle z mojej krótkiej historii.

Skąd pomysł, żeby zacząć pisać bloga? Ano z przedwczorajszej prezentacji, tak konkretnie to byłem na spotkaniu Software Talks: Java na ławę.
http://softwaretalks.pl/events/event/software-talks-java-na-lawe-wroclaw/
Wykłady były ciekawe, poznałem Tomasza Zielińskiego, twórcę Transportoida. Ale to Michał Bartyzel podczas swojej prezentacji zwrócił na coś moją uwagę. A mianowicie, myślałem już o tym wcześniej. Po przeczytaniu jakiejś książki, poznaniu nowej technologii, napisaniu kawałka kodu, jak dużo zostaje w głowie, a ile się ulatnia? I jak można temu zapobiec? Najlepiej poprzez syntezę wiedzy, czyli przemyślenie i ponowne wytłumaczenie, po swojemu, tego, czego się nauczyło. Żona przede mną ucieka, kiedy chcę jej tłumaczyć aspekty programistyczne 😉 Stąd właśnie pomysł, aby tym co sobie zsyntetyzuję, podzielić się ze społecznością. Myślę, że będzie to z obopólną korzyścią.

Jakich treści można się tutaj spodziewać? Myślę, że na każdy temat. Oczywiście będę starał się krążyć wokół tematów programistycznych. Ale nie tylko, mogą pojawić się lifechacki, które po prostu uwielbiam, a także jakieś opinie na temat książek. Może trochę nowości, ze świata programistów. Będę starał się to wszystko uporządkować jakimiś tagami, zobaczymy na ile mi się to uda. Mam nadzieję, że będzie ciekawie i pouczającą. W tym miejscu zapraszam również do aktywności i komentowania, będzie to dla mnie dodatkowy impuls, aby wrzucać tutaj jeszcze więcej treści.

Tyle tytułem wstępu, pozdrawiam i czekajcie na wpisy!