Odd white space at the bottom of the Android fragment?

Question

I faced with the weird issue: there is a white space at the bottom of the fragment and I am not able to get rid off it. It is also worth to mention that this space disappears if I click any button.

Any help is appreciated! Please find screenshot and layout codes below.

Screenshot

DetailActivity layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="org.ogasimli.manat.activity.DetailActivity"
tools:ignore="MergeRootFrame" />

DetailFragment layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="org.ogasimli.manat.fragment.DetailActivityFragment"
android:background="@color/colorAccent">

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/detail_result_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:visibility="gone"
    tools:visibility="visible">

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        app:elevation="0dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_detail"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.AppBarOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginTop="?actionBarSize"
        android:weightSum="7">

        <include layout="@layout/detail_chart_grid"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4.5"/>

        <include layout="@layout/detail_extras_grid"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2.5"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_share_details"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="24dp"
        android:elevation="8dp"
        android:src="@drawable/ic_share"
        app:layout_anchor="@id/cardview_details"
        app:layout_anchorGravity="top|right|end"
        app:rippleColor="@color/colorPrimary"
        tools:targetApi="lollipop"/>

</android.support.design.widget.CoordinatorLayout>

<LinearLayout
    android:id="@+id/detail_error_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_centerInParent="true"
    android:orientation="vertical"
    android:visibility="gone">

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/error_view"
        android:layout_gravity="center"/>

</LinearLayout>

Detail chart grid layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"  xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="@color/colorPrimary">

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/linechart"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_margin="10dp"
    android:layout_weight="3"/>

<include layout="@layout/detail_button_grid"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_marginBottom="26dp"
    android:layout_marginEnd="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_weight="1"/>

</LinearLayout>

Detail extras grid layout:

<?xml version="1.0" encoding="utf-8"?>
<!-- Detail Layout for Grid -->
<android.support.v7.widget.CardView
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/cardview_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_gravity="center"
app:contentPaddingLeft="16dp"
app:contentPaddingRight="22dp"
app:cardCornerRadius="16dp"
app:cardBackgroundColor="?colorAccent"
app:cardElevation="0dp">

<android.support.v7.widget.GridLayout
    android:id="@+id/detail_additional_pane"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    app:columnCount="2">

    <TextView
        android:id="@+id/detail_statistic_label_text_view"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textAllCaps="true"
        android:fontFamily="sans-serif-medium"
        android:textColor="?colorPrimary"
        android:text="@string/detail_statistics_label"
        android:minHeight="48dp"
        android:textSize="18sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1"
        app:layout_columnSpan="2"/>

    <TextView
        android:layout_height="wrap_content"
        android:text="Current rate"
        android:gravity="center_vertical"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:paddingBottom="5dp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1"/>

    <TextView
        android:id="@+id/detail_current_rate_textview"
        android:gravity="center_vertical"
        android:fontFamily="sans-serif-light"
        android:textColor="@color/colorTextPrimary"
        android:textSize="18dp"
        android:paddingBottom="5dp"
        app:layout_gravity="right"
        tools:text="1.5571"/>

    <TextView
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="Average rate"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:paddingBottom="5dp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1"/>

    <TextView
        android:id="@+id/detail_average_rate_textview"
        android:gravity="center_vertical"
        android:fontFamily="sans-serif-light"
        android:textColor="@color/colorTextPrimary"
        android:textSize="18dp"
        android:paddingBottom="5dp"
        app:layout_gravity="right"
        tools:text="1.567"/>

    <TextView
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="Maximum rate"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:paddingBottom="5dp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1"/>


    <TextView
        android:id="@+id/detail_max_rate_textview"
        android:gravity="center_vertical"
        android:fontFamily="sans-serif-light"
        android:textColor="@color/colorTextPrimary"
        android:textSize="18dp"
        android:paddingBottom="5dp"
        app:layout_gravity="right"
        tools:text="1.602"/>

    <TextView
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="Minimum rate"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:paddingBottom="5dp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1"/>


    <TextView
        android:id="@+id/detail_min_rate_textview"
        android:gravity="center_vertical"
        android:fontFamily="sans-serif-light"
        android:textColor="@color/colorTextPrimary"
        android:textSize="18dp"
        android:paddingBottom="5dp"
        app:layout_gravity="right"
        tools:text="1.5571"/>

</android.support.v7.widget.GridLayout>

</android.support.v7.widget.CardView>

Make the CoordinatorLayout the root layout, and if needed put a RelativeLayout inside it. — Daniel Nugent, Apr 21 '16 at 05:47
@DanielNugent coordinatorlayout was initially root layout, however then when I implemented error view I decided to change it this way, because otherwise I was not able to manage result and error views. — Orkhan Gasimli, Apr 21 '16 at 06:09
In your detail grid layout where you include details. There is margin bottom. try removing it — X3Btel, Apr 21 '16 at 11:35
@layout/detail_button_grid - you are setting margins to all sides there. — X3Btel, Apr 21 '16 at 15:17

score 4 · Accepted Answer · answered Apr 21 '16 at 11:25

4

The best way to debug weird spaces and margins is using an XML snapshot.

In Android studio, click on the "Android device monitor" button (green robot icon) In Device Monitor, make sure your device is selected on the left pane, and click the "Dump view hierarchy" button (3 phones icon). You should then see a screenshot of your visible screen, with the xml that created it on the right. You can hover over the bottom spacing to see where it comes from in your xml.

answered Apr 21 '16 at 11:25

marmor

27,641
11
107
150

Thank you very much @marmor! I will try this solution – Orkhan Gasimli Apr 21 '16 at 12:14
3

Now it is `Layout Inspector`, see https://developer.android.com/studio/profile/monitor. `Tools > Layout Inspector`. – CoolMind Nov 30 '18 at 12:46

score 2 · Answer 2 · answered Apr 21 '16 at 19:41

SOLVED

As suggested @marmor as used Android Device Monitor and revealed that there is a problem in the root of the fragment. Therefore I decided to follow the suggestion of @DanielNugent and made CoordinatorLayout root layout of the fragment and after that the odd white space disappeared.

CoolMind · Answer 3 · 2018-11-30T13:58:46.407

In my case problem was not only in CoordinatorLayout in Activity and Fragment (as Orkhan Gasimli suggested, I changed to ConstraintLayout in Fragment).

A problem was in SoftInputAssist (Android How to adjust layout in Full Screen Mode when softkeyboard is visible) made for adjusting a layout in full-screen mode. First it was full-screen, then I changed to a usual style, and white space appeared (id/content had more space than fragment container). In this case remove SoftInputAssist and see https://stackoverflow.com/a/52850584/2914140.

Odd white space at the bottom of the Android fragment?

3 Answers3