Material Design: Bottom navigation

Google released a highly useful new navigation feature. Bottom navigation with 3-5 differents tabs, this form of navigation has become very popular especially in the wake of instagram’s success.

Components– Bottom navigation

components_bottomnavigation_spec_elevation3
Orthographic view of app structure

It is a very usable option and a valuable addition to other forms of persistent navigation available in the Android SDK, before material design has included Patterns– Navigation drawer and Components – Tabs.

Bottom menu

Example of how to make a bottom menu, which is divided into four image buttons. The most important is to use LinearLayout and align it to the parent element’s bottom. Then dividing the space between the buttons with android:layout_weight=”1″ which makes each button the same size. Using icons for these types of buttons is ideal, since the space per button is quite limited especially on phones, necessarily not so much on tablets.

nexus_bottom_navigation
Bottom menu
<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="40dp"
 android:layout_alignParentBottom="true" >

   <ImageButton
   android:id="@+id/prevList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_chevron_left_black_36dp" />

   <ImageButton
   android:id="@+id/nextList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_chevron_right_black_36dp" />

   <ImageButton
   android:id="@+id/addList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_add_black_36dp" />

   <ImageButton
   android:id="@+id/deleteList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_clear_black_36dp" />

</LinearLayout>

Internalization

The Android Software Development Kit offers great built-in support for internalization. It is easy to get started and make your app support several languages. Under the resources (res) folder you create subfolders for values with different suffixes i.e. values-fi, values-de, values-se and the resources you place under those folder will automatically be used depending on the user’s language setting. Values folder, without any suffixes is used if nothing else is specified, so it is the standard folder.

res/
  values/
     strings.xml
  values-fi/
     strings.xml
  values-de/
     strings.xml
  values-se/
     strings.xml

Lint even analyzes code for bidirectional text, to support languages that are written from right-to-left. It is an easy oversight at an early phase of the development process, but one that you will cost you a lot of tricky decisions down the line. If you are heading directly to international markets and releasing your app in several countries, it’s good to keep this in mind. Though designing layouts with a lot of spare room can difficult, often times you need to have your text resources customized to even fit. This means translating the texts, not only based on context, but also keeping in mind those precious Density-independent pixels.

This brings about the arduous task of going through the layouts after each iterative change,  so keeping you language support somewhat limited will save you a lot of time further on.

Import local aar library

Usually dependency libraries are referred through build.gradle (app) with the web address, but you can also import a local library.

dependencies { compile 'com.android.support:appcompat-v7:23.2.1'
               compile 'com.android.support:design:23.2.1'
               compile 'com.android.support:percent:23.2.1'
}

Reference a local library jar/aar through:

File > New > New Module

After the new module window, comes create new module window with File name and Subproject name.

First is the location of aar file and the second one is the subproject name, which you can select yourself, it is used for local reference.  In this example we will call it imported-aar. There will appear a new build.gradle (Module: imported-aar) in the android project explorer. We can reference it in build.gradle (app) as follows.

dependencies {  compile 'com.android.support:appcompat-v7:23.2.1'
                compile 'com.android.support:design:23.2.1'
                compile 'com.android.support:percent:23.2.1'
                compile project (':imported-aar')
}

Then you need to use Sync Now in the upper right corner of build.gradle (app).

 

Inside the aar libraries are just zip folders with certain structure: Android Tools: Aar Format

 

Productivity with Live Templates

Live Templates are a way to make writing boilerplate code faster, by extendable abbreviations. They are a great way to add to your productivity with having commonly used code snippets easily inserted. Live Templates work on other Jet Brains IDEs also, for example IntelliJ IDEA.

A comprehensive blog post by Big Nerd Ranch: Android Studio Live Templates

A very clear video in YouTube by Breandan Considine:

 

 

Faster emulator: HAXM

Intel has a processor Virtualization Technology, that makes the emulator in Android Studio run a lot faster. The performance difference is really significant. Download the installer from Intel Developer Zone:

Intel® Hardware Accelerated Execution Manager

Android Studio SDK Manager also has a package for this, but the Intel installer is a lot more reliable.

Then you need to see that your VT-X (Virtualization Technology) is enabled in BIOS. It depends on your BIOS version, but it is usually under something similar to: Advanced > Intel Virtualization Technology.

Now create an AVD (Android Virtual Device) that uses a x86 image of Android OS.

When you get it to run correctly, Android Studio console Run tab will show:

HAXM is working and emulator runs in fast virt mode

 

More detailed instructions:

Installation Instructions for Intel® Hardware Accelerated Execution Manager – Microsoft Windows

Intel Developer Zone: How to Use the Intel® Hardware Accelerated Execution Manager

 

Useful articles and videos

Material Icons

As a part of their Material Design Google has released a great set of icons. You can import the whole library or just the icons you need for you project. The icons come in many sizes, so it is easy to cover different size screens.

Google: Color palette

A main focus of Google has been Material Design, these color palettes work well with other projects also. It’s easy to find a nice shades in different colors, that you can use together.

Live Templates in Android Studio: Using and Creating Them

A video from the Android Developers YouTube channel about live templates, which are snippets of code you can easily use again. Only write the correct start and then press start.

Pivotal Ep 0: When Building Apps the Wrong Way Can be the Right Way

A video from the Android Developers YouTube channel about practical app development and trying out things first before being too concerned with the right architecture of the program.

Udacity: Android – Courses and Nanodegree Programs

Udacity is a site with free and paid online courses on a variety of software development topics. The content is made in co-operation with Google and is very clear and informative. The courses include exercises and downloadable projects. The courses are also a lot less verbose than some online courses, so it’s more actual coding and less watching videos.