Category Archives for Material Design

Null budget exception – android app

Ostatnio napisałem o tym, że najważniejszą umiejętnością jaką możemy posiąść jest wiedza o tym, jak rozdzielać zadania pomiędzy tym co wykonujemy sami, a tym co powinniśmy oddelegować. Stworzyłem także taką małą aplikację do kształtowania nowych nawyków. Jeśli chodzi o nią, to nie wydałem podczas jej powstawania ani złotówki. Dzisiaj chciałem opisać jak to zrobiłem, aby jedynym moim kosztem był czas. I to najlepiej nie za dużo czasu 😉

Po pierwsze zewnętrzne biblioteki. Kiedy zerkniecie na aplikację, na starcie jest dostępny naprawdę ładny kalendarz. Nie jestem jego autorem, skorzystałem z gotowego komponentu dostępnego tutaj. A tak wygląda zrzut z mojego pliku gradle:

    compile 'com.jakewharton:butterknife:7.0.1′
    compile 'com.prolificinteractive:material-calendarview:1.4.0′
    compile 'petrov.kristiyan.colorpicker:colorpicker-library:1.1.0′
    compile 'com.github.javiersantos:MaterialStyledDialogs:1.4.1′
    compile 'com.github.PhilJay:MPAndroidChart:v2.2.5′

Wszystkie biblioteki których użyłem znalazłem na stronie android-arsenal. Jak już znalazłem wszystko co oszczędzało mi pracę, to po prostu przeczytałem trochę dokumentacji i mogłem korzystać. Bardzo ładnie zintegrowały się z Android Studio, i zostało mi o wiele mniej linii kodu do napisania 😉

Ale aplikacja, to nie tylko kod. Po za tym trzeba by jeszcze dorobić jakąś grafikę. Część grafik była we wcześniej pokazanych bibliotekach. Do ikon na toolbarze użyłem tych dostępnych na stronach design google, z kolei ikona aplikacji pochodziła ze strony flat-icon konkretnie stąd. Tutaj wymogiem było umieszczenie w about informacji o autorze, co też zrobiłem 😉 A z pozostałymi rzeczami graficznymi, np tymi potrzebnymi do sklepu Play poradziłem sobie sam, edytując choćby w paincie te elementy.

Ok, to mamy kodzik, mamy jakąś grafikę. Pozostał filmik promocyjny, który zawsze jest mile widziany. To również udało mi się zrobić, użyłem aplikacji shotcut. Ale skąd wziąłem elementy do tego filmiku? Elementy własnej aplikacji, które tam pokazuję nagrałem sobie sam 😉 Z kolei całe tło składające się z tych różnych biegaczy pobrałem ze stron videezy, oraz videvo, które udostępniają takie fragmenty za darmo 😉 Potem oczywiście odpowiedni montaż, podłączenie muzyki (Dave Depper „Motivational Beat” – „Compositions 2” ze strony freemusicarchive, oczywiście za darmo). I efekt końcowy jest taki:

I jak, wyszło w porządku, czy jednak czuć, że profesjonalista tego nie montował? 😉

Reasumując tak wyglądał mój przepis na w porządku wyglądającą aplikację, która kosztuje trochę czasu, ale za to ani złotówki 😉 Wydaje mi się, że jest on całkiem uniwersalny, także gdyby ktoś chciał tak samo jak ja, to polecam 😉 Można też oczywiście oddelegować część zadań, ważne, żeby ten wybór był świadomy 😉

Pozdrawiam!

Prelekcja Android View Morphing na Toast Wrocław

To już! Prelekcja do której przygotowywałem się od kilku tygodni odbędzie się już wkrótce!

Kiedy?
07.07.2016, czwartek 18:30-20:30

Gdzie?
PROZA
Przejście Garncarskie 2, 50-150 Wrocław

Bardzo serdecznie wszystkich zapraszam!
Prelekcja odbędzie się w ramach wydarzenia Toast którego organizatorami są Droids On Roids.

Temat?
Android View Morphing

Czyli będę opowiadał o tym, jak z dowolnych grafik w Androidzie stworzyć sobie np taką animację:
albo np taką:

Będzie zdecydowanie praktycznie i mam nadzieję, że temat przedstawię lekko i zrozumiale 😉
Jako zajawkę wrzucam tutaj swoje intro:

Wszystkie informacje znajdują się tutaj, gdzie klikamy też przycisk „Wybieram się”. Po za moją odbędą się jeszcze dwie prelekcje: Waldemara Zubika oraz Karola Wrótniaka. Dodatkowo organizatorzy zapowiadają niespodzianki. Będzie super, jeszcze raz serdecznie zapraszam! 😉

Pozdrawiam!

#10 Circular reveal animation

W poprzednim wpisie pokazałem jak działa aktywność dodawania, ale w jednym miejscu nie było w ogóle animacji, co skutkowało dziwnym pojawianiem się obiektów. Dzisiaj zajmiemy się dalej tym oknem i dodamy tą animację.

