---
title: "CineMy for Android, in Material Design"
description: "Last year CineMy got the iOS 7 treatment on the iPhone. Now it's Android's turn, redesigned properly in Material Design instead of ported over."
url: "https://rayson.me/writing/cinemy-android/"
category: "Design"
author: "Janarayson"
published: 2015-07-25
---

Last year I redesigned [CineMy for the iPhone](/writing/cinemy-2/) in the flat look of iOS 7. Now it's Android's turn, in Material Design, the design language Google brought out last year with Lollipop.

I didn't want to port the iPhone version over. Every platform deserves its own redesign, which is what I keep telling people in my [UX training](/writing/ux-innovate-2014/), so this is me practising it. It keeps the same red and the same camera, and everything else follows Android.

<Screens
  screens={[
    { src: splash, alt: 'The Android splash screen: the white CineMy camera on red, movie showtimes at your fingertips, and Sign Up and Sign In along the bottom' },
    { src: signUp, alt: 'Sign up: a Sign up with Facebook button, or a username, password and email address in Material text fields' },
    { src: movies, alt: 'Movies as a two-column grid of posters: Pokemon the Movie, Transformers, Big Hero 6 and Monsters, Inc.' },
    { src: drawer, alt: 'The navigation drawer: the user name, then Movies, Cinemas, Box Office, Favourites and Go Now!, with Settings and Log out at the bottom' },
  ]}
  caption="Signing up, movies as a poster grid, and the navigation drawer."
/>

## Movies

Movies are a grid of posters now, and the navigation drawer slides out from the side the way it does on Android. A movie opens with its poster up top, the Rotten Tomatoes score, and tabs for more info, trailers and showtimes. The showtimes have a dropdown for the day.

<Screens
  screens={[
    { src: movieDetails, alt: 'Big Hero 6: the poster across the top, English, PG-13, 102 minutes, an 89% Rotten Tomatoes score, the synopsis, and More Info, Trailers and Showtimes tabs' },
    { src: movieMore, alt: 'The Big Hero 6 page scrolled down, with the rest of the synopsis' },
    { src: trailers, alt: 'Trailers: a list of Big Hero 6 trailers with thumbnails' },
    { src: movieShowtimes, alt: 'Showtimes for today: TGV Sunway Pyramid, GSC Midvalley and Growball Cinemax with their times, and a Today dropdown at the top' },
  ]}
  caption="A movie, its trailers, and its showtimes."
/>

## Cinemas

Cinemas are split into nearest and all. A cinema has a map with a round navigate button, and tapping it lets you pick Google Maps, Waze or Papago to get there. Its showtimes are the posters again, each with that day's times underneath.

<Screens
  screens={[
    { src: cinemas, alt: 'Cinemas, Show Nearest and Show All tabs, listing TGV Sunway Pyramid, Growball Cinemax, GSC Midvalley, MBO Citta Mall and more with their distances' },
    { src: cinemaDetails, alt: 'A cinema page: a map with a round orange navigate button, the cinema name and address, a contact number, Favourites and Showtimes' },
    { src: cinemaNavigate, alt: 'The navigate button pressed: a choice of Google Map, Papago and Waze' },
    { src: cinemaShowtimes, alt: 'A cinema showtimes for today as a grid of posters, Big Hero 6, Pokemon, Transformers and Monsters, Inc., with times under each' },
  ]}
  caption="Cinemas, one cinema, getting there, and its showtimes."
/>

## Go Now! and the rest

Go Now! has tabs for distance and showtimes, and tapping a movie gives you its details or the cinema's. In settings you can set how far around you to look, and how far ahead Go Now! looks, from thirty minutes to two hours. Favourites swipe away with an undo, and there's the box office, a search across movies and cinemas, and screens for when there's no connection or no location.

<Screens
  screens={[
    { src: goNow, alt: 'Go Now! with Distance and Showtimes tabs: Pokemon at GSC Midvalley starting at 11:15 AM, 2.1 km away, then Transformers and Big Hero 6' },
    { src: goNowActions, alt: 'Go Now! with each result turned into two coloured buttons, Movie Details and Cinema Details' },
    { src: favourites, alt: 'Favourites after a swipe: two cinemas left and an Entry Removed bar with Undo' },
    { src: boxOffice, alt: 'Box Office, US and Malaysia tabs, with the top five films numbered in large type beside their posters' },
  ]}
  caption="Go Now!, its shortcuts, favourites, and the box office."
/>

<Screens
  screens={[
    { src: search, alt: 'Search results for Big Hero 6 under Movies and Cinemas tabs' },
    { src: settings, alt: 'Settings: Location Radius 5 km, and a Go Now! Time Range dropdown open on 30, 60, 90 and 120 minutes' },
    { src: noConnection, alt: 'Movies with no internet connection: an exclamation mark in a circle and the words No internet connection' },
    { src: locationOff, alt: 'Go Now! with a bar at the bottom saying Your location couldn\'t be found' },
  ]}
  caption="Search, settings, and when things go wrong."
/>