Using a single layer for the active state

The first approach consists of showing the filled-bookmark icons on top of the original ones when an item is bookmarked. In order to do so, we'll add a filled version of the bookmark icon on top of the empty one and control the opacity with an animation when the user clicks on the corresponding area.

First, we start by creating a new Hype prototype using a 360x640 px scene and adding the activities view mock-up as a layer in the background. Next, we add the filled-bookmark icon as a new layer, placing it on top of the bookmark icon of the first element in the list.

The layer representing the bookmark ...

Get UX Design for Mobile now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.