UI Design for Android

This talk presents a Concept of Android Material Design in Android Devlopement by Vijay Bhuva

Transcript

2. An Introduction to Material Design - Vijay Bhuva
3. • It is a design language developed by Google. What is Material design? It is a design with increased use of : • Grid-based layouts, • Responsive animations and transitions, • Padding, and • Depth effects, such as, lighting and shadows.
4. • UI stands for User Interface design • (it’s everything what the user sees, like buttons, text fields, images, etc.) What is UI & UX? • UX stands for User Experience design • (it’s how the user feels while navigating throughout the app, how user-friendly design is, etc.)
5. • UI stands for User Interface design • (it’s everything what the user sees, like buttons, text fields, images, etc.) What is UI?
6. • UX stands for User Experience design • (it’s how the user feels while navigating throughout the app, how user-friendly design is, etc.) What is UX?
7. Material design principles Material as a metaphor Meaningful motion Graphic These 3 principles help define the relationship between user and UI
8. 1: Material as a metaphor • The material signifies of the idea that every element in an application is made with flexible material with the use of shadows.
9. • The material signifies of the idea that every element in an application is made with flexible material with the use of shadows.
10. • The material signifies of the idea that every element in an application is made with flexible material with the use of shadows.
11. • The material signifies of the idea that every element in an application is made with flexible material with the use of shadows.
12. 2: Meaningful motion • A piece of material can move according to a person’s click/touch. • Every motion should be meaningful and not just for decoration. It should guide users to perform an action.
13. 3: Graphics • This principle refers to how material looks, using tools like typography, space, colors, grid, scales, imagery, etc These 3 principles combine to form a Material Design.
14. What is a style in android? • A collection of properties such as height, padding, font color, font size, background color, etc., that specify the look and format for a view.
15. Material design theme • The material theme is defined as: Dark material theme Light material theme
16. Color Palette • You can customize your app’s color palette to match your brand colors. https://material.io/guidelines/style/color.html
17. Color Palette • This is an example of a raw app theme, without any design attributes.
18. Color Palette Primary Dark Color Primary Color Secondary Color Text Primary Color • You can see how we can classify colours in a pattern that fits the app design and also makes sense.
19. Use alpha values for grey text, icons and dividers
20. Flat design for icons • Material icons use geometric shapes to visually represent ideas using bright colors, open spaces.
21. Icons • Android provides different size of icons, for different type of device-resolution and screen-dimension. ❖ Drawable-hdpi ❖ Drawable-mdpi ❖ Drawable-xhdpi ❖ Drawable-xxhdpi ❖ Drawable-xxxhdpi
22. Icons https://materialdesignicons.com/ https://www.flaticon.com/
23. Material Design Shadow • Shadows provide important visual cues about objects’ depth and directional movement.
25. Components • Application components are the necessary building blocks of an Android application and android provide different type of components. ❖ Bottom navigation ❖ Buttons ❖ Cards ❖ Toolbars ❖ Tabs
26. Component - Toolbar • Toolbar that’s used for branding, navigation, search, and actions. Mobile Portrait: 56dp Mobile Landscape: 48dp
27. Component - Button • A button consists of text and image that clearly communicates what action will occur when the user touches it. There are three types of main buttons: https://material.io/guidelines/components/buttons.html#
28. Component - Card • A card is a piece of paper that contains unique related data. • Cards may contain a photo, text, and a link about a single subject.
29. Component - Bottom navigation • Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. Height: 56dp Icon: 24 x 24dp
30. Component - Tab • Tabs make it easy to explore and switch between different views.
31. 9-Patch image • 9 Patch images are stretchable, repeatable images reduced to their smallest size. • The image will be flexible for different screen size devices and will take-up less memory space. • Example: Whatsapp chat bubble
32. Text Fields • Text fields allow the user to input text. They can be single line, with or without scrolling, or multi-line, and can have an icon. Text field can be used as ❖ Single-line text field ❖ Floating labels ❖ Multi-line text field ❖ Full-width text field ❖ Character counter ❖ Auto-complete text field ❖ Search filter Floating label
33. Snackbars • They automatically disappear after a timeout or after user interaction elsewhere on the screen. Snackbar specs: • Action button: Roboto Medium 14sp, all-caps text • Mobile height: 48dp (single-line), 80dp (multi-line)
34. Typography Typographic scale and basic styles • The basic set of styles are based on a typographic scale of 12, 14, 16, 20 and 34.
35. Typography Roboto Opensans Montserrat Poppins Rubik Raleway Lato Circular • Most popular fonts:
36. Android Material UI Design Template
41. Questions?
42. References Color Tool Material Design Color palette Material-ui-design-kit Material Design icons Flat icon
43. Thank you! https://www.behance.net/vijaybhuva