Depop - "Our first steps towards Material Design" @ London Android Meetup
1 like1,173 views
We spoke about how the Depop UI was made consistent using principles of Material Design as well as how we developed the style sheet to make the app styleable in the shortest amount of time. This enabled us to rebuild the app from the ground up, laying down solid foundations for future development. www.depop.com
![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>](https://image.slidesharecdn.com/londroidpresentation1-150429051858-conversion-gate01/85/Depop-Our-first-steps-towards-Material-Design-London-Android-Meetup-15-320.jpg)
Depop - "Our first steps towards Material Design" @ London Android Meetup
- 1. Our first steps towards Material Design
- 2. Mantas Varnagiris Mantas 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
- 3. 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
- 4. 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
- 5. The Depop experience on Android was subpar and broken in many places. We wanted to move towards a Material Design app. The problem
- 6. 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 didnt match our iOS app.
- 7. Our solution To take our first steps towards a Material app, we put solid work into the foundations so that we can design and build faster in the future.
- 8. Material containers Updated the chrome of the app (toolbar, keylines) according to Material Design guidelines. Consistent UI Cleaned up the UI layer. Used consistent styles across views. Next steps Update the content to follow Material Design guidelines. Add animations that makes sense.
- 9. Attention to detail Were strong believers that the details make the experience even if they are invisible. We paid special attention to padding, margins, keylines, spacing and the layout structure, following some of the guidelines from Google.
- 10. Onboarding Home Feed Profile
- 11. Onboarding Home Feed Profile
- 12. Stylesheets Implementing consistency as a framework
- 13. 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>
- 14. 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>
- 15. 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>
- 17. The outcome
- 22. We launched the app An increase in 4 and 5 star reviews!
- 24. Featured in The weeks Best apps
- 25. Questions? Like what you see? Got a question? Fire away!
- 26. Were looking for an amazing Android Engineer to join our team. For more details: bit.ly/workatdepop or email to work@depop.com Thank you, were hiring!