Popular Movies App: A Technical Look

After several weeks and many hours of work, it's complete: my first Android app for the Udacity Nanodegree. It's been a steep learning curve coming from iOS with no prior Java knowledge, but the project's challenges have made its completion even more rewarding.

As much as I enjoy the accomplishment, the journey has been the most important part. From reading the specification to receiving the code review, the last two months have been a great experience. The finished project isn't just a completed app, but a culmination of technical skills that demonstrate the Android framework, and what its developers, can do. This post showcases a few of the more interesting aspects of the Popular Movies app, how I chose to implement them, and the challenges faced along the way. 

The User Interface

According to the specification, the project displays a grid of posters for movies that are currently popular or highly rated among viewers. Tapping on a movie shows a screen that includes details such as release data, average rating, trailers, and reviews. There's also an option to mark a movie as a "favorite" for offline viewing.

When looking for movies, people are generally searching for a specific type, so in addition to the options to view "popular" and "top rated" movies, I also allow users to filter by genre. The number of available genres wouldn't be suitable for a tab-based layout or a spinner, so the filtering options are shown in a navigation drawer. 

Genres can be selected from the navigation drawer.

The actual movies themselves were displayed without borders, in a GridView. The image thumbnails also have text containing the movie's title. 

The details page is where things get interesting. It primarily consists of LinearLayouts and is designed for vertical scrolling. For version 2 of the project, I was required to display trailers and reviews for the selected movie. Although the built-in views are suitable for displaying this data, reusing multiple views would make the coding process much easier. For this reason, I created a compound view by subclassing view groups. Doing so allowed the reuse of multiple views, simplifying the code, without compromising the visual appearance. 

Custom views for trailers and reviews.

The Data Model

Data for the app is supplied by The Movie Database API. While I initially used standard HttpUrlConnections for version 1 of the project, part 2 demanded more requests than simply fetching movies. The first code review suggested I try the Retrofit library to help with networking, but because of its simplicity, I opted to use Volley for this project instead.

The data model was another important aspect of the user experience. By tapping the "favorite" button, movies would be saved to the device storage for offline viewing.

Although the requirements only asked for the movie data to be stored, I thought it would be the best experience to also persist trailers and reviews. That way, this information would still be available if the connection was offline, since no additional downloads would be required.

Each movie can have multiple trailers and multiple reviews, so this task is best solved with a relational database. Knowing the difficulty of working with raw SQLite, I decided to implement the data model using GreenDAO. The library had a few nuances making it more difficult to work with than my previous experience with Apple's Core Data, but it did its job well. I'm glad I gave it a try, though I intend to try out other ORM solutions before recommending its use.

The Challenges

Tackling a project of this scale is a challenge of its own, but there were a few specific challenges that I faced when building the app.

Because of the way Android manages the lifecycle of activities and fragments, they can be destroyed and recreated several times during the lifetime of an app. Events like rotating the device or moving an app to the background can cause these changes in the activity's lifecycle. As a result, it's important for developers to save and restore the UI state.

Doing so is a straightforward process but it's important to get it right. Because the app makes use of custom views, restoring these views' state is an added challenge. Saving and restoring each fragment can be tedious at times, but it's definitely worth it to provide the best user experience.

Another consideration in producing a quality app is handling edge cases. Because I wanted to persist movies and trailers along with the movie data, the potential for additional bugs was introduced. For example, a user could mark a movie as a "favorite" before the movies and trailers are downloaded. If the network were to go down before these downloads complete, the app would need to remember to download this data next time the network is available. These scenarios don't always happen, but when they do, a high quality app should handle them accordingly.

A final challenge involved adapting the UI for tablets with the master-detail flow. The two pane layout works well in landscape but most tablets in portrait mode don't have enough screen space. For the alternate, portrait mode layout, I took a less conventional approach, displaying the detail view as a popover. Perhaps it won't be the next UI design craze, though I still think it's an interesting solution to for two-pane layouts in portrait mode. Implementing it this way, the detail fragment can be reused across orientation changes, since it won't be tied to a separate activity like in the phone layout. 

The details page on a tablet in portrait mode.

Overall it was an incredible learning experience and the end product turned out great. In just 2 months, the great folks at Udacity took me from no Java knowledge to building a polished Android app. It's been an excellent journey so far and I can't wait to see what comes next.