Material Design Examples

Android Material Design

Material design was introduced by google with android version 5.0 (lollipop), originally known by the codename, Quantum Paper. It brought many new things to visual design of android user interface. Elements in Android app, like real world materials can cast shadows, occupy space, and interact with each other. Some of the main features include:

Material Theme
Meaningful Animations
Elevation (shadow effect)
Colors
Typography
Scrollable surfaces
3D type views
Card View
ToolBar
Recycler View
Snack Bar
App bar
Tab Layout
Bottom Navigation View
Floating Action Button
Coordinator Layout

Add support AppAompat v7 library for compatibility with android versions earlier then 5.0. If backward compatibility to previous android versions can't be included for a feature, alternative layouts can be used for customizing the appearance of app.

Adding Tool bar

Following are the typical steps to include material design theme with tools bar.

Update in build,gradle file if needed the most recent version of appcompat V7 library.
Add tool bar to the activity_main.xml and MainActivity.java.
Import "android.support.v7.widget.Toolbar" in the main activity.
Change our parent theme for our application to Theme.AppCompat.Light.NoActionBar in styles.xml file location in the resource folder. NoActionBar implies that theme will not have any ActionBar, so gives room to replace ActionBar with the ToolBar ViewGroup.
Add color resources in color.xml file.
Tool bar can be styled by using styles.xml, and applying theme to activity using manifest file.

Add dependencies:


compile 'com.android.support:appcompat-v7:25.1.1'
compile 'com.android.support:recyclerview-v7:25.1.1'

activity_main.xml



<?xml version="1.0" encoding="utf-8"?>>

 LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<
    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    <android.support.v7.widget.Toolbar

        android:id="@+id/toolbar"

        android:layout_width="match_parent"

        android:layout_height="58dp"

        android:background="?attr/colorPrimary"

        android:minHeight="?attr/actionBarSize"

        android:titleTextColor="#ffffff">

    </android.support.v7.widget.Toolbar>


 </LinearLayout >

ToolbarExample.java




// add package name here

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.widget.Toast;

public class ToolbarExample extends AppCompatActivity {
 

    Toolbar toolbar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initToolBar();


    }


    public void initToolBar() {

        toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setTitle(R.string.toolbarTitle);

        setSupportActionBar(toolbar);
 
        toolbar.setNavigationIcon(R.drawable.ic_toolbar_arrow);

        toolbar.setNavigationOnClickListener(

                new View.OnClickListener() {

                    @Override

                    public void onClick(View v) {

                        Toast.makeText(AndroidToolbarExample.this, "clicking the toolbar!", Toast.LENGTH_SHORT).show();

                    }

                }

 

        );

    }

}

Card View Example

Import the support library in the build.gradle file.


dependencies {
    ...
    compile 'com.android.support:cardview-v7:25.2.1'
}

Declare the CardView in the layout folder.


<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    
    <relativeLayout>
        ...
    <RelativeLayout>
<android.id.support.v7.widget.CardView>

Customize the card view.


 <support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="#E6E6E6"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="8dp">

    
    <RelativeLayout>
        ...
     </RelativeLayout>
 </android.support.v7.widget.CardView>

Recycler View Example

Using recyclerview, we can implement both horizontal and vertical layouts. Items can change at run time depending upon user actions or network events. RecyclerView.Adapter class is used to handle the data collection and binding to the view. RecyclerView.LayoutManager helps in positioning the items. RecyclerView.ItemAnimator can be used for animating the items for common operations such as item Addition or Removal.

Add dependencies to the build.gradle file:

compile 'com.android.support:appcompat-v7:25.1.1'

compile 'com.android.support:recyclerview-v7:25.1.1'


activity_main.xm; 


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvAnimals"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

new xml file "row.xml" to create singe row for recycler view.



<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp">



   <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>

</LinearLayout>

RecyclerViewAdapter.java



public class RecyclerViewAdapter extends RecyclerView.Adapter {

    private List mData = Collections.emptyList();
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

    // data is passed into the constructor
    public MyRecyclerViewAdapter(Context context, List data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // inflates the row layout from xml 

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.row, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    // binds the data to the textview in each row
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String name = mData.get(position);
        holder.myTextView.setText(name);
    }

    // total number of rows
    @Override
    public int getItemCount() {
        return mData.size();
    }


   

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView myTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            myTextView = (TextView) itemView.findViewById(R.id.tvName);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
        }
    }

    // convenience method for getting data at click position
    public String getItem(int id) {
        return mData.get(id);
    }

    // allows clicks events to be caught
    
public void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    // parent activity will implement this method to respond to click events
    public interface ItemClickListener {
        void onItemClick(View view, int position);
    }
}


public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {

    MyRecyclerViewAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // define the data to populate the RecyclerView with

        ArrayList  Names = new ArrayList<>();
        animalNames.add("Tony");
        animalNames.add("Jeff");
        animalNames.add("Kamal");
        animalNames.add("Zafar");

        // set up the RecyclerView

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvAnimals);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        adapter = new MyRecyclerViewAdapter(this, Names);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position) {
        Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on row number " + position, Toast.LENGTH_SHORT).show();
    }
}

Floating Action Button Example

Floating Action Button (FAB) was introduced with material design and has shape of circled icon floating above the UI. It indicates the main user action, and is an optional feature. For example, an email application can use FAB to open an email, a video application can use FAB to play videos etc.

Example below uses, floating button to open an email