I am tring to apply CollapsingToolbarLayout in my app.
Below XML works fine.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.design.widget.TextInputLayout
android:id="#+id/tilTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginStart="56dp"
android:layout_marginTop="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ViewSwitcher
android:id="#+id/switcherTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title"
android:textSize="36sp"/>
<EditText
android:id="#+id/etTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/title"
android:inputType="textMultiLine"
android:textSize="36sp"/>
</ViewSwitcher>
</android.support.design.widget.TextInputLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/Toolbar"
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="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_save_confirm_action_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_done_white_36dp"
app:fabSize="normal"
app:layout_anchor="#id/collapsingToolbar"
app:layout_anchorGravity="bottom|right|end"/>
<com.google.android.gms.ads.AdView
android:id="#+id/adBannerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-5185146194441120/1301019297"/>
</android.support.design.widget.CoordinatorLayout>
But there is one issue.
NestedScrollView over the screen.
It is not fit in its parent height.
When I apply below code, it is helpful.
android:layout_marginBottom="?attr/actionBarSize"
This mean that should I control using "actionBarHeight"?
Is there any other smart way?
You need to call setSupportActionBar with your toolbar in the Activity onCreate method.
i.e.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
Try setting minHeight attribute in your CollapsingToolbarLayout.
Similar issue and the answer here
Related
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 been trying to use Coordinator layout to create a collapsing toolbar and include a layout using Recycler view, but the toolbar is not collapsing. Could someone point out what i'm doing wrong. Thanks.
Here is the code:
activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="4dp">
<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/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#205052"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="hello"
android:gravity="center"
android:singleLine="true"
android:textColor="#android:color/white"
android:textSize="18sp" />
</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"
android:layout_gravity = "fill_vertical"
android:layout_marginBott`enter code here`om="?attr/actionBarSize"
app:layout_behavior = "#string/appbar_scrolling_view_behavior">
<include layout="#layout/recycler"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
recycler.xml
<?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-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_horizontal_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/fragment_horizontal_recycler_view2">
</android.support.v7.widget.RecyclerView>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/fragment_horizontal_recycler_view3"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Try setting android:layout_height="wrap_content" for <android.support.design.widget.CollapsingToolbarLayout />
I have a problem with toolbar, when I scroll up, the toolbar hide, and when I scroll down, the toolbar show immediately. I want to scroll to top of RecyclerView, the toolbar will show, how can I do it?
Thanks!!!!
<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:id="#id/dn_main_container"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".phone.activity.ActivityPerspective">
<android.support.v7.widget.RecyclerView
android:id="#+id/listView"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"
android:layout_marginTop="-56dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.AppBarLayout
app:elevation="0dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:contentInsetStartWithNavigation="0dp"
android:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/titleView"
android:text="Author"
android:textSize="9pt"
android:textColor="#4D4D4D"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<ImageView
android:id="#+id/search"
android:src="#drawable/search_dark"
android:paddingTop="19dp"
android:paddingBottom="19dp"
android:layout_marginLeft="6dp"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
You should add app:layout_scrollFlags="scroll|enterAlways" in child(in your case <android.support.v7.widget.Toolbar>) of <android.support.design.widget.AppBarLayout> to achieve on scroll down hide app bar and on scroll top show app bar.
Use below format code this will work for you what you want.
<?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:id="#+id/activity_notice"
android:orientation="vertical"
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="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</FrameLayout>
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar_help);
setSupportActionBar(toolbar);
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 using a CollapsingToolbarLayout within a CoordinatorLayout for my bottomsheet's layout. The layout looks like 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/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkBackgroundMainTranslucent"
app:behavior_hideable="true"
app:layout_behavior="#string/bottom_sheet_behavior">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<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:fitsSystemWindows="true"
app:contentScrim="#color/colorScrim"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:contentDescription="#string/poster_string"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/bottomsheet_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/nestedScrollView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/bottomsheet_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textIsSelectable="true"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I was wondering whether it would be possible to customize the toolbar inside the CollapsingToolbarLayout to add an up button and set its title without setting that toolbar as the supportactionbar.
you can put icons/images/button inside the toolbar through xml like this:
<android.support.v7.widget.Toolbar
android:id="#+id/bottomsheet_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin">
<ImageButton
... your usual crud height/width ...
android:id="#+id/contact_detail_edit/>
<TextView />
</android.support.v7.widget.Toolbar>
Then access them through the toolbar like so:
Toolbar bottomSheetToolbar = (Toolbar) bottomSheetLayout.findViewById(R.id.bottomsheet_toolbar);
ImageButton contact_detail_edit = (ImageButton)bottomSheetToolbar.findViewById(R.id.contact_detail_edit);
ImageButton contact_detail_favorite = (ImageButton)bottomSheetToolbar.findViewById(R.id.contact_detail_favorite);