Guide

Guide to make your Android App with Material Design Ready – Quick Techniques

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.

materialdesign

Ways to materialize apps with Material Design:

  1. Themes & icons using App Compact,
  2. Icons from Android Asset Studio,
  3. Design Pattern,
  4. Typography
  5. 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;

<resources>

   <style name=”AppTheme” parent=”AppTheme.Base”/>

   <style name=”AppTheme.Base” parent=”Theme.AppCompat”>

       <item name=”colorPrimary”>@color/colorPrimary</item>

       <item name=”colorPrimaryDark”>@color/colorPrimaryDark</item>

       <item name=”colorAccent”>@color/colorAccent</item>

   </style>

</resources>

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();

ezgif.com-crop

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.

launcher

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.setOnRefreshListener(this);

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>

In Colors.xml

<resources>  <colorname=”red”>#f44336</color>  <colorname=”green”>#4caf50</color>  <colorname=”blue”>#03a9f4</color></resources>

4). Typography

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);

roboto

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.

a). Bottomsheet:

bottomsheet2 bottomsheet1

Source: Bottomosheet

b). Snackbar

 Screenshot_2015-02-07-16-05-01 Screenshot_2015-02-07-16-04-53

Source: Snackbar

c). Floating Action Bar

 Screenshot_2015-02-07-17-30-18 Screenshot_2015-02-07-17-30-32

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.

via

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.

To Top