Related Questions
CollapsingToolbarLayout | Scrolling and layout issues
Backgroud
I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size
Header Image (Currently just an ImageView)
Scrollable content
Issues
The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image
It shows a majority of the image, but not all. Top is cut, but the bottom is visible.
The Toolbar is set to Pin but it is hidden when scrolling
Just the Header Image should disappear, but instead my whole Appbar gets hidden
When scrolling to view the Expanded Toolbar there is an empty view until the Expanded Toolbar reaches its max height.
After both the Expanded Toolbar and the Toolbar itself become hidden
The Up Arrow does not show up in the Toolbar
Code
Layout.xml
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/download"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_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="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/anim_toolbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<fragment
android:id="#+id/detail"
android:name="<package>.<fragment_name>"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
OnCreate
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
1
2
3
4
5
6
Question 1
Add android:fitsSystemWindows="true" to your AppBarLayout, CollapsingToolbarLayout, and to your ImageView.
I'm guessing a part of your image is below the status bar (due to these lines being missing) which is why you can't see the top of the image.
Question 2
collapseMode="pin" only affects how the Toolbar reacts to collapsing (hence why it is called collapseMode and not scrollFlags).
In almost all cases when using CollapsingToolbarLayout, you should be using scroll|exitUntilCollapsed for your scrollFlags - this keeps the collapsed Toolbar visible even when you scroll downward.
Question 3
This is due to using scroll|enterAlways. Change your flags as per #2
Question 4
As mentioned in the answer to your related question, you need to call getSupportActionBar().setDisplayHomeAsUpEnabled(true); to show the Up button:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
Remove app:contentScrim="?attr/colorPrimary" from your layout XML in CollapsingToolBarLayout tag. It will show the back button in toolbar
Related
I am new in android How achieve custom action bar like given image.
enter image description here
please help me for making this one.
You can simply use a Toolbar for the action bar.
The toolbar is a ViewGroup which you can add any custom view to it.
example:
<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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<YourViewHere/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
and in your activity :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Find the toolbar view inside the activity layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Sets the Toolbar to act as the ActionBar for this Activity window.
// Make sure the toolbar exists in the activity and is not null
setSupportActionBar(toolbar);
}
I'm using a custom AppBarLayout because I want a custom shape for my toolbar with an elevation shadow. The background is set on the AppBarLayout as a custom Drawable and I use the following code to to get the shadow to render on the toolbar.
setClipToOutline(true);
setOutlineProvider(ViewOutlineProvider.BACKGROUND);
All is good, the shadow renders. However, my CollapsingToolbarLayout also contains some tabs and when I collapse the toolbar I want my tabs to stay visible. Currently when I scroll the entire toolbar disappears including the tabs ands it's only when I set exitUntilCollapse on the CollapsingToolbarLayout that the tabs remain after scrolling. The catch is when I set this flag my elevation shadow stops rendering! Why could this be? Is there a way around it, is there another way to stop my tabs disappearing?
I've included some of my relevant layout code below:
<com.ss.views.CustomBackgroundAppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior="com.ss.views.FlingBehaviour"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="0dp"
app:expandedTitleMarginEnd="0dp"
app:expandedTitleMarginStart="0dp"
app:expandedTitleMarginTop="0dp"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:titleEnabled="false"
>
<include
android:id="#+id/tab_layout"
layout="#layout/include_tab_layout"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:minHeight="100dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<include
android:id="#+id/user_dash"
app:layout_collapseMode="parallax"
layout="#layout/include_toolbar_user_dash"/>
</android.support.design.widget.CollapsingToolbarLayout>
</com.ss.views.CustomBackgroundAppBarLayout>
I've implemented a CoordinatorLayout and wrapped my Toolbar inside an AppBarLayout so that the toolbar hides itself when scrolling. Most of the app consists of Fragments that are swapped in and out of the #id/container FrameLayout as seen below. Some of the Fragments are just RecyclerViews, while others are other layouts. I've added app:layout_behavior="#string/appbar_scrolling_view_behavior" to the #id/container FrameLayout. Heres my main layout:
<DrawerLayout>
<RelativeLayout
android:id="#+id/mainRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="5dp"
app:layout_scrollFlags="scroll|enterAlways"
>
</Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
<!-- ignore -->
<drawercontents>
</DrawerLayout>
Now, the Toolbar hides itself when scrolling on Fragments with a RecyclerView.
The issue is, when switching to another fragment that doesnt have a RecyclerView, it will mess up that fragments layout. For example, if I scroll down on a fragment that containers a RecyclerView, the Toolbar will hide itself (like it should). Then, if I switch to the other fragment without the RecyclerView, the toolbar will still be hidden, and the layout will expand into that extra space. If I start back at a fragment with a RecyclerView and dont scroll (so the Toolbar stays visible), and then switch to another fragment, the content is now pushed down off the screen because of the Toolbar.
Heres a screenshot of the issue: http://prnt.sc/a7majo
I also tried disabling the scroll behavior in that fragment using the following code:
Toolbar mToolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);
AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) mToolbar.getLayoutParams();
toolbarLayoutParams.setScrollFlags(0);
mToolbar.setLayoutParams(toolbarLayoutParams);
AppBarLayout appBarLayout = (AppBarLayout) getActivity().findViewById(R.id.appBarLayout);
CoordinatorLayout.LayoutParams appBarLayoutParams = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
appBarLayoutParams.setBehavior(null);
appBarLayout.setLayoutParams(appBarLayoutParams);
This doesnt work either an produces the odd result pictured at the bottom here: http://prnt.sc/a7mapg
So whats the workaround for this? I've seen a few other questions that were similar to this but the answers given did not seem to work for my situation. Thanks in advance!
protected void setScrollingEnabled(boolean isEnabled) {
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(isEnabled ? (AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS) : 0);
}
I'm trying to get the menu on the toolbar for my app.
Currently, I have a CollapsingToolbarLayout. When the user moves up the recyclerview, the image of an island reduces in size and then eventually it collapses into the toolbar.
This is what it looks like when it is expanded:
This is what it looks like when it has collapsed:
Now, you can see that when it is expanded, the heart icon is duplicated (once in the FAB and once in the toolbar. I only want the heart icon to appear in the toolbar when the FAB is no longer visible otherwise, I feel that it will be confusing to a user when you have two buttons on the screen that does exactly the same thing.
How can I only show the heart icon on the toolbar when the collapsingToolBarLayout is fully collapsed? I tried to look for some type of onCollapse listener but no luck.
This is the code for the xml:
<android.support.design.widget.AppBarLayout
android:layout_height="192dp"
android:id="#+id/appbar"
android:layout_width="match_parent">
<!-- 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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="16dp"
app:expandedTitleMarginEnd="32dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/ocean395"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
hey you can add the listener like this
AppBarLayout appBarLayout = (AppBarLayout)view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// Collapsed (make button visible and fab invisible)
} else if (verticalOffset == 0) {
// Expanded (make fab visible and toolbar button invisible)
} else {
// Somewhere in between
}
}
}););
referred from How can i determine that CollapsingToolbar is collapsed?
is it possible to set a subtitle to the CollapsingToolbarLayout like it is possible with a normal toolbar? As far as I know there is no method to do that programmatically. Also, how do I set the white back arrow to the toolbar? Using
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
does not display anything, also adding
app:navigationIcon="#drawable/abc_ic_ab_back_mtrl_am_alpha"
to the toolbar doesn't display it either:
For the subtitle question, I had a similar issue and posted the code I used to fix it here:
https://stackoverflow.com/a/31529101/834692
Hopefully you might also find this useful.
For the back icon, you need to set the toolbar first and then call setDisplayHomeAsUpEnabled():
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_arrow_back_white);
There are some ways to have subtitle in a CollapsingToolbarLayout.
Have a TextView inside your CollapsingToolbarLayout, but then only title would be your Toolbar's title when CollapsingToolbarLayout is collapsed, no third-party library is needed.
Use my library: collapsingtoolbarlayout-subtitle.
.
Use it like you would on any CollapsingToolbarLayout, and add subtitle attribute to it:
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.hendraanggrian.widget.SubtitleCollapsingToolbarLayout
android:id="#+id/subtitlecollapsingtoolbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:subtitle="CollapsingToolbarLayout"
app:title="Subtitle">
<!-- collapsing toolbar content goes here -->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"/>
</com.hendraanggrian.widget.SubtitleCollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- content goes here -->
</android.support.design.widget.CoordinatorLayout>
Oh and about that back arrow on Toolbar, I usually set it by using ?homeAsUpIndicator in xml:
<android.support.v7.widget.Toolbar
...
app:navigationIcon="?homeAsUpIndicator"/>
Hope it helps.