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.

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