android

Pokolorować drawable!

Krzysztof Baranowski

7 kwi 2019

Masz za zadanie stworzyć aplikację mobilną na Androida do zarządzania listą klientów. Każdy klient ma swój przypisany kolor, który go identyfikuje. Dostajesz mockupy od grafika, a ten uznał, że klienci bedą oznaczani za pomocą odpowiednio kolorowanej krawędzi. Mniej więcej tak:

Nic trudnego, myślisz sobie. Wystarczy przecież typowy drawable, który następnie dodasz jako tło dla kolejnym pozycji w RecyclerView. Tworzysz nowy plik i dodajesz taką zawartość:

Wszystko świetnie, ale jak tu kolorować dynamicznie takie tło? Zawsze możesz stworzyć 1000 takich drawable z każdym możliwym kolorem, ale czasu szkoda, a i sposób mizerny 🙂

Na szczęście jest na to sposób. Z pomocą przyjdzie nam nadawanie identyfikatorów warstwom w pliku drawable. Poniżej zaktualizowana zawartość.

Oznacza to jedno-będziemy kolorować z kodu. Odwołamy się do odpowiedniej warstwy, a następnie do jej właściwości stroke. Zmień jeszcze zawartość pliku layoutu aktywności głównej. Dodamy w nim przycisk do zmiany koloru obramowania oraz widok, który będziemy kolorować.

Czas na kod

Świetnie, mamy już wszystko to na czym będziemy operować. Dodamy teraz logikę dla przycisku. Za jego pomocą wylosujemy kolor, którym pokolorujemy obramowanie widoku środkowego. Jednocześnie zapoznaj się z ciałem metody odpowiedzialnej za nadanie wylosowanego koloru. Dodatkowo dla efektu WOW dodamy animację skalowania widoku po zmianie koloru.

No dobrze, ale co tu się dzieje? Zaczynamy od pobrania referencji do utworzonego wcześniej drawable. Rzutujemy ją na LayerDrawable, ze względu na to, że nasz drawable oparty jest na warstwach. Następnie szukamy warstwy, którą wcześniej opatrzyliśmy identyfikatorem. Teraz już z górki. Ustawiamy szerokość oraz kolor krawędzi warstwy na odpowiednie wartości. W linii 25 uruchamiamy naszą hiper, extra zaawansowaną animację, a poźniej już tylko przypisujemy skonfigurowany drawable do tła naszego widoku.