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?
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
<!-- 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
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:
Here, there is a
Supporting Text and
Actions which we can use this format for our
CardViews in future but, here comes the rules.
As you can see, the title
CardView’s above (
margin-top = 34dp). Also, the
CircleImageView’s size is
40dp. Simple, right?! :)
CardView’s Elevation Rules
TextView margins, we go through the
CardView’s Elevation rules:
As you can see, they already explained about some default behaviours on mobile.
On mobile, a card’s default
1dp, with a raised
- You can also change the elevation value by
That’s it for now. Please check and refresh this post later again.
This article will be updated in future.