Question

May i know how can i create this kind of UI, please see the pic posted below.

Is it simple linear layout having some different sized buttons, or different image controls or what exactly is this?. How can i create UI of this sort.?

Answer 1

Try this. Note that this is a copy paste from my own code and there are certain attributes which are posted below this code:

<LinearLayout
    android:background="@drawable/nav_bar"
    style="@style/TitleBar" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:gravity="center"    >
        <ImageButton 
            style="@style/TitleBarAction"
            android:layout_margin="2dp"
            android:id="@+id/btnStatusUpdate"
            android:src="@drawable/ic_tab_compose_selected" >
        </ImageButton>
    </LinearLayout>
    <ImageView style="@style/TitleBarSeparator" />
    <TextView
        android:id="@+id/actionbarTitle"
        android:text="ACTIVITY"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:gravity="left|center_horizontal|center"
        android:padding="5dp"   >
    </TextView>
    <ImageView style="@style/TitleBarSeparator" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:gravity="center"    >
        <ImageButton 
            style="@style/TitleBarAction"
            android:layout_margin="2dp"
            android:id="@+id/btnStatusUpdate"
            android:src="@drawable/ic_tab_compose_selected" >
        </ImageButton>
     </LinearLayout>
     <ImageView style="@style/TitleBarSeparator" />
     <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="4dp"
            android:gravity="center"    >
            <ImageButton
                style="@style/TitleBarAction"
                android:layout_margin="2dp"
                android:id="@+id/btnUploadPhoto"
                android:src="@drawable/ic_tab_camera_selected"  >
        </ImageButton>
    </LinearLayout>
</LinearLayout>

Style elements for the code above. This goes in your styles.xml:

    <style name="TitleBar">
        <item name="android:id">@id/title_container</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">45dp</item>
        <item name="android:gravity">center</item>
        <item name="android:orientation">horizontal</item>
    </style>

    <style name="TitleBarSeparator">
        <item name="android:layout_width">1px</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:background">USE A COLOR OF YOUR CHOICE HERE</item>
    </style>