Simple Android UI (ActionBar & BottomNavigation Layout)

Okay, so this week I’m not contributing a lot to MeetU Engineering team but this article will tell a little bit about what I’m doing this week :)

…

Let me open this first article with one statement that maybe all backend engineer like me agree with, UI is sucks, no matter what kind of UI layout that you code, web, mobile, desktop, etc, it sucks. Why? Because you have to think responsivity, handling thousands of different device screen, not to say different manufacturer has a specific thing about their device API.

…

Okay, enough ranting about my task, and let’s see the code to create simple ActionBar UI and BottomNavigation, using RelativeLayout, LinearLayout, and great package from ittianyu.

First, for BottomNavigation we’re using greate package BottomNavigationViewEx from ittianyu.

Simply add this in your root build.gradle at the end of repositories

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
		maven { url "https://maven.google.com" }
	}
}

and add the dependencies

compile 'com.github.ittianyu:BottomNavigationViewEx:1.2.4'
compile "com.android.support:design:26.+"

And you’re all set!

…

For making our simple layout as modular as possible, we’ll divide the layout into three different XML (ActionBar, body, BottomNavigation) and merge it in the Activity XML.

First, our BottomNavigation, we create simple menu, and store it in res/menu/bottom_navigation_menu.xml, consisting menu items and its icon.

Then, we display our simple menu as a BottomNavigation.

Finally, we create helper class to handle interaction with the menu item.

And that’s it our BottomNavigation is finish~

…

Now comes the time for our ActionBar, I’m using RelativeLayout for positioning the ImageButton and TextView.

…

Now, for the final part, we just merge our layout into one Activity Layout and display it in our Activity.

And that’s it! We just finish our first simple layout, maybe in the future post I’ll talk about how to make it a little bit responsive.