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
Related
I have the following layout that has a collapsing toolbar with a LinearLayout inside -
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".application_flow.group.GroupOverviewFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:elevation="10dp"
android:fitsSystemWindows="true"
android:stateListAnimator="#animator/show_toolbar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center"
app:contentScrim="#color/colorPrimary"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="Lohamei Galipoly 38"
app:titleEnabled="false"
app:toolbarId="#id/group_tasks_toolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="14dp"
android:layout_marginEnd="14dp"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6">
<androidx.appcompat.widget.Toolbar
android:id="#+id/group_tasks_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/left_arrow_white"
app:titleTextColor="#color/white" />
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:textColor="#color/white"
android:textSize="18sp"
tools:text="Total group tasks: 8" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/group_tasks_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/white"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white" />
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/group_tasks_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
For some reason it does not collapse the entire content of the LinearLayout like it should and it is being left fixed in place.
This error seemed to start happening after I switched to work with the LinearLayout inside my CollapsingToolbarLayout
What is it that I am missing?
I think you are missing an actual toolbar inside the collapsing toolbar.
try adding a toolbar after the linear layout's closing tag.
example:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryLight"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:layout_collapseMode="pin"
app:title="Toolbar title" />
and another thing I noticed, you AppBarLayout has android:fitsSystemWindows="true" so check that as well.
I have a collapsingToolbarLayout in my app. I put a ViewPager in top of my layout.I want to my toolbar be disappear in expended state and is pin in the collapsing state. I write this code for my layout, but when I scroll layout toolbar don't appear and rather than the part of my ViewPager appear.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="192dp"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:layout_scrollInterpolator="#android:anim/decelerate_interpolator"
app:toolbarId="#+id/toolbar"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
></android.support.v4.view.ViewPager>
<me.relex.circleindicator.CircleIndicator
android:id="#+id/Indicator"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center"
android:layout_marginTop="10dp" />
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#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="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txtTitleCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/category_title"
android:layout_alignParentEnd="true"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/categoryRecy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTitleCategory"
android:layout_margin="20dp"/>
<TextView
android:id="#+id/txtTopCourseCat1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="دوره های محبوب"
android:layout_below="#+id/categoryRecy"
android:layout_alignParentEnd="true"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/temp"
android:layout_below="#+id/topCourseCat1Recy"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/topCourseCat1Recy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTopCourseCat1">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is screenshot of my app:
This is screenshot of my expected behavior :
Just change toolbar like this
<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="#color/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
Thank you
I have a layout with collapsing toolbar and tabs as shown in attached image below
I want to show my tab layout on top while scrolling the list in anyone of the tabs
I have tried some links link1 and end with below result as shown in image below
I want to hide my toolbar ,profile image and textview completely while scrolling the list in any tabs
following is the layout xml code that I used
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/background_color"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/mobilebanner"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="abc"
android:gravity="center_horizontal"
android:lineSpacingExtra="8dp"
android:textSize="20sp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/background_color"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/black" />
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="400dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|center_horizontal|center"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/user" />
</android.support.design.widget.CoordinatorLayout>
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>
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??