Po poprawkach aktywność  działa w ten sposób, że po kliknięciu na strzałkę sprawdza, czy wartość jest prawidłowa. Na tej podstawie rozpoczyna animację wypełniania widokiem sukces:

lub porażka

Widoki te są zdefiniowane jako osobne layouty, z ustawionym parametrem hide. Po zakończeniu wypełniania w tle ustawia wartości dla kolejnego zadania, tj liczba belek na stosie, oraz uzupełnia gwiazdkę, w zależności od wyniku poprzedniego działania. Po kliknięciu na środek ekranu cofa animację i wyświetla widok z nowymi wartościami. Dzisiaj chciałem się skupić właśnie na tej animacji wypełniania ekranu zawartością.

Nazywa się ona circular reveal i pojawiła się razem z Material Design, choć aktualnie znajduje się już w support library i możemy z niej korzystać w starszych wersjach. Metoda tworząca tą animację przyjmuje aż 5 parametrów:
– widok na którym wywołujemy animację
– środek tego widoku na którym wywołujemy animację (współrzędne x, y)
– punkt startowy i końcowy promienia animacji.

Oto jak wygląda ta animacja, ustawiłem czas trwania na 4 sekundy:

Kodzik, który obsługuje tą animację w przypadku prawidłowej odpowiedzi wygląda tak:
morphAnim.animFab(R.drawable.ic_line_to_done, true);
Animator anim = ViewAnimationUtils.createCircularReveal(layoutSuccess,
        centerX, centerY, startRadius, endRadius);
layoutSuccess.setVisibility(View.VISIBLE);
anim.addListener(new AnimatorListenerAdapter() {
    @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            addStar(counter == result);
            createReadyView();
        }
    });
anim.start();
Ważną rzeczą jest ustawienie parametru visibility dla layoutu który ma przykryć nasz główny layout. Jeszcze parametry które wykorzystujemy w tej metodzie:
centerX = contentNumbersBricksAdding.getRight();
centerY = contentNumbersBricksAdding.getBottom();
double valueToSqrt =
Math.pow((double) contentNumbersBricksAdding.getWidth(), 2)
+ Math.pow((double) contentNumbersBricksAdding.getHeight(), 2);
endRadius = (int) Math.sqrt(valueToSqrt);

Pobieramy X i Y, czyli środek koła z którego będzie rozpoczynała się animacja, ustawiamy startRadius na 0, oraz obliczamy endRadius z wzoru na przekątną prostokąta, czyli tego wzoru:

Dla animacji powrotnej, zamieniamy po prostu punkt startowy i końcowy promienia, czyli startRadius z endRadius. Oto jaki efekt uzyskujemy finalnie, po ustawieniu animacji do normalnej szybkości:
Ps. To już 10 wpis, czyli jesteśmy na półmetku w konkursie DSP 😉
Pozdrawiam!

#5 Morphing – animujemy floating action button cz.1

Razem z pojawieniem się Material Design, Androida Lollipop wprowadzono nowy sposób przechowywania ikon. Zamiast plików graficznych jak np png postawiono na zgodny z ideą flat design plik typu svg. Nietrudno zrozumieć taką decyzję:

xxxhdpi to rozmiar dla fullHd, ileż jeszcze można tych x dodać, żeby obsługiwać 4k, albo w przyszłości 16k? 😉 Svg ma ten plus, że skaluje się bez utraty jakości, tzn jest jeden plik, który obsłuży wszystkie rozdzielczości. Dla bardziej zainteresowanych standardem, który opracował W3C zresztą link.

Aplikacji które korzystały by jednak z tego typu rozwiązań jakoś błyskawicznie nie przybywa (png znajdujący się w folderze xxxhdpi przeskaluje się na ekranie 4k, a że smartfony mają rozmiar jakieś 6-7 cali te większe, tablety jakieś 10 cali, to i tak tego gołym okiem nie widać. Może na telewizorze 4k to widać, jak się patrzy z bliska, ale nie po to są telewizory, żeby patrzeć z bliska ;). Dlatego też pliki png mają się dobrze. Zaletą stosowania svg jest możliwość korzystania z morphingu, który na png musielibyśmy wywołać jakimś zewnętrznym programem, przerabiając go zresztą na gifa. No i tak ten gif by się potem skalował na większy ekran.. Ok, wiemy już, że powinniśmy korzystać z svg. Samo korzystanie jest takie samo jak z png w Androidzie, wrzucamy plik tylko do jednego folderu: drawable, a widać go wszędzie. A teraz zabierzmy się za morphing, ufff trochę czasu mi zajęło rozgryzienie tego.

Aby móc użyć animacji morphingu na androidzie poniżej wersji 5.0 skorzystałem z biblioteki vector-compat, która dostarczyła kilka gotowych animacji:

Nie pasowały one jednak do tego co chciałem uzyskać, dlatego też zrobiłem kilka swoich. Oto jak się to robi w androidzie.
Zacznę może od kodu w javie, musimy odnieść się do pliku xml typu animated vector:
final Animatable icon = (Animatable) ResourcesCompat.getDrawable
      (getApplicationContext(), R.drawable.ic_line_to_done);
