Android Relative Layout with sticky footer

Question

I'm relatively new to Android development, and it's hard for me to build a specific interface. I looked through many similar questions, but none of them gave me the answer I am looking for.

I want to compile an XML interface as follows:

I want LinearLayout to act as a sticky footer that will contain two buttons. This part will always align to the bottom and will always have 60dp. The RelativeLayout will then be on top of the footer, but the height should scale based on the size of the screen.

I tried the following:

<LinearLayout 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" android:orientation="vertical" tools:context=".DartboardActivity"> <RelativeLayout android:id="@+id/game_layout" android:layout_width="match_parent" android:layout_height="506dp" android:background="@drawable/background" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <ImageView android:id="@+id/Dartboard" android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="@string/desc_dartboard" android:src="@drawable/dartboard" /> <hhs.week3.dartboard.VerticalSeekBar android:id="@+id/seekBarVertical" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_gravity="bottom" android:thumb="@drawable/thumbhorizontal" android:layout_marginBottom="40dp" /> <SeekBar android:id="@+id/seekBarHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:thumb="@drawable/thumbhorizontal" /> </RelativeLayout> <LinearLayout android:id="@+id/buttons" android:layout_width="match_parent" android:layout_height="60dp" android:background="#333"> <Button android:id="@+id/fire" style="@style/button" android:layout_width="0dp" android:layout_height="match_parent" android:layout_margin="5dp" android:text="@string/fire" /> <Button android:id="@+id/settings" style="@style/button" android:layout_width="0dp" android:layout_height="match_parent" android:layout_margin="5dp" android:text="@string/settings" /> </LinearLayout> </LinearLayout> 

I got it working halfway decently, but I need the RelativeLayout bit to fix the height, which made it look right on my phone, but not on others.

What is the best way to approach this?

Answer 1

Use the LinearLayout layout_weight mechanism to assign all remaining space to your RelativeLayout :

 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" ... /> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" ... /> </LinearLayout> 

Answer 2

Try the following code

 <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" android:orientation="vertical" tools:context=".DartboardActivity" > <RelativeLayout android:id="@+id/game_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/buttons" android:layout_alignParentTop="true" android:background="@drawable/ic_launcher" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" > </RelativeLayout> <LinearLayout android:id="@+id/buttons" android:layout_width="match_parent" android:layout_height="60dp" android:layout_alignParentBottom="true" android:background="#333" android:orientation="vertical" > </LinearLayout> </RelativeLayout> 

I removed LinearLayout and replaced it with RelativeLayout . This will allow you to install the LinearLayout stick from the bottom.

Answer 3

try it

 <LinearLayout 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" android:orientation="vertical" tools:context=".DartboardActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:orientation="vertical" android:layout_weight="1" android:background="@drawable/background" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <ImageView android:id="@+id/Dartboard" android:layout_width="match_parent" android:layout_height="wrap_content" android:contentDescription="@string/desc_dartboard" android:src="@drawable/dartboard" android:adjustViewBounds="true"/> <hhs.week3.dartboard.VerticalSeekBar android:layout_marginTop="10dp" android:id="@+id/seekBarVertical" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" android:thumb="@drawable/thumbhorizontal"/> <SeekBar android:id="@+id/seekBarHorizontal" android:layout_width="match_parent" android:layout_marginTop="10dp" android:layout_height="wrap_content" android:thumb="@drawable/thumbhorizontal" /> </LinearLayout> <LinearLayout android:id="@+id/buttons" android:layout_width="match_parent" android:layout_height="60dp" android:background="#333333"> <Button android:id="@+id/fire" android:layout_width="0dp" android:layout_height="match_parent" android:layout_margin="5dp" android:layout_weight="1" android:text="@string/fire"/> <Button android:id="@+id/settings" android:layout_width="0dp" android:layout_height="match_parent" android:layout_margin="5dp" android:layout_weight="1" android:text="@string/settings"/> </LinearLayout> </LinearLayout> 

Answer 4

I was able to achieve the same result using the code below. Basically, the parent layout is one linear layout, and the first child is a scroll, so it can compress its contents when the keyboard is displayed. Also note the use of android: layout_height = "0dp" and android: layout_weight = "1" used with scrollview

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/wrap" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ScrollView android:id="@+id/wrap2" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > <LinearLayout android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > </LinearLayout> </ScrollView> <FrameLayout android:id="@+id/buttonsPanel" android:layout_width="match_parent" android:layout_height="40dp" android:background="#333" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="action buttons" /> </FrameLayout> </LinearLayout>