How to Material Design in Android

February 18, 2018
Guru
All Categories
0 Comments

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.

<resources>
   <!-- your theme inherits from the material theme -->
   <style name="AppTheme" parent="android:Theme.Material">
      <!-- Customize your theme here -->
   </style>
</resources>

</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,

<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" />

<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.

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

<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,

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

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.

<?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>

<?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.

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

}

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

}

How to Material Design in Android

1. At first, we need to set the material design theme

2. Elevations and Shadows

3. Scroll Events

4. Material Design Lists

Guru

This Post Has 0 Comments

Leave a Reply Cancel reply

1. At first, we need to set the material design theme

2. Elevations and Shadows

3. Scroll Events

4. Material Design Lists

Share the knowledge!!

Guru

Related Posts

This Post Has 0 Comments

Leave a Reply Cancel reply