fab.setImageDrawable((Drawable)icon);
icon.start();
Zawartość tego pliku (ic_line_to_done.xml) to:
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_line_vector">
    <target
        android:name="rotationGroup"
        android:animation="@anim/line_to_done_rotation" />
    <target
        android:name="v"
        android:animation="@anim/line_to_done_path" />
</animated-vector>
Gdzie widzimy 3 istotne rzeczy:
– android:drawable, czyli lokalizację opisu naszej początkowej ikony, tej od której będzie zaczynała się animacja
– target totationGroup, czyli odnośnik do aimacji rotacji, przed zmianą ikony następuje obrócenie aktualnej, taki efekt dodający fantazji 😉
-target v, czyli właściwy odnośnik do naszej animacji morphingu
Plik line_to_done_rotation, czyli nasz obrót:
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/anim_duration"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360"/>
Nic trudnego, po prostu zwykły obrót ikony, trwający 200ms. Plik line_to_done_path, czyli zmiana naszych ścieżek:
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:duration="@integer/anim_duration"
    android:propertyName="pathData"
    android:valueFrom="@string/path_line"
    android:valueTo="@string/path_done"
    android:valueType="pathType"
    app:vc_valueType="pathType"/>
Tutaj również jest łatwo, zwracam tylko uwagę na app:vc_valueType którego potrzebuje vector_comapt, żeby działać na starszych urządzeniach.
No i plik drawable, jest typu vector, oto jak wygląda:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:width="48dp"
    android:height="48dp"
    android:viewportHeight="24"
    android:viewportWidth="24"

    app:vc_viewportHeight="24"
    app:vc_viewportWidth="24">
    <group
        android:name="rotationGroup"
        android:pivotX="12.0"
        android:pivotY="12.0"
        android:rotation="360.0">

        <path
            android:name="v"
            android:fillColor="#FFFFFF"
            android:pathData="@string/path_line"

            app:vc_fillColor="#FFFFFF"
            app:vc_pathData="@string/path_line" />
    </group>
</vector>
Mamy tutaj grupę w której znajduje się plik path, czyli tak jak pisałem powyżej ścieżka opisująca wygląd naszej ikony. I przechodzimy do rzeczy najtrudniejszej, czyli właśnie ścieżek, oto jak przykładowo wyglądają:
M 48.0,54.0 L 31.0,42.0 L 15.0,54.0 L 21.0,35.0 L 6.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 32.0,4.0 L 40.0,23.0 L 58.0,23.0 L 42.0,35.0 L 48.0,54.0 
 
M 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 31.0,54.0 L 15.0,54.0 L 10.0,35.0 L 6.0,23.0 L 25.0,10.0 L 32.0,4.0 L 40.0,10.0 L 58.0,23.0 L 54.0,35.0 L 48.0,54.0
Mam nadzieję, że zaciekawieni, w następnej części opiszę jak uzyskać prawidłowe ścieżki z ikon znajdujących się tutaj. Bez tłumaczenia co oznaczają te liczby i litery, skupię się po prostu na tym w jaki sposób te ścieżki uzyskać i móc morfować dowolne ikony 😉

Finalnie uzyskałem takie efekty.

Pozdrawiam!

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!

Jak zrobić piękną aplikację

Na pewno każdy już zauważył następującą tendencję, że im aplikacja jest ładniejsza, tym ma więcej pobrań. Content jest oczywiście bardzo ważny, ale o wiele lepiej nam korzystać z czegoś co jest przyciąga wzrok, nie jednokrotnie godząc się nawet z częściowym ukryciem potrzebnej funkcjonalności pod jakąś piękną animacją. Czasem jednak coś jest piękne, ale bezużyteczne. Ważne, aby znaleźć złoty środek pomiędzy tymi dwoma wartościami. Ale nie o tym chciałem pisać. Pytanie które chciałem dzisiaj zadać, to jak ważny jest design dla programisty Android? Odpowiedź: coraz ważniejszy. Nie każdy ma jednak talent plastyczny, aby stworzyć piękną grafikę. Ja osobiście, mam taki problem, często wychodzą mi jakieś niedopasowane kolorami i kształtami szkarady. Jednak jest na to sposób, gotowce. Użyłem jednego w swojej poprzedniej aplikacji, dlatego chciałem dzisiaj przedstawić kilka przykładów, oraz podać miejsca gdzie szukać inspiracji.
Zaczynamy od animacji której sam osobiście użyłem ostatnio, czyli:

Ten twórca stworzył jeszcze jedną, bardzo podobną:

Prawda, że są ładne? Znalazłem je na stronie android-arsenal. Godnym polecenia miejscem, gdzie możemy szukać jest również strona dribbble. O to dwa piękne cuda które tam znalazłem:

Implementacja tego typu rozwiązań jest najczęściej bardzo prosta. I stosunkowo niewielkim kosztem można naprawdę bardzo polepszyć wygląd swojej aplikacji. Przy czym jak pisałem we wstępie, nie należy zapominać o funkcjonalności 😉
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!