CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentstabsandroid-viewpager
Jorgen
Jorgen

Reputation: 115

Android TabLayout fragment - vertical scroll

I have a (support.v4) TabLayout with ViewPager that loads 3 tabs, but there's a strange issue on first load of tab layout - first tab doesn't properly scale vertically, so the bottom of fragment's layout is cropped on scroll:

Tab fragment - cropped

But when I switch to another tab and go back, it's scaled properly:

Tab layout - correct

Here's my CoordinatorLayout, containing TabLayout & ViewPager:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tabMinWidth="120dp"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

And an example of fragment layout loaded inside first tab:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/accountScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="84dp"
    android:paddingTop="10dp"
    android:paddingLeft="24dp"
    android:paddingRight="24dp">

<LinearLayout
    android:id="@+id/existingAccount"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ImageView android:src="@drawable/thrumaze_small_logo"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:layout_gravity="center_horizontal" />


    <Button
        android:id="@+id/btnEditAccount"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:scaleType="fitCenter"
        android:layout_gravity="right"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/ic_action_edit" />

        <!--  Email Label -->
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="4dp">
            <EditText android:id="@+id/txtUserName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_label_email"
                android:editable="false"
                android:focusable="false"
                android:clickable="false" />
        </android.support.design.widget.TextInputLayout>

        <!--  First name-->
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="4dp">
            <EditText android:id="@+id/txtFirstName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_label_firstName"
                android:editable="false"
                android:focusable="false"
                android:clickable="false"/>
        </android.support.design.widget.TextInputLayout>

        <!--  Last name-->
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="4dp">
            <EditText android:id="@+id/txtLastName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_label_lastName"
                android:editable="false"
                android:focusable="false"
                android:clickable="false"/>
        </android.support.design.widget.TextInputLayout>


    <LinearLayout android:id="@+id/lineGender"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:weightSum="2"
        android:paddingLeft="5dp"
        android:paddingTop="12dp"
        android:paddingBottom="12dp"
        android:layout_height="wrap_content">
        <TextView
            android:text="@string/hint_label_gender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
        <TextView
            android:id="@+id/txtGender"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
    </LinearLayout>


    <LinearLayout android:id="@+id/dateOfBirthLine"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:weightSum="2"
        android:paddingLeft="5dp"
        android:paddingTop="12dp"
        android:paddingBottom="12dp"

        android:layout_height="wrap_content">
        <TextView
            android:text="@string/hint_label_dateBirth"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
        <TextView
            android:id="@+id/txtDateOfBirth"
            android:text=""
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/loginAccountLine"
    android:orientation="vertical"
    android:layout_marginTop="20dp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn_login"
        android:gravity="center"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="12dp"
        android:layout_marginBottom="22dp"
        android:padding="12dp"
        android:background="#607ee1"
        android:textColor="#fff"
        android:text="@string/button_label_login"/>

    <TextView android:id="@+id/link_signup"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="34dp"
        android:text="@string/createAccountLabelText"
        android:gravity="center"
        android:textSize="14dip"/>

</LinearLayout>

<LinearLayout
    android:id="@+id/logoutLine"
    android:orientation="vertical"
    android:visibility="gone"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn_logout"
        android:gravity="center"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="12dp"
        android:layout_marginBottom="22dp"
        android:padding="12dp"
        android:background="#607ee1"
        android:textColor="#fff"
        android:text="@string/button_label_logout"/>

</LinearLayout>

Fragments are loaded into ViewPager in usual manner:

        adapter.addFrag(new AccountFragment(), getActivity().getString(R.string.module_tabCaption_account));
    adapter.addFrag(new AccountCodeFragment(), getActivity().getString(R.string.module_tabCaption_userQR));
    adapter.addFrag(new AccountLicenseFragment(), getActivity().getString(R.string.module_tabCaption_license));
    viewPager.setAdapter(adapter);

Fragment layouts are inflated in OnCreateView of each fragment:

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment

    rootView = inflater.inflate(R.layout.fragment_account, container, false);        return rootView;
}

This issue also happens with ListViews, showing (on scroll) only rows that approximately cover height of device screen and nothing after. But if I switch to other tabs and come back - it works ok.

I tried various combinations related to layout heights, even setting parameters dynamically through code, but with no success.

I guess it has something to do with support v4 library + viewpager height not adjusting properly on fragment load (perhaps too early?) - but not sure how to deal with it because tablayout is in control of loading fragment layouts.

Using latest support design library (23.1.1), issue was present with earlier library versions also.

Upvotes: 2

Views: 2537

Answers (1)

Ho&#224;ng Đ&#236;nh Thịnh
Ho&#224;ng Đ&#236;nh Thịnh

Reputation: 168

The ViewPager's top position is confused by the presence of the CoordinatorLayout. Consider using LinearLayout instead of CoordinatorLayout.

Upvotes: 2

Related Questions