Support for Sliding Tabs+ Viewpager

nitinmishra27 commented 9 years ago

Thanks for this amazing library Soichiro, I'm curious to implement ToolbarControlListViewActivity in Listview hosted in Fragment with ViewPager setup, I've almost achieved it, but when the toolbar goes off, there is a white space created below the list like you can see in here http://i.imgur.com/RNvJUfY.png If you require i can provide you the code i used to do the setup. Help would be highly appreciated

ksoichiro commented 9 years ago

@androlizer Thanks for your feedback! I'd like to see your codes if possible.

nitinmishra27 commented 9 years ago

This is my container activity setup ActivityMainContainer extends ActionBarActivity implements FragmentRecentsListCallback

Below are the two callback methods from my fragment

        @Override
    public void listIsDragging(int scrollY, boolean firstScroll) {
        int toolbarHeight = mToolbarView.getHeight();
        if (firstScroll) {
            float currentHeaderTranslationY = ViewHelper.getTranslationY(mHeaderView);
            if (-toolbarHeight < currentHeaderTranslationY && toolbarHeight < scrollY) {
                mBaseTranslationY = scrollY;
            }
        }
        int headerTranslationY = Math.min(0, Math.max(-toolbarHeight, -(scrollY - mBaseTranslationY)));
        ViewPropertyAnimator.animate(mHeaderView).cancel();
        ViewHelper.setTranslationY(mHeaderView, headerTranslationY);
    }

    @Override
    public void listMotionEvent(ScrollState scrollState, int ScrollY) {
        mBaseTranslationY = 0;

        float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
        int toolbarHeight = mToolbarView.getHeight();
        if (scrollState == ScrollState.UP) {
            if (toolbarHeight < ScrollY) {
                if (headerTranslationY != -toolbarHeight) {
                    ViewPropertyAnimator.animate(mHeaderView).cancel();
                    ViewPropertyAnimator.animate(mHeaderView).translationY(-toolbarHeight).setDuration(200).start();
                }
            }
        } else if (scrollState == ScrollState.DOWN) {
            if (toolbarHeight < ScrollY) {
                if (headerTranslationY != 0) {
                    ViewPropertyAnimator.animate(mHeaderView).cancel();
                    ViewPropertyAnimator.animate(mHeaderView).translationY(0).setDuration(200).start();
                }
            }
        }
    }`

nitinmishra27 commented 9 years ago

FragmentRecentsListCallback mCallback;

    // Container Activity must implement this interface
    public interface FragmentRecentsListCallback {
        public void listIsDragging(int scrollY, boolean firstScroll);
        public void listMotionEvent(ScrollState scrollState, int ScrollY);
}

@Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
        if (dragging) {
            mCallback.listIsDragging(scrollY, firstScroll);
        }
}

@Override
public void onDownMotionEvent() {
    // TODO Auto-generated method stub
}

@Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
    mCallback.listMotionEvent(scrollState, fprl_lv_list.getCurrentScrollY());
}

nitinmishra27 commented 9 years ago

@ksoichiro I'm done, posting the code, What i did simply is doing callback to activity to update the Toolbar Tab Strip position, (I suspect problem might be in Layout setup). If you need XML setup as well i can provide you that also.

ksoichiro commented 9 years ago

@androlizer Could you post your XML, too?

nitinmishra27 commented 9 years ago

Container Activity Setup

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.sfwtech.trailthetrailer"
    android:id="@+id/aml_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/app_background_color"
        android:orientation="vertical" >

        <android.support.v7.widget.Toolbar
            android:id="@+id/aml_awesome_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/app_theme_color"
            android:gravity="center_vertical"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <com.astuetz.PagerSlidingTabStrip
                android:id="@+id/sliding_tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_alignBottom="@+id/aml_awesome_toolbar"
                android:background="@color/app_tabs_color" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/app_background_color" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="@dimen/width_sidebar"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/app_background_color"
        android:paddingLeft="@dimen/margin_5"
        android:paddingRight="@dimen/margin_5" >

        <ListView
            android:id="@+id/aml_lv_sidedrawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:cacheColorHint="#00000000"
            android:clipToPadding="false"
            android:divider="@drawable/list_divider"
            android:dividerHeight="1px"
            android:drawSelectorOnTop="true"
            android:listSelector="@drawable/list_selector"
            android:scrollbars="none" >
        </ListView>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

nitinmishra27 commented 9 years ago

Fragment Setup

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.sfwtech.trailthetrailer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_background_color"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <LinearLayout
                    android:id="@+id/fprl_ll_content"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:visibility="visible" >

                    <com.github.ksoichiro.android.observablescrollview.ObservableListView
                        android:id="@+id/fprl_lv_list"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:cacheColorHint="#00000000"
                        android:clipToPadding="false"
                        android:divider="@color/app_transparent"
                        android:dividerHeight="1px"
                        android:drawSelectorOnTop="true"
                        android:listSelector="@drawable/list_selector"
                        android:padding="@dimen/margin_5"
                        android:scrollbars="none" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/fprl_ll_searchhere"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:visibility="gone" >

                    <com.sfwtech.trailthetrailer.widgets.RobotoTextView
                        android:id="@+id/fprl_tv_icon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/sad"
                        android:textColor="@color/app_white"
                        android:textSize="80sp"
                        app:typeface="font_awesome" />

                    <com.sfwtech.trailthetrailer.widgets.RobotoTextView
                        android:id="@+id/fprl_tv_error"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:text=""
                        android:textColor="@color/app_white"
                        android:textSize="@dimen/text_22"
                        app:typeface="font_awesome" />

                    <com.sfwtech.trailthetrailer.widgets.RobotoTextView
                        android:id="@+id/fprl_tv_retry"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:text=" Retry"
                        android:textColor="@color/text_press_collapse"
                        android:textSize="@dimen/text_22"
                        app:typeface="font_awesome" />
                </LinearLayout>

                <include layout="@layout/fw_progress_indicator" />
            </RelativeLayout>
        </LinearLayout>
    </FrameLayout>

</LinearLayout>

ksoichiro commented 9 years ago

@androlizer Thank you. I think it is because the ViewPager is inside the header and it's moving with header together. How about using FrameLayout like this?

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="?attr/actionBarSize"
        android:background="@color/app_background_color" />

    <LinearLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/app_background_color"
        android:orientation="vertical" >

        <android.support.v7.widget.Toolbar
            android:id="@+id/aml_awesome_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/app_theme_color"
            android:gravity="center_vertical"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_alignBottom="@+id/aml_awesome_toolbar"
            android:background="@color/app_tabs_color" />
    </LinearLayout>
</FrameLayout>

nitinmishra27 commented 9 years ago

Working well, just a few tweaks needed the ListView first child is partially covered by TabStrip you can see it here http://i.imgur.com/fUhyGjZ.png

ksoichiro commented 9 years ago

Great! I'll write samples like yours later.

nitinmishra27 commented 9 years ago

@ksoichiro If you find any solution to that overlapping problem, please comment on this thread, for now i'm closing the issue thread, once again I'm very thankful to you for amazing work.

ChrisMCMine commented 9 years ago

Can you try adding

android:paddingTop="slidingTabsHeight"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"

to your ListView ? Because if you do this, then the ListView will be pushed down from the top by the height of the tabs and clipToPadding ensures that the ListView can scroll all the way through the padding

ksoichiro / Android-ObservableScrollView

Support for Sliding Tabs+ Viewpager #4