Android Topbar(like iOS UINavigationBar)

Compare to iOS and Windows Phone, Android UI is a bit difficult.
XML Layout isn’t easy to manage UI(especially arrange UI as line)
ActionBar is Android specified UI, but it is not NavigationBar like

By the way, Android doesn’t have iOS like UINavigationBar.
At the top, there are bar with buttons and title, that is NavigationBar(this term is for iOS)
I made it by XML layout and some codes

Result

Steps

• Arrange Layout in xml
• Disable ActionBar
• Code

Arrange Layout in xml

In this step, I put parts and add several properties before managing by code.
I set parameters except for parameters which depends on “display size”

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

   <LinearLayout
	    android:layout_width="match_parent"
	    android:layout_height="36dip"
	    android:orientation="horizontal"
	    android:background="#cccccc">
	    <ImageView android:id="@+id/btnSlide"
            android:layout_width="30dip"
            android:layout_height="30dip"
            android:contentDescription="@string/gymic"
            android:padding="0px"
            android:layout_gravity="center_vertical"
            android:src="@drawable/setting" />
	    <TextView android:id="@+id/titleLabel"
	        android:layout_width="wrap_content"
	        android:gravity="center_horizontal|center_vertical"
	        android:layout_height="30dip"
	        android:textSize="28sp"
	        android:textColor="#ffffff"
	        android:text="@string/app_name"
	        />
	    <ImageView android:id="@+id/btnAdd"
            android:layout_width="30dip"
            android:layout_height="30dip"
            android:contentDescription="@string/gymic"
            android:padding="0px"
            android:layout_gravity="center_vertical"
            android:src="@drawable/add" />
    </LinearLayout>
</RelativeLayout>

This haven’t completed to arrange correctly.
This is frame to manage UI by code.
The point is LinearLayout. Create 36dip LinearLayout for bar.
And I arranged UIs inside of this.

Disable ActionBar

We don’t need ActionBar if we use this.
Here is a entry to hide ActionBar.

Code

DisplayActivity

I made special Activity to get display size and density

public class DisplayActivity extends Activity 
{
	protected int windows_width;
	protected int window_height;
	protected float density;

	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);

		Display display = getWindowManager().getDefaultDisplay();
		Point size = new Point();
		display.getSize(size);
		this.windows_width = size.x; // width
		this.window_height = size.y; // height
		this.density = getResources().getDisplayMetrics().density;
	}
}

Arrange

Arrange UIs by code.
This step is to arrange UIs correctly according to display size.

public class MainActivity extends DisplayActivity 
{
	private ImageView slideButton;
	
	private ImageView addButton;
	
	private TextView titleLabel;

	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		slideButton = (ImageView)findViewById(R.id.btnSlide);
		addButton = (ImageView)findViewById(R.id.btnAdd);
		titleLabel = (TextView)findViewById(R.id.titleLabel);
		titleLabel.setWidth(windows_width - 2 * (int)(30 * density));
	}
}