androidlayoutfragmentandroid-xmlandroid-tabbed-activity

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


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:
Button is out of the layout

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:

<code>FRIEND REQUESTS</code> tab layout on 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:

TabLayout preview 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.


Solution

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