Material Design

Material Design is the new design language introduced by Google.

In this talk I gave during DevFest Ghana 2015, we delve into what material design is about, how to get started and how it can be implemented on Android.

Transcript

1. MATERIAL DESIGN Material Design DevFest Ghana 2015 24 80 24 Kirk .S. Agbenyegah @savekirk Abakhi www.abakhi.com 09:30 #DevFest15GH
2. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources What is Material Design? Material is the metaphor Bold, graphic, intentional Motion provides meaning
3. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources What is Material Design?
4. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources Style Colors
5. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources Style Imagery
6. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources Style Icons
7. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources Style Typography
8. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources Style Writing Language Tone Capitalization Punctuation Global writing
9. 09:30 1. Intro 2. Style 3. Components 4. Going material 5. Resources Components
10. 09:30 Going material 1. Add the dependency dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.1.1' }
11. 09:30 Going material 2. Apply Material Theme <!-- Android 5.0 (API level 21) and above --> <!-- res/values/styles.xml --> <resources> <!-- your theme inherits from the material theme --> <style name="AppTheme" parent="android:Theme.Material"> <!-- theme customizations --> </style> </resources>
12. 09:30 Going material 2. Apply Material Theme <!-- Below Android 5.0 (API level 21) --> <!-- res/values/styles.xml --> <resources> <!-- extend one of the Theme.AppCompat themes --> <style name="AppTheme" parent="Theme.AppCompat.Light"> <!-- theme customizations --> </style> </resources>
13. 09:30 Going material 3. Set your primary colors <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_dark</item> <item name="colorAccent">@color/accent</item> </style>
14. 09:30 Going material - Toolbar <android.support.v7.widget.Toolbar app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:id="@+id/toolbar" android:background="?attr/colorPrimary" android:elevation="4dip"> </android.support.v7.widget.Toolbar> <LinearLayout> <include layout="@layout/toolbar"/> </LinearLayout> Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); Toolbar
15. 09:30 Going material - Toolbar <android.support.v7.widget.Toolbar app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:id="@+id/toolbar" android:background="? attr/colorPrimary" android:elevation="4dip"> </android.support.v7.widget.Toolbar> <LinearLayout> <include layout="@layout/toolbar"/> </LinearLayout> Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); Toolbar
16. 09:30 Going material - Toolbar <android.support.v7.widget.Toolbar app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:id="@+id/toolbar" android:background="? attr/colorPrimary" android:elevation="4dip"> </android.support.v7.widget.Toolbar> <LinearLayout> <include layout="@layout/toolbar"/> </LinearLayout> Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); Toolbar
17. 09:30 Going material - CardView dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:cardview-v7:23.1.1' }
18. 09:30 Going material - CardView <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_gravity="center" android:layout_width="200dp" android:layout_height="200dp" card_view:cardCornerRadius="4dp"> <!-- your content layout --> </android.support.v7.widget.CardView>
19. 09:30 Going material - Design Support Library dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:cardview-v7:23.1.1' compile 'com.android.support:design:23.1.1' }
20. 09:30 Going material - Snackbar Snackbar .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG) .setAction(R.string.snackbar_action, myOnClickListener) .show();
21. 09:30 Making it big
22. 09:30 Making it big
23. 09:30 Resources - Material design guidelines https://goo.gl/nLuCel
24. 09:30 Resources - Material Palette http://www.materialpalette.com
25. 09:30 Resources - Styling Android https://blog.stylingandroid.com
26. 09:30 Resources - Material Up http://www.materialup.com
27. 09:30 Resources - People to follow Roman Nurik http://roman.nurik.net Nick Butcher https://plus.google. com/+NickButcher Cyril Mottier http://cyrilmottier. com
28. MATERIAL DESIGN Thanks! DevFest Ghana 2015 24 80 24 Kirk .S. Agbenyegah @savekirk Abakhi www.abakhi.com 09:30 #DevFest15GH