I have a collapsing toolbar layout. I have shown graph on it. So if there are no items to show in the graph I want to show the collapsing toolbar layout as collapsed or hidden or closed. Only the toolbar and title should be displayed and not the graph.
Here is the view :
I want to display only the toolbar where I have a menu icon on left side.
Layout code :
<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:layout_gravity="center"
tools:context="com.example.siddhi.googletaskmanager"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
android:id="#+id/parentPanel"
android:background="#color/background">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/appbar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#style/expandedappbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.github.mikephil.charting.charts.HorizontalBarChart
android:id="#+id/chart"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/toolbar"
app:layout_collapseMode="parallax"
android:layout_gravity="bottom"
android:layout_marginBottom="40dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/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.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:paddingTop="10dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
app:menu_colorNormal="#color/colorAccent"
app:menu_colorPressed="#color/colorAccent"
fab:menu_icon="#drawable/ic_more_horiz_white_24dp"
fab:menu_labels_ellipsize="end"
fab:menu_labels_singleLine="true"
fab:menu_backgroundColor="#color/colorPrimary"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_list_white_24dp"
fab:fab_size="mini"
fab:fab_label="List 1"
app:fab_colorPressed="#color/colorAccent"
app:fab_colorNormal="#color/colorAccent"/>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_list_white_24dp"
fab:fab_size="mini"
fab:fab_label="List 2"
app:fab_colorPressed="#color/colorAccent"
app:fab_colorNormal="#color/colorAccent"/>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_list_white_24dp"
fab:fab_size="mini"
fab:fab_label="List 3"
app:fab_colorPressed="#color/colorAccent"
app:fab_colorNormal="#color/colorAccent"/>
</com.github.clans.fab.FloatingActionMenu>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_white_24dp"
fab:fab_size="normal"
app:fab_colorPressed="#color/colorAccent"
app:fab_colorNormal="#color/colorAccent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="80dp"
android:layout_marginEnd="80dp"
android:layout_marginBottom="10dp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
EDIT:
My current code is this :
if(mItems.size() == 0) {
mBarChart.setVisibility(View.INVISIBLE);
appBarLayout.setExpanded(false,false);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)appBarLayout.getLayoutParams();
// lp.height = (int) getResources().getDimension(R.dimen.toolbar_height);
lp.height = (int) (android.R.attr.actionBarSize);
}
else
{
appBarLayout.setExpanded(true);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)appBarLayout.getLayoutParams();
lp.height = (int) getResources().getDimension(R.dimen.appbar_height);
mBarChart.setVisibility(View.VISIBLE);
}
dimension:
<dimen name="toolbar_height">128dp</dimen>
<dimen name="appbar_height">200dp</dimen>
How can I achieve this?
Thank you..
You can do this programatically using appBarLayout.setExpanded(true/false).
if(yourGraphIsEmpty){
appBarLayout.setExpanded(false);
}else{
appBarLayout.setExpanded(true);
}
The core problem is that there is no CollapsingToolbarLayout.lock(); method up until now (v23.2.1 of support design)
This post is a complete solution that really works well
Related
I am trying to achieve something with collapsible toolbar layout and I have 2 tabs with a viewPager2
Below are two images for example for the case of expanded screenshot and collapsed screenshot.
Below is the code I have in XML not sure where it is going wrong... my scroll is not working proper in this case. I want the toolbar to be stick on top when collapsed
I tried adding toolbar inside AppbarLayout but that didn't worked.
Also tried below links
somehow not working for me Link1 Link2
<?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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_dark_blue">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white_cream_darkest_blue"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:windowSoftInputMode="adjustResize">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_cream_darkest_blue"
app:collapsedTitleTextAppearance="#color/text_color"
app:contentScrim="#color/white_cream_darkest_blue"
app:expandedTitleTextAppearance="#color/text_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/white_cream_darkest_blue">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginTop="40dp"
android:layout_marginEnd="#dimen/margin_end"
android:orientation="vertical">
<TextView
android:id="#+id/textViewTitle"
style="#style/screen_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:text="Mailing\nAddress"
android:textColor="#color/text_color" />
<TextView
android:id="#+id/textViewSubTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto_light"
android:text="We'll send your bill to this address."
android:textAlignment="center"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="30dp" />
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
android:windowSoftInputMode="adjustResize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/text_service"
app:title="">
<TextView
android:id="#+id/menuOption"
style="#style/screen_sub_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_medium"
android:text="Mailing Address"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:clipToPadding="false"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayoutMailingAddress"
style="#style/tabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
app:layout_constraintTop_toTopOf="parent"
app:tabInlineLabel="true"
app:tabTextAppearance="#style/MyCustomTextAppearance" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPagerMailingAddress"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent="1.2"
app:layout_constraintTop_toBottomOf="#+id/tabLayoutMailingAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
ViewPager2 won't work well inside NestedScrollView as its inner RecyclerView enables the nested scrolling by default.
To fix the misbehavior, you need to disable this nested scrolling of the ViewPager2 RecyclerView programmatically as it's not accessible in layout:
Kotlin:
viewPager.children.find { it is RecyclerView }?.let {
(it as RecyclerView).isNestedScrollingEnabled = false
}
Java:
for (int i = 0; i < viewPager.getChildCount(); i++) {
View child = viewPager.getChildAt(i);
if (child instanceof RecyclerView) {
((RecyclerView) child).setNestedScrollingEnabled(false);
break;
}
}
My layout is being overlapped by the Toolbar. I have to include a 56dp padding to push it down below the toolbar, which makes it awkward to work with (and likely also means I can't use AlignParentTop). The fragment screen (activity_login.xml) is pretty much straight up stock Google-provided code.
(Without Padding)
activity_login.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.myProject.LoginActivity"
android:id="#+id/login2LinearLayout"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="#+id/login"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/action_sign_in"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
app_bar_main.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<include layout="#layout/login" />
<include layout="#layout/activity_login" />
<include layout="#layout/home" />
<include layout="#layout/my_stats" />
<include layout="#layout/settings" />
<include layout="#layout/winners" />
<include layout="#layout/about" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
Put appbar code and main content code in LinearLayout with vertical orientation. That solved problem for me.
Here is my code
<?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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:layout_margin="10dp"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
This is very straight forward and easy. Just follow what I tried to say below.
You replace any View by using:
**
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
**
//Here, blackFragment is id of FrameLayout View. You replace FrameLayout View with Fragment's Layout. Note: It should be FrameLayout or FrameLayout's derivatives Layout.
My whole code is:
1) SettingsActivity.java
**
public class SettingsActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar2);
mToolbar.setTitle("Settings");
//// remove the left margin from the logo
mToolbar.setPadding(2, 0, 0, 0);//for tab otherwise give space in tab
mToolbar.setContentInsetsAbsolute(0, 0);
setSupportActionBar(mToolbar);
// Display the fragment as the main content
getFragmentManager().beginTransaction()
.replace(R.id.blankFragment, new SettingsFragment())
.commit();
}
}
**
2) activity_fragment.xml
**
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="horizontal">
<!--scroll|snap-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/statusbar"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout
android:id="#+id/blankFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:orientation="horizontal" />
</FrameLayout>
**
You can see my Screen after I replaced FrameLayout's View with Fragment's View
I think the most simple solution in this situation is just add below line to linear_layout inside of activity_login.xml
app:layout_behavior="#string/appbar_scrolling_view_behavior"
consider using this
int horizontalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int verticalMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
int topMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int) getResources().getDimension(R.dimen.activity_vertical_margin) + 30, getResources().getDisplayMetrics());
LinearLayout layout = (LinearLayout) getListView().getParent().getParent();
getListView().setPadding(horizontalMargin, topMargin, horizontalMargin, verticalMargin);
and then you use setupActionBar method to inflate the toolbar
How to design a layout with Appbar scroll from the middle of the screen and pin it at the top?
My question is exactly same as the design in Google I/O 2015 app (Detail screen of Event). I've made the Toolbar appear at an offset from top and have an ImageView at the top. And a ScrollView which contains the required content. Right now, only the content inside the ScrollView gets scrolled and not the ImageView or Toolbar. Also I need to scroll the ImageView at the top in Parallax.
Could someone help me in designing the layout?
activity_detail.xml
<RelativeLayout
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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="196dp"
android:layout_alignParentTop="true"
android:src="#mipmap/ic_launcher" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_below="#id/imageView"
android:background="#color/blue"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="72dp"
app:contentInsetStart="72dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="72dp"
android:text="Project Tango = Mobile 3D tracking and perception"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="72dp"
android:layout_marginRight="16dp"
android:text="29 May 10:00-11:00 am in Room 2 (L2)"
android:textColor="#FFFFFF"
android:textSize="14sp" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_below="#id/appbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="#string/longText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
</RelativeLayout>
My Code Screenshot
Google IO app - screenshot
I got it solved! Replaced the Parent ScrollView with StickyScrollViewItems and set AppBarLayout as sticky.
activity_detail.xml
<com.emilsjolander.components.StickyScrollViewItems.StickyScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="196dp"
android:layout_alignParentTop="true"
android:src="#mipmap/ic_launcher" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_below="#id/imageView"
android:background="#color/blue"
android:fitsSystemWindows="true"
android:tag="sticky"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="72dp"
app:contentInsetStart="72dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="72dp"
android:text="Project Tango = Mobile 3D tracking and perception"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="72dp"
android:layout_marginRight="16dp"
android:text="29 May 10:00-11:00 am in Room 2 (L2)"
android:textColor="#FFFFFF"
android:textSize="14sp" />
</android.support.design.widget.AppBarLayout>
<TextView
android:layout_below="#id/appbar"
android:text="#string/longText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</com.emilsjolander.components.StickyScrollViewItems.StickyScrollView>
DetailActivity.java
public class DetailActivity extends AppCompatActivity {
private Toolbar toolbar;
private StickyScrollView scrollView;
private ImageView imageView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(false);
imageView = (ImageView) findViewById(R.id.imageView);
scrollView = (StickyScrollView) findViewById(R.id.scrollView);
scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
#Override
public void onScrollChanged() {
int scrollY = scrollView.getScrollY();
imageView.setTranslationY(scrollY/2);
}
});
}
}
I am using the new support-design library. As you can see by the gif and code below, I have a standard setup for a expanding/collapsing toolbar that contains an imageview.
Below the appbar, I have a NestedScrollView that contains a textview among other things. As you can see at the very bottom of the code, I have a FAB, anchored to the textview. I want the FAB to scroll under the Toolbar.
Any help would be much appreciated. Thanks.
<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/app_bar_layout"
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/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_scrollFlags="exitUntilCollapsed|scroll"
app:expandedTitleTextAppearance="#style/TransparentText"
app:collapsedTitleTextAppearance="#style/TransparentText">
<ImageView
android:id="#+id/venue_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="top"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:minHeight="?actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</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"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F2F2F2"
android:orientation="vertical">
<TextView
android:id="#+id/test_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="48dp"
android:layout_gravity="bottom"
android:background="#color/primary"
android:minHeight="?android:actionBarSize"
android:paddingBottom="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
android:textColor="#android:color/white"
android:textSize="#dimen/expanded_toolbar_text"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!-- Anchored to #+id/test_textview-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_heart_white_24dp"
app:fabSize="normal"
app:layout_anchor="#+id/toolbar_textview"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
Try this:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_heart_white_24dp"
app:fabSize="normal"
app:layout_anchor="#+id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
I replaced the anchor #+id/toolbar_textview with #+id/app_bar_layout, It is the right approach that should work.
I know it's old question, but I think I know better answer. You can make these changes in code:
mScrollView.getViewTreeObserver().addOnScrollChangedListener(
new ViewTreeObserver.OnScrollChangedListener() {
#Override
public void onScrollChanged() {
if (mScrollView.getScrollY() < mTopLayout.getHeight()){
mFab.show();
} else {
mFab.hide();
}
}
}
);
It will hide FAB when reaching the top.
I have a RecyclerView that triggers a CollapsingToolbarLayout and when I try and reopen the collapsed toolbar on 4.2.2 I get the crash below. Any ideas?
java.lang.IllegalArgumentException: width and height must be > 0
at android.graphics.Bitmap.createBitmap(Bitmap.java:638)
at android.graphics.Bitmap.createBitmap(Bitmap.java:620)
at android.support.design.widget.CollapsingTextHelper.ensureExpandedTexture(CollapsingTextHelper.java:405)
at android.support.design.widget.CollapsingTextHelper.setInterpolatedTextSize(CollapsingTextHelper.java:382)
at android.support.design.widget.CollapsingTextHelper.calculateOffsets(CollapsingTextHelper.java:227)
at android.support.design.widget.CollapsingTextHelper.setExpansionFraction(CollapsingTextHelper.java:203)
at android.support.design.widget.CollapsingToolbarLayout$OffsetUpdateListener.onOffsetChanged(CollapsingToolbarLayout.java:754)
at android.support.design.widget.AppBarLayout$Behavior.dispatchOffsetUpdates(AppBarLayout.java:851)
at android.support.design.widget.AppBarLayout$Behavior.setAppBarTopBottomOffset(AppBarLayout.java:834)
at android.support.design.widget.AppBarLayout$Behavior.scroll(AppBarLayout.java:793)
at android.support.design.widget.AppBarLayout$Behavior.onNestedScroll(AppBarLayout.java:644)
at android.support.design.widget.AppBarLayout$Behavior.onNestedScroll(AppBarLayout.java:583)
at android.support.design.widget.CoordinatorLayout.onNestedScroll(CoordinatorLayout.java:1428)
at android.support.v4.view.ViewParentCompat$ViewParentCompatStubImpl.onNestedScroll(ViewParentCompat.java:97)
at android.support.v4.view.ViewParentCompat.onNestedScroll(ViewParentCompat.java:330)
at android.support.v4.view.NestedScrollingChildHelper.dispatchNestedScroll(NestedScrollingChildHelper.java:162)
at android.support.v7.widget.RecyclerView.dispatchNestedScroll(RecyclerView.java:8306)
at android.support.v7.widget.RecyclerView.scrollByInternal(RecyclerView.java:1387)
at android.support.v7.widget.RecyclerView.onTouchEvent(RecyclerView.java:2209)
at android.view.View.dispatchTouchEvent(View.java:7127)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2170)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:1905)
Update:
It looks like the method in the library that causes the crash is only checking if either the height or width is greater than 0 -- but a Bitmap requires both to be > 0:
private void ensureExpandedTexture() {
if(this.mExpandedTitleTexture == null && !this.mExpandedBounds.isEmpty() && !TextUtils.isEmpty(this.mTextToDraw)) {
this.mTextPaint.setTextSize(this.mExpandedTextSize);
this.mTextPaint.setColor(this.mExpandedTextColor);
int w = Math.round(this.mTextPaint.measureText(this.mTextToDraw, 0, this.mTextToDraw.length()));
int h = Math.round(this.mTextPaint.descent() - this.mTextPaint.ascent());
this.mTextWidth = (float)w;
if(w > 0 || h > 0) {
this.mExpandedTitleTexture = Bitmap.createBitmap(w, h, Config.ARGB_8888);
Canvas c = new Canvas(this.mExpandedTitleTexture);
c.drawText(this.mTextToDraw, 0, this.mTextToDraw.length(), 0.0F, (float)h - this.mTextPaint.descent(), this.mTextPaint);
if(this.mTexturePaint == null) {
this.mTexturePaint = new Paint();
this.mTexturePaint.setAntiAlias(true);
this.mTexturePaint.setFilterBitmap(true);
}
}
}
}
Here is 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"
android:id="#+id/main_content"
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="#dimen/series_detail_header_image_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
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="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleTextAppearance="#style/TransparentText">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="?attr/colorPrimary"
android:paddingLeft="20dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:layout_gravity="bottom"
>
<TextView
android:id="#+id/seriesDetailTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="American Pickers"
android:textColor="#android:color/white"
android:textSize="20sp"/>
<TextView
android:id="#+id/seriesDetailTunein"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tune in tuesdays at 8pm"
android:textColor="#android:color/white"
android:textSize="18sp"/>
<LinearLayout
android:id="#+id/adFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="#dimen/padding_small"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="#dimen/margin_minimal"
android:text="#string/show_detail_presented_by"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Small"
android:textColor="#android:color/white"
android:textSize="10sp"
android:visibility="visible"/>
<FrameLayout
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/show_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:paddingTop="#dimen/toolbar_height"
/>
<RelativeLayout android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:background="#color/app_primary"
app:layout_collapseMode="pin"
android:layout_gravity="bottom"
app:layout_anchor="#id/show_view_pager"
app:layout_anchorGravity="top"
>
<Spinner
android:id="#+id/season_spinner"
android:layout_width="124dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/series_detail_spinner_left_margin"
android:prompt="#string/seasons"
android:spinnerMode="dropdown"
android:dropDownVerticalOffset="-48dp"
android:dropDownWidth="124dp"
android:background="#drawable/selector_spinner_selector_list"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:clipToPadding="false"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabMode="scrollable" />
</RelativeLayout>
I filed a bug: Crash in Design support library - CollapsingTextHelper class -- but if anyone has a fix in the meantime I'd be very grateful!
I've discovered the cause. In the xml for the CollapsingToolbarLayout I set:
app:expandedTitleTextAppearance="#style/TransparentText"
And the style was:
<style name="TransparentText">
<item name="android:textColor">#00666666</item>
</style>
So that it would only show the text when the toolbar was collapsed.
Turns out that the styles for expandedTitleTextAppearance and collapsedTitleTextAppearance need to specifically inherit from TextAppearance. So this style works properly:
<style name="TransparentText" parent="#android:style/TextAppearance">
<item name="android:textColor">#00666666</item>
</style>
Just a heads up for anyone else who makes the same mistake...
Update (7/20/2015): This bug appears to be fixed in v22.2.1 of the Design Support Library (https://code.google.com/p/android/issues/detail?id=178674)