Orkhan Gasimli Orkhan Gasimli - 2 months ago 7
Android Question

Odd white space at the bottom of the Android fragment?

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>

Answer

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.

Comments