AppBarLayout change offset programmatically - android

How can I change the offset of the AppBarLayout programmatically?
I want a certain offset to the AppBarLayout(partially expanded) when the Activity first loads, then the user could expand it more or collapse it. The current behaviour is that it's fully expanded when the Activity first loads.
my.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="300dp"
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:clickable="true"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/pic"/>
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/overlay"
app:layout_collapseMode="pin"/>
</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"
app:title="#string/app_name"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Need to support API 16+
Thanks!


Use this: ScrollableAppBar
You just have to replace your AppBarLayout with:
<it.michelelacorte.scrollableappbar.ScrollableAppBar
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="380dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
</it.michelelacorte.scrollableappbar.ScrollableAppBar>
and than:
ScrollableAppBar appBarLayout = (ScrollableAppBar) findViewById(R.id.appbar);
//To give the effect "in the middle" of the image (like gif)
appBarLayout.collapseToolbar();
Output:

Related

Android: CollapsingToolBar do not setting at one level the icons with the title that appears in the bottom of toolbar after collapse

Screen after collapsed
Using CollapsedToolbarLayout: when picture is hiden and collapsed, the title is going to the top(in toolbar), but not on the same level(line) with the back(and menu) icons. Where can there be a mistake? (Everything is put inside CoordinatorLayout with width and height = match_parent and fitsSystemWindows="true")
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="Hello"
app:collapsedTitleGravity="center_vertical"
>
<android.support.v7.widget.AppCompatImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:background="#color/greenMain"
app:layout_collapseMode="parallax"
/>
<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"
menu="#{R.menu.menu_profile}"
navigationIcon="#{R.drawable.ic_small_arrow_left}"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

How to collapse ImageView nested inside a CoordinatorLayout

I have the following layout
<CoordinatorLayout>
<CardView>
<LinearLayout>
<ImageView />
<View />
</LinearLayout>
</CardView>
<RecyclerView />
</CoordinatorLayout>
I just want to hide the ImageView with parallax animation whenever the RecyclerView is scrolled down and show the ImageView whenever RecyclerView is scrolled up. I got to know that this behaviour can be achieved using CoordinatorLayout.

For a parallax effect you need to use AppBarLayout and CollapsingToolbarLayout.
You can try putting ImageView with attribute
app:layout_collapseMode="parallax"
inside the CollapsingToolbarLayout above the Toolbar
Detailed code with CoordinatorLayout
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:statusBarBackground="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
tools:context="com.example.android">
<android.support.design.widget.AppBarLayout android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true"
android:elevation="4dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleEnabled="false"
android:background="#color/colorPrimaryDarkTransparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="208dp"
android:scaleType="centerCrop"
android:src="#drawable/image_you_want"
app:layout_collapseMode="parallax"
android:background="#color/colorPrimaryDark"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:background="#color/colorPrimaryDarkTransparent2"
app:titleTextAppearance="#style/AppBarTitleappearance"
app:subtitleTextAppearance="#style/AppBarSubtitleApppearanceLight"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="scrollable"
app:tabGravity="center"
android:elevation="4dp"
app:tabIndicatorColor="#color/ornage"
app:tabTextAppearance="#style/NavigationTabTextAppeareance"
/>
</android.support.design.widget.AppBarLayout>
Make sure you have following namespaces in your root tag of the layout
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
As per your requirement you can Use any layout at that position with attribute
app:layout_collapseMode="parallax"
I hope you will get some help from this.

The view you do want to collapse must be wrapped within CollapsingToolbarLayout inside AppBarLayout.
Try the structure below:
<....CoordinatorLayout
....
...
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Your collapsing content will goes here -->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<...NestedScrollView
.....
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</....CoordinatorLayout>

How to reduce left and bottom space from toolbar title in collapsing action bar android?

I need to reduce left and bottom space from toolbar title in collapsing action bar. I need to do something like whats app. Here is my code.
Thanks for help.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
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="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/img_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/speaker1"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

add this below in your activity where you are setting the title
mBinding.collapseToolbar.setExpandedTitleMarginBottom((int) getResources().getDimension(R.dimen.contact_info_expanded_title_margin));
mBinding.collapseToolbar.setExpandedTitleMarginStart((int) getResources().getDimension(R.dimen.contact_info_expanded_title_margin));
mBinding.collapseToolbar.setTitle("Toolbar title");

Android material design layout without expanded title

I am trying to build a layout that should look like this below.
So I am trying to use AppBarLayout for this purpose
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleTextAppearance="#style/AppBarExpanded"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/appartment2"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<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/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The problem is that I can see the expanded title appearing in the bottom of the picture. How can I get rid of it and display title only when the layout is collapsed (scrolled up so that the picture is hidden)?

CollapsingToolbarLayout title overlaps MenuIcons (it doesn't truncate)

I have a problem with long titles in CollapsingToolbarLayout. It looks like this (on the right there is phone and overflow icons):
Code for this (and yes, I know that FAB is wrongly placed, but I keep it just for debug purposes - don't mind it please). I just want title to end (truncate) where icons start):
<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/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="265dp"
android:background="?colorPrimary">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="20dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="#drawable/placer" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="40dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Categories

Resources