Most of you love material design, isn’t it? For all those developers out there, we will today tell you simple things which will empower you to punch in a dose of material design in the apps which you are developing. While Jellybean & KitKat OS based devices, its high time that you should work towards making efforts to make your apps material design friendly. It’s been good amount of time of Lollipop release for Android devices and there are some really cool and simple ways to bring in the material design to your apps supporting the older OSes as well.
Ways to materialize apps with Material Design:
- Themes & icons using App Compact,
- Icons from Android Asset Studio,
- Design Pattern,
- Components from free to use libraries
1). Themes & icons using App Compact:
V21 of the library comes with the new version which comes along with the SDK 5.0. While this one covers the most of the materialization, with this you will get the flat action bars along with the no shadows and app icon along with the title as well. The new overflow icon along with the three circles too is a part of the menu.
There are 2 themes which are Dark (default, use it as Theme.AppCompact) and Light (Theme.AppCompact.Light). To lose the action bar use Theme.AppCompact.NoActionBar or Theme.AppCompact.Light.NoActionBar.
The styles.xml will now become as;
<style name=”AppTheme” parent=”AppTheme.Base”/>
<style name=”AppTheme.Base” parent=”Theme.AppCompat”>
Note that the colorPrimary refers to the color of the action bar, colorPrimaryDark refers to the color of the status bar and colorAccent is the color of the tinted widgets.
Make sure that the activities must now extend to the ActionBarActivity and for reference the action bar you must use getSupportActionBar();
If you app has got the navigation drawer, you must use getSupportActionBar().setDisplayHomeAsUpEnabled(true); and then the drawer icon will turn into back arrow when the drawer is open or vice versa as shown in a gif below;
2). Icons from Android Asset Studio
Android Asset Studio is an awesome tool for icon generator and a nine patch image generator. This is no less than a God’s gift when it comes to the assets required for the design. For most of the apps which you are making for your app can be taken directly from Google itself as Google recommends developers to use its icons which are royalty free & open source. One can generate flat launcher icons, action bar icons or generic icons from your images, clipart or from the text. For all the generic icons, you can specify the DPI with the standard sizes like xxhdpi, xhdpi, hdpi & mdpi at Android Asset Studio.
3). Design Pattern
Swipe to refresh is the next smart thing which is there in Material Design and if you want to give this new look to your app which is also given by Gmail and other Google apps with the circular spinner, then this one is for you;
SwipeRefreshLayout swipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
swipeLayout.setColorSchemeResources(R.color.red, R.color.green, R.color.blue);
In the Layout.XML:
<android.support.v4.widget.SwipeRefreshLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:id=”@+id/swipe_refresh_layout” android:layout_width=”match_parent” android:layout_height=”match_parent”> …</android.support.v4.widget.SwipeRefreshLayout>
<resources> <colorname=”red”>#f44336</color> <colorname=”green”>#4caf50</color> <colorname=”blue”>#03a9f4</color></resources>
Roboto font which is used for the material desing too has been updated along with the release of Material design. So to use it, or any custom fonr, drop the font in the assets folder;
Typeface robotoRegular=Typeface.createFromAsset(getAssets(),”Roboto-Regular.ttf”);//Then set it, for example to a TextViewtextView.setTypeface(robotoRegular);
You can download the latest version of Roboto font as well.
5). Components from free libraries:
Custom free libraries are again an awesome piece when it comes to developing an android app as these are the core differentiators when it comes to the other apps. So let’s check out on what are some of the custom libraries which you can make use of.
c). Floating Action Bar
Source: Floating Action Bar
Do let us know in the comments section just in case if you have any more things when it comes to the material design or things related to the development of apps for material design. We will very soon be coming out with more such meaningful guides for the android developer community as at androidadvices, its all about android.