Material Design is a design language developed by Google that simplifies Android application design through use of grid-based layouts, responsive animations, padding, and depth effects like lighting and shadows. It addresses issues with device variety, branding, usability, and development/design efforts. Key aspects of Material Design include surfaces, bold graphic design using typography, grids, color palettes, and imagery, animation transitions, and UI widgets like RecyclerView, CardView, floating action buttons, and CoordinatorLayout.

1. Material Design
Ahmed Mahmoud Nady

2. Agenda
1
surfaces
4
Animation
2
Bold Graphic Design
5
Adaptive Design.
3
6
UI Widgets
Introduction

3. Your Company Slogan Here and some Business Information E-Mail: me@materialdesigntemplate l Phone: +49 89 1726182
3
Introduction

4. >> Any Android application is just the
combination of transitions , themes , layouts
and some logic to perform a task.
>> We all knows very well that Any android
application is nothing without its design
>> So Design is Mandatory.

5. Situation
1. Device Variety
2. Branding
3. Usability
4. Development & Design effort

6. Variety

7. Branding & Usability

8. Development effort

9. Enter.. Material Design

10. >> Material Design is a design language
developed by Google for simplifying the
design of android applications.
>> Material Design makes more liberal use
of grid-based layouts, responsive
animations and transitions, padding, and
depth effects such as lighting and shadows.

11. Your Company Slogan Here and some Business Information E-Mail: me@materialdesigntemplate l Phone: +49 89 1726182
11
surfaces

12. Surfaces
2-Surfaces and edges of the material provide visual cues that are
grounded in reality.
1-Everything lives in asurface.

13. Elevation and shadow

14. Floating Action Button

15. How to add floating Action Button
• Add support:design library to build.gradle

16. Must be convert theme to AppCompat theme for styling information
• Set AppCompat as your parent theme

17. Floating Action Button Example
• Add the fab to your layout

18. Bold GraphicDesign

19. Bold Graphic Design
1-typography
2-grids
3-space
4-scale
5-color
6-imagery

20. Grid Keylines

21. Colors &Palettes
Use it in your app colors.xml , styles.xml

22. To Create your pallets
https://www.materialpalette.com

23. Typography

24. Imagery
Bold
Geomteric
Symmetrical

25. Layout
1
Appbar.
3
Side nav.

26. 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

27. 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

28. Animation

29. Transition Manager
• Introduced in KitKat
• Capture start and end state of elements
• Adapt the animation and do all the heavy lifting for you.
•
Default transition is AutoTransition (Automatically fades, moves or
resizes views)

30. Activity transition
Implementing Exittransition
Assign theme to your activity in manifest

31. Adaptive Design

32. Activity transition
Adapt to multiple screen sizes
Adaptive design breakpoints

33. Reveal

34. Divide

35. Reflow

36. Expand

37. UI widgets

38. UI widgets
1. Recycler View
2. Card View
3. Floating action button
4. Coordinator Layout

39. 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.

40. 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:

41. 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.

42. 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.

43. Thank you