How to Material Design in Android
Material design was the talk of the Android town, when it first made it appearance. Such an appealing look expanding upon the card view design that debuted in Google products list.
The features it gives such as animations, transitions, elevations, lighting, and shadows is still recommended by designers who opt to choose third party plugins.
In this article, we shall see how we can implement Material design, the design that provides beauty and style to your application.
1. At first, we need to set the material design theme
The first step in the design is to change the theme of your app to Material.
Open up your styles.xml file, and add the below lines of code.
|
1 2 3 4 5 6 |
<resources> <!-- your theme inherits from the material theme --> <style name="AppTheme" parent="android:Theme.Material"> <!-- Customize your theme here --> </style> </resources> |
2. Elevations and Shadows
There are more than one ways of creating shadows to UI objects in XML, like using layer-list, 9-patch image as background etc,. But still, material design team suggests designers to design layouts confirming to the material design guidelines.
The option they provide for view shadows is ‘elevation’. To use the feature we have to use the android: elevation attribute to the specific view in our layout.
The more the elevation, the more the shadow would be.
For example,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<Button android:id="@+id/btnSusp" android:layout_width="328dp" android:layout_height="50dp" android:layout_marginLeft="16dp" android:layout_marginRight="8dp" android:layout_marginTop="66dp" android:background="@drawable/fourshadow" android:elevation="30dp" /> <Button android:id="@+id/btnSusp" android:layout_width="328dp" android:layout_height="50dp" android:layout_marginLeft="16dp" android:layout_marginRight="8dp" android:layout_marginTop="66dp" android:background="@drawable/fourshadow" android:elevation="60dp" /> |
In the above layout, we have two buttons where the elevation of first button is 30dp, and the elevation of second is 60dp. The second button will be having twice the elevation of button one and the amount of shade would be also twice for second button.
3. Scroll Events
Google has provided another major feature with the material design. The scroll events they provide depend mainly on the CoordinatorLayout structure.
Now let us make some scrolling effect.
First, add the support design dependency to your gradle
compile ‘com.android.support:design:27.0.2’
Now design the xml part.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawersupport" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.CoordinatorLayout android:id="@+id/rtLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:expandedTitleMarginStart="70dp"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="260dp" android:theme="@style/AndroidCustomTheme"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/clp_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:id="@+id/tlbar" android:layout_width="match_parent" android:layout_height="40dp" android:background="?attr/colorSecondary" android:minHeight="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true" app:layout_behavior="@string/bar_scroll_view"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="26dp" android:text="Android App Material Demo" android:textColor="#808281" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="26dp" android:text="Android App Material Demo" android:textColor="#808281" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="26dp" android:text="Android App Material Demo" android:textColor="#808281" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> </android.support.v4.widget.DrawerLayout> |
In your java class, connect the Id’s like this,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public class MaterialActiv extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_material); initInstancesDrawer(); } private void initInstancesDrawer() { Toolbar toolbar = (Toolbar) findViewById(R.id.tlbar); setSupportActionBar(toolbar); CollapsingToolbarLayout collapsing = (CollapsingToolbarLayout) findViewById(R.id.clp_toolbar); collapsing.setTitle("Android App Developers Blog"); } } |
4. Material Design Lists
When we need to design a list or card, we use RecyclerView. The Recycler with waterial design is a more improved version of the existing ListView.|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/layout_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.gurusurend.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/myrecycler" android:scrollbars="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </RelativeLayout> |
In the java class, we use an adapter that helps display the content from the defined layout manager.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public class MyActivity extends AppCompatActivity { RecyclerView myRecyclerView; RecyclerView.Adapter myAdapter; RecyclerView.LayoutManager myLayManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.my_activity); myRecyclerView = (RecyclerView) findViewById(R.id.myrecycler); myRecyclerView.setHasFixedSize(true); myLayManager = new LinearLayoutManager(this); myRecyclerView.setLayoutManager(mLayoutManager); myAdapter = new MyAdapter(mylistdata); myRecyclerView.setAdapter(myAdapter); } } |
