Logo

Mohsen Rezania
Software Engineer, Security Researcher, Android Developer, Computer Prof.

Contact Email
Iran, Fars Province

Stack Overflow Logo Github Logo Twitter Logo Linkedin Logo Telegram Logo


HomeAboutFeedArchive

Back Starting & Learning Material Design For Android Applications

As an Android Developer, using Google’s Material Design official website is the most important thing for developing an Android App.

But the question is, what exactly the Material Design is?

From here:

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

This is actually the new Google’s language for Applications, Websites and etc. We’re not trying to go so deep inside what that is but to know how to use it on Android Applications.

Using Material Design Guidelines on Android Apps

In another words, those (rules) are actually some useful and standard ways for developing an Android Application. You can use those rules and make standard applications by using Material Design Guidelines which is a really helpful way to design a very attractive and beautiful UI for your apps.

Let’s get started with a few examples. Imagine you’re trying to add some CardViews to your app and you might have added following codes which includes a TextView inside a CardView:

CardView

<!-- A CardView that contains a TextView -->
<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/mtrl_card_spacing"
    android:layout_marginTop="@dimen/mtrl_card_spacing"
    android:layout_marginRight="@dimen/mtrl_card_spacing"
    android:minHeight="200dp">
    
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/demo_card_text"/>
      
</androidx.cardview.widget.CardView>

It will be just a CardView and a TextView inside. But, that’s not the exact point. If you check this link, you’ll see the anatomy of a CardView which mentioned about the place of the TextView:

first_pic

There are still other widgets in there which are;

And etc which is a good example for a CardView. However, we’re talking & looking for some rules, some standard ways from Google Material Design and if you see the below image, you’ll understand what I’ve been talking about:

secondPic

Here, there is a Rich Media, Primary Text, Supporting Text and Actions which we can use this format for our CardViews in future but, here comes the rules.

secondPic

As you can see, the title TextView has 34dp from CardView’s above (margin-top = 34dp). Also, the CircleImageView’s size is 40dp. Simple, right?! :)

CardView’s Elevation Rules

After CardView’s TextView margins, we go through the CardView’s Elevation rules:

secondPic

As you can see, they already explained about some default behaviours on mobile.

On mobile, a card’s default elevation is 1dp, with a raised elevation of 8dp.

That’s it for now. Please check and refresh this post later again.

This article will be updated in future.

Resources:

Introduction

Material Card

Cards

Elevation



Comments