Android Relative Layout with sticky footer

I'm relatively new to Android development and I'm having a hard time putting together a certain interface. I've looked through many similar questions but none of them give me the answer i'm looking for.

I want to put together an XML interface like the following:

enter image description here

I want a LinearLayout that acts like a sticky footer that will contain two Buttons. This part will always align to the bottom and and will always be 60dp high. The RelativeLayout would then be on top of the footer, but it's height should scale depending on the screen size.

I've 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 half decently, but it requires me to give the RelativeLayout bit a fixed height, making it look right on my phone, but not on others.

How do I best approach this?

Upvotes: 8

Answers (5)

Yogendra

Reputation: 5288

Try this, its tested code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cl_root"
    android:paddingStart="@dimen/dp_10"
    android:paddingEnd="@dimen/dp_10"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white_3"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">


    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_your_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/dp_10"
        android:text="Titles"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="MissingConstraints" />


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_progress_card"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        tools:itemCount="19"
        app:layout_constraintBottom_toTopOf="@+id/tv_swipe_up_message"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_your_progress"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintHeight_default="wrap"
        app:layout_constraintVertical_chainStyle="packed"

        tools:listitem="@layout/item_short_form_component" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_swipe_up_message"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:padding="@dimen/space_normal"
        app:layout_constraintHeight_default="wrap"
        android:gravity="center"
        android:drawablePadding="@dimen/space_small"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintVertical_chainStyle="packed"
        android:drawableTop="@drawable/ic_arrow_up_grey"
        android:text="footer"
        app:layout_constraintTop_toBottomOf="@+id/rv_progress_card"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Hareshkumar Chhelana

Reputation: 24848

Try this

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

Upvotes: 0

Jimmy Ilenloa

Reputation: 2009

I was able to achieve the same result by using below code. Basically, the parent layout is one Linear layout and the first child element is a scrollview so it can squeeze its content when the keyboard is shown. Also note the use of the android:layout_height="0dp" and android:layout_weight="1" used with the 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>

Upvotes: 0

Chintan Rathod

Reputation: 26034

Try 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 with RelativeLayout. This will allow you to set your LinearLayout stick to bottom.

Upvotes: 6

laalto

Reputation: 152867

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>

Upvotes: 16

Android Relative Layout with sticky footer

Answers (5)

Related Questions