Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android Material Design

1,139 views

Published on

It's all about the material design and UI features which introduced with Material design.

Published in: Technology
  • Be the first to comment

Android Material Design

  1. 1. Material Design Ankit Shandilya Dec 29th, 2015
  2. 2. Agenda 1 What, Why & How. 2 Principals. 3 APIs. 1 What, Why & How. 2 Principals. 3 APIs.
  3. 3. Your Company Slogan Here and some Business Information E-Mail: me@materialdesigntemplate l Phone: +49 89 1726182 3 What, why & How
  4. 4. Situation 1. Device Variety 2. Branding 3. Usability 4. Development & Design effort
  5. 5. Variety
  6. 6. Branding & Usability
  7. 7. Development effort
  8. 8. Enter.. Material Design
  9. 9. Principal
  10. 10. Material is the metaphor
  11. 11. Material Design is a design language developed by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer Matías Duarte explained that, "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink. Material Design can be used in Android version 2.1 and up via the v7 appcompat library, which is used on virtually all Android devices that were made after 2009.
  12. 12. Surfaces & Shadows
  13. 13. Element of design
  14. 14. Graphic Intentional 1. Color 2. Typography 3. Imagery 4. Layout
  15. 15. Color
  16. 16. Typography
  17. 17. Imagery Bold Geomteric Symmetrical
  18. 18. Layout 1 Systembar. 2 Appbar. 3 Side nav.
  19. 19. Systembar Status bar contains notification icons and system icons. On Chrome, the top bar contains the window controls: minimize, full screen, and close. In a Chrome app, the top bar can disappear, and the window controls are then brought into the app b Metrics: Status bar height: 24dp Chrome barheight: 32dpar
  20. 20. Appbar App bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions. Metrics: Mobile Landscape: 48dp Mobile Portrait: 56dp Tablet/Desktop: 64dp
  21. 21. Side nav Side nav bars can be pinned for permanent display or float temporarily as overlays. Side navs can be positioned on the left or right side of the screen. Metrics: Width = Screen width − 56 dp Maximum width: 320dp
  22. 22. APIs
  23. 23. Api : material theme <!-- res/values/styles.xml --> <resources> <!-- your app's theme inherits from the Material theme --> <style name="AppTheme" parent="android:Theme.Material"> <!-- theme customizations --> </style> </resources>
  24. 24. Defining additional styles to theme Baseline grids Keylines Spacing Touch target size Layout structure
  25. 25. Api : UI widgets 1. Recycler View 2. Card View 3. Floating action button 4. Coordinator Layout
  26. 26. Recycler View RecyclerView is more advanced and flexible and efficient version of ListView. RecyclerView ViewGroup is an container for larger data set of views that can be recycled and scrolled very efficiently. RecyclerView can be used for larger datasets to be rendered on the UI like a list. RecyclerView provides maximum flexibility to design different kind of views Android RecyclerView falls under the material design of android. Android RecyclerView short and simple as it consists a huge number of classes and each one of them is designed to be customized.
  27. 27. Card View Card view is a new component that does not "upgrade" an existing component. The CardView UI component shows information inside cards. We can customise its corners, the elevation and so on. We want to use this component to show contact information. These cards will be the rows of RecyclerView and we will see later how to integrate these two components. By now, we can define our card layout:
  28. 28. Floating action button Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the fabSize attribute.
  29. 29. Coordinator Layout The Coordinator Layout is one of the new powerful layouts introduced in the material design support library. We already talked about the Navigation View and the Floating Action Button, but now it´s time to put everything to work together and coordinate their animations. That´s what this new layout is all about: based on a set of rules defined in Behaviors, we can define how views inside the Coordinator Layout relate each other and what can be expected when one of them changes. I´ll talk about behaviours in a future post, but they identify which views another view depend on, and how they behave when any of these views changes.
  30. 30. Thank you

×