Add icons in the bottom of the screen

Question

What is the name of this ? How to design it ? any valid usefull tutorial example ?

Answer 1

This is called split action bar in android

Split action bar provides a separate bar at the bottom of the screen to display all action items when the activity is running on a narrow screen (such as a portrait-oriented handset).

Mock-ups showing an action bar with tabs (left), then with split action bar (middle); and with the app icon and title disabled (right).

Update:

In newer UI patterns it is called bottom toolbar

Bottom toolbar that launches to a shelf and clings to the top of the keyboard or other bottom component

Refer this question to create one.

---

Note: android does not have text with icon in its UI elements for actions, screenshot in question seems to be of a hybrid application, and suggestions in answer are closest supported by default UI patterns for native apps.

Answer 2

Yes, you can use a linear layout. Whatever you want as long as you make it look good.

The trick is to making it stick to the bottom of the screen. I like to contain everything in a relative layout and set that linear layout inside the relative layout and making it align to the bottom of it's parent.

example layout:

<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">


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button2"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button3"/>
    </LinearLayout>
</RelativeLayout>

android:layout_alignParentBottom="true" is the important part here, but there are other ways to make the linear layout stay at the bottom.

Answer 3

You can do something like this to add buttons in bottom bar :

<LinearLayout android:id="@+id/footer" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:orientation="horizontal"
    android:layout_alignParentBottom="true" style="@android:style/ButtonBar">

    <Button android:id="@+id/saveButton" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:text="@string/menu_done" />

    <Button android:id="@+id/cancelButton" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:text="@string/menu_cancel" />
</LinearLayout>