android中的协调器布局存在问题？

Question

im using coordinator layout to achive this video VIDEO REQUIREMENT

NOW here is my layout :

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tabanim_maincontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<LinearLayout
    android:id="@+id/linearLayoutProfileImageSection"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RelativeLayout
        android:id="@+id/relativeLayoutProfileImage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <ImageView
            android:id="@+id/profileImage"
            android:layout_width="110dip"
            android:layout_height="110dip"
            android:layout_alignParentTop="true"
            android:layout_centerVertical="true"
            android:adjustViewBounds="true"
            android:layout_marginTop="@dimen/profile_image_margintop"
            android:layout_marginLeft="@dimen/profile_image_marginleft"
            android:background="@drawable/llayout_bk"
            android:scaleType="centerCrop"/>

        <LinearLayout
            android:id="@+id/llayout_detail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/profile_rightside_layout_marginleft"
            android:layout_toRightOf="@+id/profileImage"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textViewUserName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="3dp"
                android:layout_marginTop="@dimen/profile_username_margintop"
                android:text="sdsdsd"
                android:textColor="@android:color/black"
                android:textSize="12sp"
                android:singleLine="false"
                android:textStyle="bold"/>

            <ImageView
                android:id="@+id/btn_follow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/follow_btn"
                android:layout_marginTop="@dimen/profile_follow_margin_top"

                />

            <TextView
                android:id="@+id/textViewLocationProfileName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="3dp"
                android:text="sdsds"
                android:textColor="@android:color/black"
                android:textSize="15sp"
                android:layout_marginBottom="3dp"
                android:textStyle="normal" />

        </LinearLayout>
        <ImageView
            android:id="@+id/img_editprofile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:padding="3dp"
            android:layout_marginRight="@dimen/profile_edit_margin_right"
            android:layout_marginTop="@dimen/profile_edit_margin_top"
            android:background="@drawable/edit_btn"/>
    </RelativeLayout>
</LinearLayout>

<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:visibility="gone"
    />
<View
    android:id="@+id/view"
    android:layout_height="1dp"
    android:layout_width="match_parent"
    android:background="@android:color/darker_gray"
    android:layout_marginTop="@dimen/profile_tablayout_margintop"

    />


    <com.ui.MyTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/MyCustomTabLayout"
        />

    <View
        android:layout_height="1dp"
        android:layout_width="match_parent"
        android:background="@android:color/darker_gray"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</LinearLayout>
    </android.support.design.widget.CoordinatorLayout>

but the issue im getting this type result it should show all items in a listview in vertical order while right now there are 5 items in listview but they are in limited length adn inside limited height i can see more items on scroll how to avoid ?

Answer 1

To achieve a layout similar to the one posted in your demo video, which involves a collapsing toolbar, TabLayout and ViewPager I would recommend using the following gist as a guide:

CollapsingToolbarLayout with TabLayout

If you experience any issues with the fragments loaded into your ViewPager not correctly wrapping content, then you can try the following:

1. Use this gist by TheLittleNaruto and use it to replace anroid.support.v4.view.ViewPager in your layout xml . This custom ViewPager will wrap child contents, and so is ideal for ListView and RecyclerView content.
2. Or, if you would instead like the ViewPager to occupy any remaining space and not simply wrap content: Inside the Activity class where you retrieve your AppBarLayout and ViewPager , and an AppBarLayout.OnOffsetChangedListener to your AppBarLayout , and use it to adjust the height of your ViewPager so that its size adjusts to occupy the space below your AppBarLayout :

Activity class:

//Class variable
private int windowHeight;
//...
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
    if (windowHeight == 0) windowHeight = getWindow().getDecorView().getHeight();
    int appBarHeight = (int) (appBarLayout.getHeight() + appBarLayout.getY());

    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) mViewPager.getLayoutParams();
    params.height = (windowHeight - appBarHeight);
    mViewPager.setLayoutParams(params);