Tools

Implementing Material Design in Android Apps

Apps UI is made fascinating by using Material design. By nature, humans are attracted to things that appeal them visually, so the design of an application matters a lot as poor design lead to uninstallation of the application. Material design adds beauty and elegance to the application and here, in this article, we are going to look at some key principles of material design that play the vital role in design.

In order to get started with material design, we shall apply material design theme. In the styles file, copy the following code.

<!-- res/values/styles.xml -->
<resources>
 <!-- your theme inherits from the material theme -->
 <style name="AppTheme" parent="android:Theme.Material">
 <!-- theme customizations -->
 </style>
</resources android:elevation>

Creating a Floating Action Button (FAB)

A Floating Action Button (FAB) is a colored circular button that floats above the rest of screen in-app and is a way of displaying a primary action. FAB has the greatest elevation level that’s why it floats on the screen. FABs come in standard sizes and elevation levels, usually it comes with 6 dp of elevation and 40 or 56 dp in diameter.
For implementing the FAB, Android Studio comes with a Basic activity that has a built-in FAB element as shown below. However, it’s important to learn to develop these for upgrading old applications.
Add the following code to the Build.gradle:

dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile 'com.android.support:appcompat-v7:25.3.1'
 compile 'com.android.support:design:25.3.1'
 }

The design library makes it easy to implement the material design. Following is the definition of the FAB that we need for our layout file. TranslationZ means that the button will rise up to 12dp when pressed. This FAB will elevate and show ripples when touched.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.vaatiesther.fab.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:elevation="6dp"
    android:translationZ="16dp"
    app:fabSize="normal"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

Creating surfaces with Elevations

Creating shadows in material design is possible by using elevation. To fix elevation in surfaces, we use the android: elevation attribute as shown below. Below we have two different surfaces that cast different shadows, one at 4 dp and the other at 8 dp. Higher the elevation, more the shadow cast.

<FrameLayout
 android:layout_width="match_parent"
 android:layout_height="200dp"
 android:layout_margin="16dp"
 android:background="#fff"
 android:elevation="4dp"
 ></FrameLayout>
<FrameLayout
 android:layout_width="match_parent"
 android:layout_height="200dp"
 android:layout_margin="16dp"
 android:background="#fff"
 android:elevation="8dp"
 ></FrameLayout>

Creating Lists

The RecyclerView widget is used to create lists with material design. The Recycler widget is an advanced version of the traditional ListView. It uses a layout manager and an adapter.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.vaatiesther.racycler.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview1"
        android:scrollbars="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
</RelativeLayout>

After adding the widget, we attach the layout manager to an adapter that will be used to display the data.

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);
        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);
        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

Creating Scroll Events

Scrolling is a vital aspect of material design which cannot be ignored. Google’s Material Design’s scrolling effects depend on the CoordinatorLayout design and there are various ways to implement it. In order to implement scrolling event, first, make sure you have the below dependency in your grade file: compile ‘com.android.support:design:26.0.0-alpha1’
Add the following code to your XML file

<android.support.v4.widget.DrawerLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_design_support_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleMarginStart="60dp">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="255dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    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/appbar_scrolling_view_behavior">

            <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="Androi Material design"
                    android:textColor="#666" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="26dp"
                    android:text="Androi Material design"
                    android:textColor="#666" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="26dp"
                    android:text="Androi Material design"
                    android:textColor="#666" />

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

After that bind to the UI elements from the Java file like this,

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    CollapsingToolbarLayout collapsingToolbarLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initInstancesDrawer();
    }
    private void initInstancesDrawer() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbarLayout.setTitle("Android Authority");
    }
}

Color and Material Design Color Palettes

Color and material design color palettesColor can be used to distinguish items. It can also be used to focus on something or implying hierarchy and structure of elements in an application. Material design encourages app designers to embrace purposeful uses of color to make apps visually appealing. It provides a color tool and color pallets which make it accessible and efficient to design UI. Color can be used to create a hierarchy like bright colored app bars make an app to stand out. The example below shows how to use color and color pallets to create a contrast between elements.

Hopefully, this article would help you in implementing the material design in your app design. There many more tools for implementation available on the material design site, you can utilize them too. Feel free to comment!

Leave a Comment