I choose a movie information & comments app (Android) as my first side project, in this series, I will introduce the whole project including features, UI design, coding, let’s start it.
In this part, there are three topics to show you:
- Functional Map
- UI Design
Functional Map & Flow
The features in this app is quite simple, just show movie list in front page, and show the detail information, photos, trailers, and comments of movie when clicking one of the movie items in list.
I use Sketch 3 as my UI design tool, just create a new project from Material Design template.
The following list is the component I used in the project, because this project was finished before Google released the Android Design Support Library, there are some components can be replaced by new material design widgets:
- android.support.v7.widget.Toolbar and MaterialTab on the top.
- android.support.v7.widget.CardView for each movie in the list.
- FAB to sort the movies.
- SuperRecyclerView to show move list.
- ObservableScrollView for the whole page to interact with toolbar when scrolling the page.
- Material which provides some material design components to pre-Lolipop Android.
- ListBuddiesLayout for photo list.
Here is the demo video:
My development tools is Android Studio 1.4. So let’s start from the front page.
Here are the components or libraries I used.
First step is to create a new project with Navigation Drawer Activity, then put the dependencies to build.gradle and sync:
The following diagram is the front page activity architecture, a MainActivity to hold a MoviePageFragment which included the MaterialTabs and ViewPager in it, and a MovieListFragment for each tab in ViewPager.
Based on the activity architecture, we create the layout files:
And then start the activity/fragment code: (I just put the important part only!)
In MainActivity.java, we just override the onNavigationDrawerItemSelected() method when clicking the item of navigation drawer to show movie page.
In MovieListFragment, we put a SuperRecyclerView to display movie list which is a wrapper class of RecyclerView that provides some common powerful features used in list. In SuperRecyclerView, we have to add swipe-to-refresh event and scroll listener to implement endless list, and finally, add a adapter to render the movie item in RecyclerView:
The full code is also available on github: