I need to implement a CollapsingToolbarLayout containing a Relative layout and a tab with viewpager below that. I have achieved ,but View pager is not coming to full screen. This is my code.
`
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/White">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:textSize="20sp"
android:textColor="#color/colorPrimaryDark"
android:textStyle="italic"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="2dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<com.wodrob.tatco.wodrobcanvas.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/tabs_background"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:background="#color/White"
android:layout_height="fill_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
>
</android.support.v4.view.ViewPager>
</android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
`
I tried to give view pager layout outside the Appbar layout, but at that time it is overlapping the CollapsingToolbarLayout and comming to full screen in background.Is there any other way for achieving this??
Related
In Coordinatorlayout inside Nestedscrollview I have RelativeLayout and inside RelativeLayout I have Textview. When Nestedscrollview touches to Toolbar bottom part it scrolls textview content instead to full Relativelayout card.
Here is my code.
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/product_bottom_layout"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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="#color/white"
app:expandedTitleTextAppearance="#style/TransparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/product_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
app:imageUrl="#{viewModel.imageUrl}"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
android:background="#color/white"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:gravity="center_vertical"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_60"
android:layout_marginLeft="#dimen/dimen_7"
android:layout_marginRight="#dimen/dimen_7"
android:layout_marginTop="#dimen/dimen_7"
android:background="#drawable/card_bg"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_3"
android:layout_marginRight="#dimen/dimen_3"
android:layout_marginTop="#dimen/dimen_3"
android:background="#color/white">
<app.com.test.Views.CustomTextView
android:id="#+id/description_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_12"
android:layout_marginRight="#dimen/dimen_12"
android:layout_marginTop="#dimen/dimen_12"
android:lineSpacingExtra="8dp"
android:textColor="#color/title_color"
android:textSize="14sp"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I got the solution. It's actually NestedScrollView does not scroll its child, it actually scroll content inside its child so to scroll whole layout instead of text we need to add one more parent layout like this:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="#dimen/dimen_60"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_10"
android:background="#color/bg_color"
android:orientation="vertical"
android:padding="#dimen/dimen_6">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_10"
android:layout_marginLeft="#dimen/dimen_3"
android:layout_marginRight="#dimen/dimen_3"
android:layout_marginTop="#dimen/dimen_3"
android:background="#drawable/card_bg">
<app.com.test.Views.CustomTextView
android:id="#+id/product_title_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_12"
android:layout_marginRight="#dimen/dimen_12"
android:layout_marginTop="#dimen/dimen_12"
android:text=""
/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
The CoordinatorLayout uses two ViewPager. The first ViewPager is inside CollapsingToolbarLayout and the second ViewPager contains contents. Problems is on Y scrolling, the content ViewPager is overlapping the ViewPager in CollapsingToolbarLayout. The expected result must be both scrolling as one entity. Does someone face this issue. Please help am stuck on this issue for 12 hours now.
<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarAccountCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/accounts_storecard_background"
android:fadingEdgeLength="0dp"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:statusBarScrim="#null"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<myapp.android.ui.views.WTextView
android:id="#+id/toolbarText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="10dp"
android:letterSpacing="0.1"
android:text="Store card"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="12sp"
app:WTextView_font="medium_bold" />
</android.support.v7.widget.Toolbar>
<myapp.android.util.WCustomViewPager
android:id="#+id/myAccountsCardPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:paddingLeft="30dp"
android:paddingRight="30dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<myapp.android.ui.views.WFragmentViewPager
android:id="#+id/fragmentpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I have a CollapsingToolbarLayout in layout, below that I have placed a RecyclerView. it works perfect and the parallax effects comes smoothly when the RecyclerView scrolls, but the issue, is suppose if the RecyclerView has less items and there is nothing to scroll, still it scolls and an empty space shows at the bottom. what my requirment is it shouldn't scroll if the RecyclerView can accomodate all the views in the visible screen, is there any way to do this ?
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/container_id"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
toolbar.xml
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
app:layout_scrollFlags="scroll"
app:layout_collapseMode="parallax"
android:layout_below="#+id/toolbar"
android:minHeight="250dp"
android:layout_height="300dp"
android:layout_width="match_parent"/>
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ToggleButton
android:layout_centerVertical="true"
android:layout_margin="#dimen/dimen_xs"
android:layout_width="20dp"
android:layout_height="20dp"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:textOff=""
android:textOn=""/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I want to use RelativeLayout in my collapsingToolbar . but RelativeLayout doesn't show correctly . I want add RelativeLayout under the Toolbar like this picture :
This is my xml of DetailActivity :
<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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/detail_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_detail"
android:layout_width="96dp"
android:layout_height="124dp"
android:src="#drawable/ic_hamburger"
android:layout_alignParentRight="true"
android:layout_margin="8dp" />
<TextView
android:id="#+id/txt_name_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="نام :"
android:layout_toLeftOf="#+id/img_detail"
android:layout_alignTop="#+id/img_detail"/>
<TextView
android:id="#+id/txt_count_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="تعداد"
android:layout_toLeftOf="#+id/img_detail"
android:layout_below="#+id/txt_name_detail"
android:layout_marginTop="8dp"/>
<TextView
android:id="#+id/txt_last_update_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="آخرین آپدیت"
android:layout_toLeftOf="#+id/img_detail"
android:layout_below="#+id/txt_count_detail"
android:layout_marginTop="8dp"/>
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_detail_activity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nest_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_detail_activity"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
And This code doing like this :
And I want add RelativeLayout under the toolbar.
Try placing the toolbar as the second view in your CollapsingToolbarLayout.Also add android:marginTop="your toolbar height" to your RelativeLayout.
refer to this link. create your tab with viewpager then pin that to collapsing app bar click here
try placing the
<android.support.v7.widget.Toolbar/>
tag outside the AppBarLayout
I'm trying to use the AppBarLayout + CollapsingToolbarLayout to have a collapsible toolbar with an image that fades away while scrolling up but the toolbar remains.
The problem is when I set both AppBarLayout & CollapsingToolbarLayout android:layout_height = "wrap_content", the toolbar fills the entire screen.
http://i.stack.imgur.com/be1m6.png
When I set android:layout_height = "200dp", the height is fixed, but it doesn't work with the NestedScrollView and resize.
http://i.stack.imgur.com/MTao2.png
Here's the xml:
<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/articleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.gmail.senokt16.bosphoruschronicle.ArticleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/articleCollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/article_app_bar">
<ImageView
android:id="#+id/articleActivityImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="100dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:fitsSystemWindows="true"/>
<include
android:id="#+id/article_app_bar"
android:fitsSystemWindows="true"
layout="#layout/article_app_bar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="300dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/articleActivityContents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/articleFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#android:drawable/ic_menu_share" />
</android.support.design.widget.CoordinatorLayout>
This happened to me as well.
First, I removed <include> and added the toolbar manually.
It still happened, so after some fiddling I found that it happens because my toolbar had a minimumHeight, but layout_height=wrap_content. I changed it to layout_height=?attr/actionbarsize, and it worked. Here is my example. (The FrameLayout has a nestedscrollview like yours inside.)
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:src="#drawable/logo"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#android:color/transparent"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I did some changes on the code and fixed the issue somewhat. Now I have another problem:
CollapsingToolbarLayout & NestedScrollView don't work together