Tworzenie atrakcyjnego interfejsu użytkownika aplikacji na Androida jest prawie zawsze czasochłonnym zadaniem z powodu wielu wersji systemu, rozmiarów ekranów i gęstości pikseli. Zadanie staje się jeszcze trudniejsze, jeśli weźmiemy pod uwagę bardziej wymagających użytkowników, którzy oczekują od aplikacji przestrzegania wytycznych Material Design. Na szczęście, CodeCanyon posiada kilka szablonów aplikacji na Androida, które można wykorzystać do tego celu.

W tym poradniku, pomogę ci rozpocząć pracę z jednym z takich szablonów o nazwie Material Design UI Android Template App opracowanym przez CreativeForm.

Wstępne wymagania

Aby skorzystać z tego poradnika, potrzebujesz najnowszej wersji Android Studio oraz urządzenia lub emulatora z systemem Android w wersji 2.3 lub nowszej.

1. Pobierz szablon

Zaloguj się do swojego konta w Envato Market i kup Material Design UI Android Template App w CodeCanyon.

W sekcji Downloads, znajdziesz kod źródłowy szablonu—w formie pliku ZIP.

Po pobraniu pliku ZIP i wypakowaniu go do wybranego folderu, powinieneś mieć następujące pliki i foldery:

2. Otwórz szablon

Szablon może być użyty w Eclipse oraz Android Studio. W tym poradniku, skupimy się na tym ostatnim.

Uruchom Android Studio i wybierz opcję Open an existing Android Studio project w menu powitalnym Przejdź do folderu zawierającego wypakowany szablon, zaznacz android - AS i kliknij OK.

3. Konfiguracja szablonu

Material Design UI Android Template App wymaga kilka otwarto źródłowych bibliotek. Wersja compileSdkVersion niektórych z tych bibliotek posiada API 19 i jest nieco starsza niż wersja samego szablonu. Dlatego, aby uniknąć problemów, musisz zaktualizować biblioteki.

Poniżej znajdują się biblioteki, które wymagają modyfikacji:

• StickyListHeaders
  
• Progress Wheel
  

Otwórz plik build.gradle każdej bilbioteki i zmień wartość compileSdkVersion na 21, aby pasowała do compileSdkVersion szablonu.

compileSdkVersion 21

Nie zapomnij kliknąć przycisku Sync Now po wprowadzeniu zmian.

4. Uruchom szablon

W tym momencie, możesz uruchomić szablon aplikacji na urządzeniu lub emulatorze z systemem Android. Jednak, przed kliknięciem przycisku Run, wybierz konfigurację UIAppTemplate.

Podczas pierwszego uruchomienia aplikacji, możesz napotkać kilka błędów związanych z kodowaniem znaków. Błędy znajdują się w pliku o nazwie ProgressWheel.java, który należy do biblioteki Progress Wheel.

Aby w prosty sposób naprawić te błędy, otwórz plik, ustaw kodowanie na UTF-8 i zapisz go.

Po zakończeniu kompilacji, powinieneś zobaczyć ekran główny szablonu aplikacji.

Zachęcam do skorzystania z rysownika nawigacji, aby wyświetlić wszystkie układy, animacje i własne widoki dostępne w szablonie. Na przykład, wybranie Login Pages > Media wyświetli poniższy ekran.

Podsumowanie

Teraz możesz dostosować Material Design UI Android Template App, aby spełniał twoje wymagania. Posiada on ponad 50 różnych aktywności, pięć motywów i grubo ponad 100 plików XML układu. To oznacza, że możesz napisać swoją aplikację wybierając podzestaw elementów UI i przypisując do nich swoje dane.

Aby dowiedzieć się więcej o szablonie, zapoznaj się z obszerną dokumentacją znajdującą się z folderze docs.

Envato Market posiada do wyboru setki innych szablonów aplikacji na Androida. Między innymi szablony dla gier i kompletnych aplikacji jak również wszechstronne szablony startowe, takie jak ten użyty w poradniku. Zachęcam do zapoznania się z nimi, ponieważ mogą zaoszczędzić sporo czasu.