how can I add the viewpager and tablayout under the collapsing toolbar layout
原文
2016-04-07 10:38:40
5
2
android/
android-viewpager/
android-tablayout/
android-collapsingtoolbarlayout
Question
I tried all solution for this problem in stackoverflow but I got nothing helpful . First of all , I want to achieve layout like this or similar to it :
And according to some question in stackoverflow like this I'm able to achieve this layout :
with this xml file :
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/aks"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
app:layout_collapseMode="pin" />
<com.majid.whiteboard.utils.CustomTabLayout
android:id="@+id/tab_layout_detail_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:paddingEnd="20dp"
app:paddingStart="20dp"
app:tabGravity="fill"
app:tabIndicatorColor="@color/silver"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/grid_text_color"
app:tabTextColor="@color/grid_text_color" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_detail_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Every thing is ok but now I have two problems :
1.Tablayout goes to the top of screen but I want to add this under the collapsing toolbar
2.I can only collapse the toolbar only in the collapse area ( means only in pic and top of that) and it's not working in other place on the screen .
2 answers
solution1
3 ACCPTED 2016-04-07 10:55:42
I modified your code... Try this.
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<android.support.design.widget.AppBarLayout
android:id="@+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:minHeight="@dimen/hundred_dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/aks"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_below="@+id/dashboard_txt_des"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="@dimen/fifteen_dp"
app:titleTextAppearance="@style/Toolbar.TitleText" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="@+id/toolbar"
android:layout_gravity="bottom"
android:background="@color/colorPrimary"
app:tabIndicatorColor="@color/orange" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_detail_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
solution2
1 2016-04-15 07:34:30
Here is how I have in my app for sticky toolbar forever with viewpager and TabLayout .
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background2"
android:orientation="vertical">
<include
android:id="@id/toolbar"
layout="@layout/toolbar" />
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/background2"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/actionModeSplitBackground"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/plain_rectangle"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/profile_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/half_padding">
<com.COMPANY.APP.app.custom.RoundedNetworkImageView
android:id="@+id/user_dp"
android:layout_width="@dimen/follow_logo"
android:layout_height="@dimen/follow_logo"
android:layout_centerHorizontal="true"
app:default_image_resource="@drawable/new_user_display" />
<ImageView
android:id="@+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:padding="@dimen/more_padding"
android:src="@drawable/black_edit_icon" />
</RelativeLayout>
<com.COMPANY.APP.app.custom.FontTextView
android:id="@+id/lbl_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="@dimen/standard_padding"
android:paddingTop="@dimen/standard_padding"
android:text="-"
android:textColor="@color/toolbar"
android:textSize="@dimen/user_name_font"
app:customFont="@string/font_regular" />
<com.COMPANY.APP.app.custom.FontTextView
android:id="@+id/lbl_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="@dimen/more_padding"
android:layout_marginRight="@dimen/more_padding"
android:paddingBottom="@dimen/standard_padding"
android:paddingTop="@dimen/standard_padding"
android:text="-"
android:textSize="@dimen/user_description_font"
app:customFont="@string/font_regular" />
<com.COMPANY.APP.app.custom.CustomCheckbox
android:id="@+id/chk_following"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="@dimen/followin_button_padding"
android:layout_marginTop="@dimen/standard_padding"
android:background="@drawable/rectangle_green_selector"
android:button="@null"
android:checked="false"
android:drawableLeft="@drawable/follow_green_inner_selector"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingLeft="@dimen/follow_button_padding"
android:paddingRight="@dimen/follow_button_padding"
android:text="Follow"
android:textColor="@drawable/green_color_selector"
android:textSize="@dimen/following_button_font"
app:customFont="@string/font_regular" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="2dp"
android:orientation="horizontal"
android:paddingTop="2dp"
android:weightSum="3">
<RelativeLayout
android:id="@+id/wishlist_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="@color/background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<com.COMPANY.APP.app.custom.FontTextView
android:id="@+id/lbl_wishlist_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="-"
android:textColor="@color/toolbar"
android:textSize="@dimen/font_14" />
<com.COMPANY.APP.app.custom.FontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Wishlist"
android:textColor="@color/toolbar"
android:textSize="@dimen/font_10" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_alignParentBottom="true"
android:background="@color/button" />
</RelativeLayout>
<LinearLayout
android:id="@+id/following_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="@color/background"
android:gravity="center_vertical"
android:orientation="vertical">
<com.COMPANY.APP.app.custom.FontTextView
android:id="@+id/lbl_following_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="-"
android:textColor="@color/toolbar"
android:textSize="@dimen/font_14" />
<com.COMPANY.APP.app.custom.FontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Following"
android:textColor="@color/toolbar"
android:textSize="@dimen/font_10" />
</LinearLayout>
<LinearLayout
android:id="@+id/follower_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="@color/background"
android:gravity="center_vertical"
android:orientation="vertical">
<com.COMPANY.APP.app.custom.FontTextView
android:id="@+id/lbl_follower_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:gravity="center_horizontal"
android:text="-"
android:textColor="@color/toolbar"
android:textSize="@dimen/font_14" />
<com.COMPANY.APP.app.custom.FontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Followers"
android:textColor="@color/toolbar"
android:textSize="@dimen/font_10" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:title="Collapsing Toolbar"
app:layout_collapseMode="pin">
<com.COMPANY.APP.app.custom.RoundedNetworkImageView
android:id="@+id/img_profile_top"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical|left"
android:layout_marginRight="20dp"
android:alpha="0"
app:default_image_resource="@drawable/new_user_display" />
<com.COMPANY.APP.app.custom.ImageCheckbox
android:id="@+id/user_follow_top"
android:layout_width="45dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical|right"
android:layout_marginRight="20dp"
android:alpha="0"
android:src="@drawable/follow_icon_checkbox_drawable" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/standard_height"
android:layout_alignParentTop="true"
android:background="@drawable/plain_rectangle"
android:elevation="2dp"
app:tabBackground="@color/background"
app:tabIndicatorColor="@color/button"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/toolbar"
app:tabTextAppearance="@style/APPTabText"
app:tabTextColor="@color/disable_text" />
<com.COMPANY.APP.app.custom.CustomViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tab_layout" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
And within Activity I've used-
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
ImageCheckbox user_follow_top = (ImageCheckbox)findViewById(R.id.user_follow_top);
RoundedNetworkImageView imgProfile = (RoundedNetworkImageView) findViewById(R.id.user_dp);
RoundedNetworkImageView getImgProfileTop = (RoundedNetworkImageView)findViewById(R.id.img_profile_top);
AppBarLayout.OnOffsetChangedListener mListener = new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(collapsingToolbarLayout.getHeight() + verticalOffset < 1.5 * ViewCompat.getMinimumHeight(collapsingToolbarLayout)) {
getImgProfileTop.animate().alpha(1).setDuration(400);
user_follow_top.animate().alpha(1).setDuration(400);
collapsingToolbarLayout.setTitle(username);
} else {
getImgProfileTop.animate().alpha(0).setDuration(400);
user_follow_top.animate().alpha(0).setDuration(400);
collapsingToolbarLayout.setTitle("");
}
}
};
AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(mListener);
This is the output -
Without Scrolling
After scrolling
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add views under collapsing toolbar layout?
Collapsing ToolBar Layout with viewpager
How to stick Tabs with Collapsing ToolBar Layout and TabLayout below ToolBar
How to do I add Collapsing Toolbar in my layout?
how to set an image in viewpager for collapsing toolbar layout in android?
Viewpager within a Collapsing toolbar synced with bottom layout
Collapsing toolbar, tabLayout and ViewPager not working properly after scroll
Collapsing toolBar Layout with Viewpager inside NestedScrollView
Toolbar not collapsing with TabLayout
Collapsing toolbar with tablayout
Related Tags