Our first steps towards Material Design

Mantas VarnagirisMantas is passionate about all things Android.

As a UX-driven Engineer, he advised on the rebuild and built the new codebase with Akshay, helping the UX team understand the Material concepts too.

@mvarnagiris

The UX Lead for Depop, Mark has a background in user experience for mobile apps and the web.

Mark leads the design of how Depop looks, works and delights its community across the iOS and Android platforms.

@markjenkins

Mark Jenkins

“Depop – a marketplace that lets friends sell things to other friends - is becoming the one-stop destination to snap up second hand threads, sneakers, design, art and music”

– Jasmine Garnsworthy, StyleCaster

The Depop experience on Android was subpar and broken in many places.

We wanted to move towards a Material Design app.

The problem

Technical debt Time spent dealing with a legacy app that was broken.

Messy codebase A lack of speed in our development process.

Inconsistent An experience that didn’t match our iOS app.

Our solutionTo take our first steps towards a Material app, we put solid work intothe foundations – so that we can design and build faster in the future.

Material containersUpdated the chrome of the app (toolbar, keylines)

according to Material Design guidelines.

Consistent UICleaned up the UI layer. Used consistent styles across views.

Next stepsUpdate the content to follow Material Design guidelines.

Add animations that makes sense.

Attention to detailWe’re strong believers that the details make the experience – even if they are invisible.

We paid special attention to padding, margins, keylines, spacingand the layout structure, following some of the guidelines from Google.

Onboarding Home Feed Profile

Onboarding Home Feed Profile

StylesheetsImplementing consistency as a framework

Styles and resources<style name="Text.Body1" parent="TextAppearance.AppCompat.Body1"> <item name="android:textSize">14sp</item> <item name="fontPath">fonts/Roboto-Regular.ttf</item></style>

<style name="Text.Title" parent="TextAppearance.AppCompat.Title"> <item name="fontPath">fonts/Roboto-Medium.ttf</item></style>

<resources> <dimen name="keyline">16dp</dimen> <dimen name="keyline_content">72dp</dimen>

<dimen name="space_xlarge">24dp</dimen> <dimen name="space_large">16dp</dimen> <dimen name="space_normal">8dp</dimen></resources>

Themes

<style name="AppTheme.One" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">#00bcd4</item> <item name="colorPrimaryDark">#0097a7</item> <item name="colorAccent">#cddc39</item> <item name="colorIcon">#001122</item></style>

<style name="AppTheme.Two" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">#cccccc</item> <item name="colorPrimaryDark">#aaaaaa</item> <item name="colorAccent">#cc0000</item> <item name="colorIcon">#334455</item></style>

<resources> <declare-styleable name="Theme"> <attr name="colorIcon" format="color" /> </declare-styleable></resources>

Themes<View android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?colorPrimary" />

public static int getColor(Context context, @AttrRes int resId) { final TypedArray a = context.getTheme().obtainStyledAttributes(new int[]{resId}); final int color = a.getColor(0, 0); a.recycle(); return color;}

<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="?colorAccent" /></shape>

Demo

Github URL: http://git.io/vf5SJ

The outcome

We launched the appAn increase in 4 and 5 star reviews!

Featured in “The week’s Best apps”

Questions?Like what you see? Got a question? Fire away!

We’re looking for an amazing Android Engineer to join our team.

For more details: bit.ly/workatdepopor email to work@depop.com

Thank you, we’re hiring!