Jak “wystylowałem” Material Design w Xamarin.Forms

Xamarin.Forms nie posiadają możliwości wykorzystania Material Design w przeciwieństwie do Xamarin.Android, ale też nie jest tak, że nie da tego zrobić. Przynajmniej do pewnego stopnia. W tym wpisie opiszę jak zaimplementować podstawowy “look & feel” Material Design.

Styl bazowy

Na początek stwórzmy styl bazowy. Jeżeli nie masz folderu values w swoim projekcie dla Androida to go dodaj, powinien się znajdować w folderze Resources. Pełna ścieżka to Resources/values/ a w nim dodaj plik styles.xml, i jego zawartość:

Następny plik stwórzmy w folderze Resources/values-v21/, nazwijmy go tak samo styles.xml. Skąd nazwa v21? Pochodzi od wersji biblioteki AppCompat, która umożliwia urządzeniom starszym od wersji Androida 5.1 (Liolipop) na wykorzystanie elementów stylu Material Design.

Kolejny plik to colors.xml, w nim ustawimy kolory naszej aplikacji. Stwórz go w scieżce Resources/values/colors.xml. Jego zawartość:

Kolory do Twojej aplikacji najlepiej dobrać z tego adresu: http://www.materialpalette.com/

material_palete

Wykorzystaj styl

Aby wykorzystać styl, który przed chwilą dodałeś należy zaktualizować plik AndroidManifest.xml, popraw jego zawartość w ten sposób:

Usuń ikonę z ActionBar

W metodzie OnCreate klasy MainActivity dodaj poniższą linię kodu:

Ikony i dodatkowe “assety”

Ikony Material Design najlepiej pobrać od Google z tego adresu, w dodatku są darmowe. Można je również wykorzystać w projektach dla IOS-a. Do pełni szczęścia brakuje jeszcze generatora asetów, które są potrzebne także do wstawienia aplikacji do sklepu. Ja polecam ten adres.

Efekt końcowy

Mam jeszcze trochę do zrobienia w tym temacie, ale całość zaczyna już jakoś wyglądać.

Próba Material Design w Xamarin.Forms
Próba Material Design w Xamarin.Forms

Podsumowując

Może nie jest to pełen wymiar stylu Material Design, gdyż brakuje animacji, przejścia i innych elementów tego pięknego języka designu.  Jednak ta pewna namiastka daje satysfakcję, tym bardziej, że do jej osiągnięcia nie potrzeba dużo. W następnym poście postaram się opisać jak uzyskałem efekt CardView na pozycjach listy.

  • Marcin Markiewicz

    Co do wyboru kolorów dla aplikacji polecam takie webowe narzędzie: https://color.adobe.com/

    • Dziękuje, wygląda na lepsze od tego co używałem dotychczas :)