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.

Analyzing code with lint

Lint is a tool that analyzes your code for several different purposes. You can start the built in lint tool from Analyze > Inspect Code. Which prompts a selection where you can select the part of the project you want to inspect.

lint
Select what to analyze

You can customize the Inspection Profile to a great degree and make different kind of inspection profiles. The default profile is a good place to start, because it will cover many different aspects of the project and covers certainly for someone starting to use lint.

 

lint-inspections
Configuring inspections

After you run lint, you will get the results in the bottom. You can go through the lists and select individual errors, if you right click the error, lint offers you few options for example exclude or suppress lint annotation. Suppress lint for example will add an annotation, so in the future lint will not report the same error if it was unnecessary.

lint-tool
Lint categories

Lint is a great tool, especially for finding unnecessary code and other pretty straightforward errors. In practice you will often see errors that are not actual errors, so proceed using lint with care. It is first good to fix one error at a time and run the app after the fixes so you get a feel for what kind of errors lint is best suited for. You will get quite a bit of unnecessary error reports also, by running lint in a few different projects you will get to know what lint is best suited for.

Preview multiple screens

When you select a layout xml-file, you can either see the layout as text or design. In design view you can see how the layout would look on the phone screen. And here you can select a certain phone model and then switch between portrait and landscape modes.

At the absolute bottom of selecting the screen size there is a really nice feature, Preview All Screen Sizes, where you can see all the Nexus phones at the same time. Here you can also switch between portrait and landscape layout even though it takes quite some time and in that sense it is not very practical.

preview different
Preview all screens

Instant Run

So you’ve pressed Shift+F10 again (Run > Run ‘app’) and the emulator is painstakingly slow. Not to worry, because there is Instant Run, a feature that makes the emulator go from a member of the tortoise family to Usain Bolt in a matter of seconds. Plus you get a pretty neat lightning next to you run icon.

instant-run-2
Lightning

First go to

File > Settings > Build, Execution, Deployment > Instant Run

and check Enable Instant Run.

Now when you run your app, then make changes to the code, you can keep the emulator open and so the changes will update a lot faster. You do not need to close the emulator between changes, and the changes made in the code will appear in the emulator almost instantly, thus the name Instant Run.

instant-run
Settings

To get more information about this check out Android Developers Blog post about it.