Movie app side project [Part 1]

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:

  1. Functional Map
  2. Flow
  3. UI Design

Functional Map & Flow

Functional Map
UI 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.

UI Design

Sketch
UI Flow with real design

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:

Movie List

  1. android.support.v7.widget.Toolbar and MaterialTab on the top.
  2. android.support.v7.widget.CardView for each movie in the list.
  3. FAB to sort the movies.
  4. SuperRecyclerView to show move list.

Movie Detail

  1. ObservableScrollView for the whole page to interact with toolbar when scrolling the page.
  2. Material which provides some material design components to pre-Lolipop Android.

Photo List

  1. ListBuddiesLayout for photo list.

Here is the demo video:

That's it. In the next part, I will show some sample code to demonstrate how to use the components mentioned above.