Android - Tabbed Layout - Views Are Getting Out of The Parent

Question

I'm having troubles with viewing the fragments inside of a tabbed layout.
There are 3 tabs, but there is a button at the bottom that is cut out of the layout, as you can see in this FRIEND REQUESTS tab:

As you can see, the pink button location is down too much.

This is the FRIEND REQUESTS tab XML code:

<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"

    tools:context="com.example.barda.wikirace.Multiplayer.MultiplayerActivityFriendRequestsTab">


    <ProgressBar
        android:id="@+id/loadingRequestsProgressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <TextView
        android:id="@+id/noFriendRequestsFound_TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="@string/we_didnt_find_friend_requests"
        android:textColor="@color/colorWhite"
        android:textSize="25sp"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/refreshFriendRequests_Floating"
        android:layout_width="43dp"
        android:layout_height="43dp"
        android:layout_x="30dp"
        android:layout_y="596dp"
        android:background="@color/colorAccent"
        android:clickable="true"
        app:backgroundTint="@color/colorAccent"
        app:fabSize="mini"
        app:srcCompat="@drawable/refreshbutton_multiplayer_lists"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent" />

    <ListView
        android:id="@+id/friend_Requests_Received_ListView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

</android.support.constraint.ConstraintLayout>

And this is how FRIEND REQUESTS tab looks like in Android Studio:

This is my entire TabLayout XML code:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 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/activity_multiplayer_main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.barda.wikirace.Multiplayer.MultiPlayerActivity"
    android:background="@color/colorGreenLight"

    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:background="@color/colorGreenLight"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorGreenLight"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/title_activity_multi_player"
                android:textSize="30sp"
                android:textStyle="bold"
                android:textColor="@color/colorWhite"
                android:layout_gravity="center"
                android:id="@+id/toolbar_title" />

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


        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@drawable/tab_color_selector"

            />


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

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/addFriendActivity_Floating"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:background="#FF1781"
        android:clickable="true"
        android:onClick="startAddFriendActivty_FAB_OnClick"
        app:backgroundTint="#FF1781"
        app:fabSize="mini"
        app:layout_anchor="@+id/container"
        app:layout_anchorGravity="bottom|left"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/addfriend_icon" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/goBackToMain_Floating"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:background="#FF1781"
        android:clickable="true"
        android:onClick="goBackToMain_FAB_OnClick"
        app:backgroundTint="#FF1781"
        app:fabSize="mini"
        app:layout_anchor="@+id/container"
        app:layout_anchorGravity="bottom|right"
        app:srcCompat="@drawable/backbutton_clean_right" />


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

This is how the entire TabLayout preview is shown in Android Studio:

I don't understand why the button on the FRIEND REQUESTS TAB is getting out of its parent limit, Considering it was set to match_parent.

score 0 · Answer 1 · answered Aug 27 '17 at 19:08

0

Anytime views seem to be inexplicably vertically offset, the culprit is usually fitSystemWindows. Your coordinator layout, tab layout, and viewpager have that attribute set, but the "friends request" layout does not. Try adding android:fitsSystemWindows="true".

answered Aug 27 '17 at 19:08

dominicoder

9,338
1
26
32

I have tried to add it, than clean and rebuild, but it stays the same... – Tal Barda Aug 27 '17 at 19:13
Try the opposite - remove the attribute from all other views. – dominicoder Aug 27 '17 at 19:14
Now the pink button in the middle is gone... I guess it was moved way more down. – Tal Barda Aug 27 '17 at 19:17
Only other suggestion would be to fiddle with the width / height and constraints of the view in question. I've noticed oddities with constraint layout when trying to constrain a view to the bottom of a parent. – dominicoder Aug 27 '17 at 19:23

score 0 · Accepted Answer · answered Aug 27 '17 at 21:02

The solution was to delete this line app:layout_scrollFlags="scroll|enterAlways" and also all of the: android:fitsSystemWindows="true" from the tabs layout.

I'm not sure why, but I guess thats because my pager does not have any lists, and it shouldn't be scrollable.

Android - Tabbed Layout - Views Are Getting Out of The Parent

2 Answers2