Surviving w/ Android - Step by Step guide aboutAndroid and Internet of things

Develop Android App And Internet Of Things Projects With Step By Step Tutorial, Tips And In-DepthCode Description.

Topics covered

Android material design

Android tooolbar

Android navigation drawer

Getting Started With Android App And MaterialDesign:Toolbar And Navigation DrawerBy Francesco Azzola , October 27, 2015 0 Comments

How to develop an Android app with material design guidelines

using Toolbar and Navigation drawer

Material design is a set of rule built by google that guidehow to develop an Android app. They can be applied notonly on the Android app but also on web site design. In theprocess of development of an app, Android provides somelibraries that help developers to implement the mainmaterial guide line rules. The most important libraries are:

com.android.support:appcompat-v7:23.1.0

com.android.support:design:23.1.0

After all, these two libraries are imported by default when a developer starts a new projectusing Android Studio.

One important aspect in an app is represented by color schema. Material design rulesdescribes how to chose colours.Let us suppose we create a simple Android project and let us follow the main step toimplement a Android app following Material design rules.

Material Design:ColoursThe first step, is choosing the colour schema for our app. To this purpose there is a greatwebsite that can be used to create the colour schema according to material design rules.After the colours are selected we can download colors.xml:

!

"

Home About me Contact me Advertise

You can select the schema you like. The first result is shown in the picture below:

Now it is time to create our theme that uses the colours we selected before. The app shouldsupport the largest number of smart phones not only those running Lollipop or later.For this reason it is necessary to create two themes one for the devices that run Android 5 orlater and those that run pre-lollipop version.So let us create two directory under values:

stylestyle-v21

The first one is used by all smart phones running pre-Lollipop version while the second folderis used by smart phones with OS starting from Lollipop.In the first directory let us style.xml:

123456789

10

<resources> <color name="primary">#3F51B5</color> <color name="primary_dark">#303F9F</color> <color name="primary_light">#C5CAE9</color> <color name="accent">#03A9F4</color> <color name="primary_text">#212121</color> <color name="secondary_text">#727272</color> <color name="icons">#FFFFFF</color> <color name="divider">#B6B6B6</color></resources>

123

<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" <item name="colorPrimary">@color/primary&lt/item>

?

?

while in the second directory we simply add:

Finally in the Manifest.xml modify the file:

Android ToolbarOne of the most important component in developing an Android app is the Toolbar. Thetoolbar plays the role that was played before by Android action bar.The toolbar can be used tohold:

Navigation button

App tile and subtitle

Action menu

Brand logo

According to material design the Toolbar have the primary color we selected before. How toadd it to Android app?

45678

<item name="colorPrimaryDark">@color/primary_dark</item <item name="colorAccent">@color/accent</item> </style> <style name="MyAppTheme" parent="@style/AppTheme" /></resources>

123456789

<resources> <style name="MyAppTheme" parent="AppTheme"> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</ <item name="android:windowAllowReturnTransitionOverlap">true</ <item name="android:windowSharedElementEnterTransition">@android:transition/move</ <item name="android:windowSharedElementExitTransition">@android:transition/move</ </style></resources>

1234

<application android:theme="@style/MyAppTheme" > ...</application>

123456789

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width android:layout_height="match_parent" tools:context=".MainActivity" android:id="@+id/layout"> <include layout="@layout/toolbar" /> </RelativeLayout>

?

?

?

where toolbar layout is:

Notice at line 5 we set the default height of the toolbar using ?attr/actionBarSizeand at line 6 the toolbar background.In the activity it is necessary to set the toolbar:

Running the example we get:

12345678

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:local="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/primary" local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

123456789

1011121314

@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setToolBar();}...private void setToolBar() { Toolbar tb = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(tb); ActionBar ab = getSupportActionBar(); ab.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp); ab.setDisplayHomeAsUpEnabled(true);}

?

?

Add Action Menu To ToolbarOnce the is configured correctly, it is possible to add action menu or menu items that appearon the Toolbar, to do it under res/menu add a file called main_menu.xml :

