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!
