Movie App

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

Enter a caption
  1. 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:

https://github.com/enginebai/Movie-lol-android

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