Now in the activity there is:

Running the example the app looks like:

123456789

1011121314151617181920212223

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/menu_settings" android:title="Settings" android:icon="@android:drawable/ic_menu_preferences" app:showAsAction="always" android:orderInCategory="100"/> <item android:id="@+id/menu_help" android:title="Help" android:icon="@android:drawable/ic_menu_help" app:showAsAction="ifRoom" android:orderInCategory="110" /> <item android:id="@+id/menu_compass" android:title="Compass" android:icon="@android:drawable/ic_menu_compass" app:showAsAction="never" android:orderInCategory="105"/> </menu>

12345

@Overridepublic boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_menu, menu); return true;}

?

?

When user select one of this item the app should be detect it and take the right action, to do itit is necessary to override a method:

In this case we simply show a info message using a Snackbar .

Android Navigation DrawerNavigation drawer is one of the most import UI pattern introduced by Google in developingAndroid app.Navigation drawer is a side menu that helps to organise the navigation insidethe app. It is a uniform way to access different pages and information inside the app. You canrefer to official google page to know more. The implementation is very easy. The customview that represents the navigation drawer must be the first element in the layout:

123456789

101112131415161718192021

@Overridepublic boolean onOptionsItemSelected(MenuItem item) { int itemId = item.getItemId(); String btnName = null; switch(itemId) { case R.id.menu_settings: btnName = "Settings"; break; case R.id.menu_compass: btnName = "Compass"; break; case R.id.menu_help: btnName = "Help"; break; } Snackbar.make(layout, "Button " + btnName, Snackbar.LENGTH_SHORT).show(); return true;}

?

?

In this case the toolbar is inside a LinearLayout but the way the app handles it is thesame shown before. In this case there is a FrameLayout to hold the page content shownthrough fragments. The NavigationView is the "real" menu of our app. The menu itemsare written in nav_items .

To handle when user clicks on an item is very easy, it is necessary to write:

123456789

1011121314151617181920212223242526272829303132333435363738

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/toolbar" /> <!-- Let's add fragment --> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/frame"/> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/nav_items" /> </android.support.v4.widget.DrawerLayout>

123456789

10111213141516

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" <group android:checkableBehavior="single"> <item android:id="@+id/fab" android:title="Floating Action Button" android:icon="@drawable/ic_action_fab" /> <item android:id="@+id/star" android:title="Star" android:icon="@drawable/ic_action_star" /> <item android:id="@+id/uploadr" android:title="Star" android:icon="@drawable/ic_action_upload" /> </group></menu>

123456

private void setNavigationDrawer() { dLayout = (DrawerLayout) findViewById(R.id.drawer_layout); NavigationView navView = (NavigationView) findViewById(R.id.navigation); navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) {

?

?

We simply add a listener to know when one of the menu item is pressed by user and then setthe right fragment. The last step is opening the drawer when user clicks on the home icon, todo it:

Running the example app we have:

789

101112131415161718192021222324252627282930

Fragment frag = null; int itemId = menuItem.getItemId(); if (itemId == R.id.fab) { frag = new Fragment1(); } else if (itemId == R.id.star) { frag = new Fragment2(); } if (frag != null) { FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); transaction.replace(R.id.frame, frag); transaction.commit(); dLayout.closeDrawers(); return true; } return false; } });}

123456789

101112131415

@Overridepublic boolean onOptionsItemSelected(MenuItem item) { int itemId = item.getItemId(); String btnName = null; switch(itemId) { ... // Android home case android.R.id.home: { dLayout.openDrawer(GravityCompat.START); return true; } } ..... }

?

Thank you for printing our content.

At the end in this post, you know how to use Android navigation drawer and toolbaraccording to material design guide lines.

If you want to know how to create a real app using material design give a look at this linkdescribing how to create a weather app in android with material design. Source code available @github.

1082

7

12

45

Google +

310

8

DZone

6

218

Reddit

0

Copyright © 2015 Surviving with android | All Rights Reserved. Design ByTemplateclueTemplateclue