How to make the body of app with a fixed bottom panel fill the rest of space

Question

I am creating an app that has a fixed bottom panel. The contents of each panel should be displayed in the space above it. But whenever I populate the body with some contents, the contents overflow and overlap with the bottom panel.

After I populate it, it looks like this:

The code is as follows:

<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."/>
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:weightSum="3"
    android:layout_weight="0"
    android:id="@+id/bottompanel">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_profile"
            android:layout_gravity="center"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Profile"
            android:layout_gravity="center"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_bookings"
            android:layout_gravity="center"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Bookings"
            android:layout_gravity="center"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_tournaments"
            android:layout_gravity="center"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Games"
            android:layout_gravity="center"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">

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

    </LinearLayout>
</LinearLayout>

P.S.: I am aware of the libraries that offers same functionalities, but using them would give me less control of my app.

score 1 · Answer 1 · answered Feb 15 '18 at 05:47

you have to try it like this, you do not need to add linerlayout as a outer layout of textview:

 <RelativeLayout xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
    android:layout_above="@id/bottompanel"
                android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry...."/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="75dp"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:weightSum="3"
            android:layout_weight="0"
            android:id="@+id/bottompanel">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_profile"
                    android:layout_gravity="center"
                    android:layout_weight="1"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Profile"
                    android:layout_gravity="center"
                    android:layout_weight="1"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_bookings"
                    android:layout_gravity="center"
                    android:layout_weight="1"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Bookings"
                    android:layout_gravity="center"
                    android:layout_weight="1"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_tournaments"
                    android:layout_gravity="center"
                    android:layout_weight="1"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Games"
                    android:layout_gravity="center"
                    android:layout_weight="1"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1">

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

            </LinearLayout>
        </LinearLayout>
 </RelativeLayout>

score 1 · Accepted Answer · answered Feb 15 '18 at 05:48

1

There are many ways of doing it

1) If your parent layout is Relative Layout Simply for bottom bar set property

allignParentBottom="true"

and your other body should have

android:layout_above="@+id/bottom_bar"

2)Set your parent layout as Linear Layout orientation should be vertical and set weightSum property e.gweightSum = 6

and in your body layout set layoutHeight to 0dp and weight to5 and in you bottom bar height layoutHeight to 0dp and weight to1 Change these values as per your requirement

3)Use ConstraintLayout for more details check these links and link

answered Feb 15 '18 at 05:48

Abdul Kawee

2,687
1
14
26

Thank you for providing more than one ways. Each one works like a charm. – Ashish Neupane Feb 15 '18 at 05:57
You are welcome @AshishNeupane ,m glad that I was able to help you :) – Abdul Kawee Feb 15 '18 at 06:55

score 0 · Answer 3 · answered Feb 15 '18 at 05:46

Give the position of top view in parent android:layout_above="@+id/bottompanel" this will keep text above the your bottom view.

<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout android:id="@+id/topPannel"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/bottompanel"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout android:id="@+id/bottompanel"
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:weightSum="3"
    android:layout_weight="0">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_profile"
            android:layout_gravity="center"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Profile"
            android:layout_gravity="center"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_bookings"
            android:layout_gravity="center"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Bookings"
            android:layout_gravity="center"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_tournaments"
            android:layout_gravity="center"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Games"
            android:layout_gravity="center"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">

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

    </LinearLayout>
</LinearLayout>

How to make the body of app with a fixed bottom panel fill the rest of space

3 Answers3