Skip to main content
Android UI Design with Kotlin
CHAPTER 10 Beginner

Material Design Principles

Updated: May 31, 2026
6 min read

# CHAPTER 10

Material Design Principles

1. Introduction

You know how to put buttons, text, and images on a screen. But how do you make them look *professional*? How do you ensure your app feels at home on an Android device? The answer is Material Design. Created by Google in 2014 and continuously updated (now Material You/Material 3), Material Design is a comprehensive design system. It dictates how UI elements should look, feel, and behave. In this chapter, we will learn the philosophy behind Material Design and how to apply it to your app.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Understand the core philosophy of "Material as a Metaphor".
  • Implement a cohesive Color Palette (Primary, Secondary, Surface).
  • Apply a typographic scale to ensure text hierarchy.
  • Utilize Elevation to create depth and focus.
  • Use shape theming for brand identity.

3. The Philosophy: Material as a Metaphor

Material Design is inspired by the physical world—specifically paper and ink. In the physical world, objects cast shadows, they have a certain thickness, and they cannot pass through one another. Material Design brings these physical rules to the digital screen.
  • UI elements are "surfaces" (like pieces of paper).
  • Shadows (elevation) indicate which surface is above another.
  • Motion should be meaningful and respect the laws of physics (e.g., easing in and out).

4. Color Palettes

A good UI doesn't use 20 different colors. Material Design uses a structured palette to communicate hierarchy and state.
  • Primary Color: The color displayed most frequently across your app's screens and components (e.g., the app bar).
  • Secondary Color: Used to accent and distinguish your product. Great for Floating Action Buttons (FABs), sliders, and active states.
  • Surface Color: The background color of components like Cards, Sheets, and Menus.
  • Error Color: Indicates warnings and errors (usually a shade of red).
  • "On" Colors: The color of text or icons placed *on top* of the primary or surface colors (e.g., colorOnPrimary is usually white or black).

5. Typography and Hierarchy

Reading text is the primary way users interact with your app. Material Design defines a Type Scale—a set of predefined text styles. Instead of guessing font sizes, use the semantic styles provided by the MaterialComponents theme:
  • Headline1 to Headline6: For large screen titles.
  • Subtitle1 and Subtitle2: For medium emphasis text.
  • Body1 and Body2: For the main content/paragraphs.
  • Button: For button text (usually all-caps in older Material, sentence case in M3).
  • Caption: For small, supplementary text like timestamps.
xml
123456 
<!-- Example of using a Material text appearance -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Main Content Here"
    android:textAppearance="?attr/textAppearanceBody1" />

6. Elevation and Depth

The screen is flat, but your UI shouldn't be. Elevation is the relative depth, or Z-axis, between two surfaces.
  • A background layout has an elevation of 0dp.
  • A Card might have an elevation of 2dp, casting a small shadow.
  • A Floating Action Button (FAB) might have an elevation of 6dp, casting a larger shadow, indicating it floats high above the content.

*Rule of thumb:* The higher the elevation, the more important the element is, and the larger its shadow will be.

7. Shapes and Theming

Material Design isn't just about rounded corners. You can globally theme the shape of all components in your app. In your themes.xml, you can define shape appearances (Small, Medium, Large components). If you decide your brand uses sharp cut corners instead of rounded ones, you change the shape theme once, and every Button, Card, and Dialog in your app instantly updates.

8. Motion Design

Animation isn't just for showing off; it's functional.
  • Provide Feedback: When a user taps a button, a ripple effect confirms the tap.
  • Show Hierarchy: When a user clicks a list item, the new screen should slide or expand from that item, showing the relationship between the two screens.

9. Common Mistakes

  • Shadow Abuse: Adding heavy drop shadows to every single element on the screen creates visual noise and confusion. Use elevation sparingly to highlight important interactions.
  • Low Contrast: Using light gray text on a white background. Always ensure your text passes WCAG contrast accessibility guidelines.
  • Clashing Colors: Using too many vibrant colors. Stick to your Primary and Secondary palette.

10. Best Practices

  • Start with a white/light gray background, set your Primary brand color for the App Bar, and use a contrasting Secondary color for call-to-action buttons.
  • Use ?attr/ references in your XML instead of hardcoding colors (e.g., use ?attr/colorPrimary instead of #FF0000). This makes implementing Dark Mode trivial later.

11. Exercises

  1. 1. Visit the website material.io and use their color tool to generate a Primary and Secondary color palette for a hypothetical Coffee Shop app.
  1. 2. In an Android layout, stack three MaterialCardViews on top of each other. Set their elevations to 2dp, 8dp, and 16dp. Observe the differences in their shadows.

12. UI Design Challenges

Challenge: Redesign the Profile Layout from Chapter 4 using strict Material Design principles. Replace hardcoded text sizes (16sp, 28sp) with semantic textAppearance attributes (?attr/textAppearanceHeadline5, ?attr/textAppearanceBody2).

13. MCQ Quiz with Answers

Question 1

What is the purpose of the "Secondary Color" in Material Design?

Question 2

How does Material Design simulate physical depth on a flat screen?

14. Interview Questions

  • Q: What is the difference between colorPrimary and colorOnPrimary?
  • Q: Explain the concept of "Material as a Metaphor."
  • Q: Why is it recommended to use semantic typography (like Body1) instead of hardcoded text sizes (like 14sp)?

15. FAQs

Q: Do I have to follow Material Design exactly? What if I want a custom look? A: Material Design is a set of guidelines, not absolute laws. You can heavily customize Material components (using Shape theming, custom fonts, and colors) to match your brand while still benefiting from their accessibility and interaction states.

16. Summary

Material Design transforms arbitrary UI decisions into a logical, physics-based system. By utilizing structured color palettes, semantic typography scales, and meaningful elevation, you can create applications that are intuitive, beautiful, and feel inherently "Android."

17. Next Chapter Recommendation

With our design principles solidified, it's time to build the structural backbone of our app. How do users navigate between different sections? In Chapter 11: AppBar, Toolbar, and Navigation Drawer Design, we will build the top-level navigation components used by millions of apps.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter RecyclerView and Beautiful List Design
Next Chapter AppBar, Toolbar, and Navigation Drawer Design

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5