CODEWITHSUNDEEP
androidxmlandroid-layout
Waqleh
Waqleh

Reputation: 10161

How to set two or more buttons side by side to fill width of screen at bottom of the layout (not like a sticky menu)?

I am trying to set two or more buttons side by side at the bottom of the screen, I do know that in LinearLayout you can set buttons side by side by using android:layout_weight and i know that I can set the buttons at the bottom of the screen by using relative layout, but I cant seem to do both at the same time for the same buttons! is that possible?

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentBottom="true"
    android:background="#0B333F"
    android:fillViewport="true"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp" >

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical" >
...
...
...
...
...
...
...
...
...
  <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:orientation="horizontal"
            android:paddingLeft="5dp"
            android:paddingRight="5dp" >

            <!-- <LinearLayout -->
            <!-- android:layout_width="fill_parent" -->
            <!-- android:layout_height="wrap_content" -->
            <!-- android:layout_alignParentBottom="true" -->
            <!-- android:layout_marginTop="5dp" -->
            <!-- android:paddingLeft="5dp" -->
            <!-- android:paddingRight="5dp" > -->


            <!-- android:layout_weight="1" -->

            <Button
                android:id="@+id/saveButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dp"
                android:background="#F0BF00"
                android:text="@string/save"
                android:textColor="#FFF"
                android:textStyle="bold" />

            <Button
                android:id="@+id/cancelButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:background="#F0BF00"
                android:text="@string/cancel"
                android:textColor="#FFF"
                android:textStyle="bold" />
            <!-- </LinearLayout> -->
        </RelativeLayout>
    </LinearLayout>

</ScrollView>

As you can see in the commented part, I did try both but cant seem to get it to work! Please help.

FYI

I don't want a sticky menu; in small screens there will be a scroll so this will not affect small screens since it is already at he bottom, but big screens that will not need to scroll I want the buttons at the bottom

Upvotes: 0

Views: 3111

Answers (6)

scottt
scottt

Reputation: 8371

If you want the buttons always at the bottom of the content, not always visible on the screen, and to fill the bottom row of the screen, you can do the following.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentBottom="true"
    android:background="#0B333F"
    android:fillViewport="true"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp" >

        ........
        ........
        ........
        ........
        ........
        ........

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/saveButton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#F0BF00"
                android:text="@string/save"
                android:textColor="#FFF"
                android:textStyle="bold" />

            <Button
                android:id="@+id/cancelButton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="5dp"
                android:background="#F0BF00"
                android:text="@string/cancel"
                android:textColor="#FFF"
                android:textStyle="bold" />
        </LinearLayout>
    </RelativeLayout>
</ScrollView>

Upvotes: 0

Waqleh
Waqleh

Reputation: 10161

I Managed to do it by adding

android:gravity="bottom"

as PiYusH GuPtA suggested to the LinearLayout that contains the buttons, but I also needed to change that LinearLayout layout from 

android:layout_height="wrap_content"

to 

android:layout_height="fill_parent"

- 

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical" >

    ...
    ...
    ...
    ...
    ...
    ...

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="5dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:gravity="bottom" >

        <Button
            android:id="@+id/saveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:background="#F0BF00"
            android:text="@string/save"
            android:textColor="#FFF"
            android:textStyle="bold" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:background="#F0BF00"
            android:text="@string/cancel"
            android:textColor="#FFF"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

Upvotes: 0

Liem Vo
Liem Vo

Reputation: 5329

I think here are a good solution for you

<RelativeLayout > 
     <LinearLayout
        android:id="@+id/bottomLayout"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
        <Button />
        <Button />
     </LinearLayout>
     <ScrollView 
        android:layout_alignParentTop="true"
        android:layout_above="@id/bottomLayout">
      </ScrollView>
</RelativeLayout>

They are only nested layout structure so you need add more attribute that you want. Please let me know the result asap.

Upvotes: 0

scottt
scottt

Reputation: 8371

If you want your buttons to always be visible on the screen and your buttons centered at the bottom, move your ScrollView like in the following. If you want your buttons to fill the bottom line or be placed relative to the edges, then the bottom LinearLayout can be removed and a couple of alignment attributes set on the buttons instead.

<?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="wrap_content"
    android:layout_marginTop="40dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:background="#0B333F"
        android:fillViewport="true"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="vertical" >

            .....
            .....
            .....
            .....
            .....

        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/saveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F0BF00"
            android:text="@string/save"
            android:textColor="#FFF"
            android:textStyle="bold" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="#F0BF00"
            android:text="@string/cancel"
            android:textColor="#FFF"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>

Upvotes: 0

Piyush
Piyush

Reputation: 18933

If you need to your view at bottom you have to just set

  android:gravity="bottom"

to your LinearLayout.

UPDATE:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:background="#0B333F"
android:fillViewport="true"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:orientation="horizontal"
        android:paddingLeft="5dp"
        android:paddingRight="5dp" >

        <!-- <LinearLayout -->
        <!-- android:layout_width="fill_parent" -->
        <!-- android:layout_height="wrap_content" -->
        <!-- android:layout_alignParentBottom="true" -->
        <!-- android:layout_marginTop="5dp" -->
        <!-- android:paddingLeft="5dp" -->
        <!-- android:paddingRight="5dp" > -->


        <!-- android:layout_weight="1" -->

        <Button
            android:id="@+id/saveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:background="#F0BF00"
            android:text="@string/save"
            android:textColor="#FFF"
            android:textStyle="bold" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="#F0BF00"
            android:text="@string/cancel"
            android:textColor="#FFF"
            android:textStyle="bold" />
        <!-- </LinearLayout> -->
    </RelativeLayout>
</LinearLayout>

</ScrollView>

Upvotes: 1

Sagar Maiyad
Sagar Maiyad

Reputation: 12733

You can do that like below:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/saveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:background="#F0BF00"
            android:text="save"
            android:textColor="#FFF"
            android:textStyle="bold" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="#F0BF00"
            android:text="cancel"
            android:textColor="#FFF"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

Upvotes: 0

Related Questions