Troj
Troj

Reputation: 11911

Bottom button bar in android

I am wondering how it's possible to create bottom bar buttons in android,

I read something about this U.I. solution, are there any controls that can be used?

Upvotes: 20

Views: 55966

Answers (6)

Omri
Omri

Reputation: 1087

You can do something like this inside a relative layout

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

Upvotes: 38

Linh
Linh

Reputation: 61019

I create a simple AndroidBottomMenu View using custom view. It is simple and light, you can easy copy to your project

<com.toong.androidbottombar.bottommenu.BottomMenu
    android:id="@+id/bottom_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

enter image description here

Upvotes: 0

Tyler Davis
Tyler Davis

Reputation: 2450

This is a discouraged practice http://developer.android.com/design/patterns/pure-android.html I was wrong

Upvotes: 0

numan salati
numan salati

Reputation: 19494

The easiest way is to give your linear layout a built in style namely "@android:style/Holo.ButtonBar" or if you are on pre HC then "@android:style/ButtomBar"

If you are wondering what attributes this style applies, here it is:

<style name="Holo.ButtonBar" parent="ButtonBar">
        <item name="android:paddingTop">0dip</item>
        <item name="android:paddingStart">0dip</item>
        <item name="android:paddingEnd">0dip</item>
        <item name="android:paddingBottom">0dip</item>
        <item name="divider">?android:attr/dividerVertical</item>
        <item name="showDividers">middle</item>
        <item name="dividerPadding">12dip</item>
        <item name="background">@null</item>
    </style>

Note, you don't need to use RelativeLayout in this case - its completely redundant and is more costly in terms of layout operations compared to linear layout.

Upvotes: 0

Low Radiation
Low Radiation

Reputation: 71

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
    <LinearLayout
     android:id="@+id/buttonBar"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     style="@android:style/ButtonBar"
     android:gravity="center"
     >
          <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="20sp"
          android:textStyle="bold"
          android:textColor="#FFFFFF"
          android:text="Button Bar"/>   
     </LinearLayout>
</RelativeLayout>

got it from the following link bottombar

Upvotes: 7

herbertD
herbertD

Reputation: 10975

You can use a FrameLayout to put something in the bottom by:

android:layout_gravity="bottom|center"

For example:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

    >
    <ListView
        android:id="@+id/list1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
    <Button
        android:id="@+id/btn_"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:text="OK"
        />

</FrameLayout>

Upvotes: 3

Related Questions