I'm trying to implement collapsing tollbar with swipe to refresh and recyclerview.
When I'm trying to scroll (when recyclerview has only one item) toolbar collapse,
but when I'm trying to scroll down to show toolbar, it's impossible because swipe down causes swipe to refresh. When recyclerview has more item it works perfectly.
Link to gif with problem
<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="wrap_content"
android:elevation="1dp"
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"
android:background="?attr/colorPrimary"
android:elevation="1dp"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/activity_main_swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/cities_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:elevation="1dp"
android:onClick="addCity"
android:src="#drawable/ic_plus_white_36dp"
app:borderWidth="0dp" />
Update: This bug has been fixed in the version 23.1.1 of support library
You can set onOffsetChanged listener for your AppBarLayout and prevent to swipe refreshing until AppBarLayout layout offset 0.
This is good example :
https://gist.github.com/blackcj/001a90c7775765ad5212
I managed it by adding the following implementation of OnOffsetChangedListener in fragment:
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (collapsingToolbarLayout.getHeight() + verticalOffset < 2 * ViewCompat.getMinimumHeight(collapsingToolbarLayout)) {
swipeRefreshLayout.setEnabled(false);
} else {
swipeRefreshLayout.setEnabled(true);
}
}
#Override
public void onResume() {
super.onResume();
appBarLayout.addOnOffsetChangedListener(this);
}
#Override
public void onPause() {
super.onPause();
appBarLayout.removeOnOffsetChangedListener(this);
}
Related
I want something like this:
I have the following now:
With the following 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="130dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent">
</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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/book_detail">
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_input_add"
android:layout_margin="16dp"
android:clickable="true"
android:focusable="true"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
But I have some problems:
The Title is on top instead of bottom
There's something like a separator on top
I'm using a coordinator now, but I don't need a collapsing toolbar, so I think that there must be another solution maybe. How can I solve this?
Let's first start by making the toolbar taller. I think what you're looking for is CollapingToolbarLayout
To use the CollapsingToolbarLayout you have to change your ConstraintLayout to CoordinatorLayout.
Then you have to create an AppBarLayout to hold the CollapsingToolbarLayout and the Toolbar.
Then to make the floating button in that place you have to anchor it to the AppBarLayout created earlier like below:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
That way it will be anchored to the AppBarLayout so it will go up and down as the AppBarLayout goes up or down.
EDIT #1 :
To remove the title from the top and remove the separator you have to set your activity's theme to NoActionBar. In your AndroidManifest.xml file go to your activity and change its code to the following:
<activity
android:name="YOUR_ACTIVITY_PATH.BookDetailActivity"
android:theme="#style/AppTheme.NoActionBar" />
This way the activity will be declared without an action bar which means no separator and no title.
Then to add the title to the bottom you just have to set the title of the CollapsingToolbarLayout to the text you want.
You can set it in the xml with app:title="YOUR_TITLE" attribute or you can set it programmatically by calling the function setTitle("YOUR_TITLE") for your CollapsingToolbarLayout variable .
Here is what the full code could look like:
<?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"
tools:context=".BookDetailActivity">
<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/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:title="YOUR_TITLE"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<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.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:id="#+id/book_detail">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
</android.support.design.widget.CoordinatorLayout>
EDIT 2:
In your activity set your action bar by this :
setSupportActionBar(YOUR_TOOLBAR_VARIABLE) then you can use getSupportActionBar().setDisplayHomeAsUpEnabled(true)
Note that the toolbar should be the id of this one:
android.support.v7.widget.Toolbar so in our case the toolbar with the id toolbar
Use this layout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="192dp">
<android.support.design.widget.CollapsingToolbarLayout
android:elevation="4dp"
android:id="#+id/collapsing_toolbar"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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.support.design.widget.FloatingActionButton
style="#style/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
The use this class for action of FAB
public class FlexibleSpaceExampleActivity extends AppCompatActivity
implements AppBarLayout.OnOffsetChangedListener {
private static final int PERCENTAGE_TO_SHOW_IMAGE = 20;
private View mFab;
private int mMaxScrollSize;
private boolean mIsImageHidden;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flexible_space);
mFab = findViewById(R.id.flexible_example_fab);
Toolbar toolbar = (Toolbar) findViewById(R.id.flexible_example_toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
onBackPressed();
}
});
AppBarLayout appbar = (AppBarLayout) findViewById(R.id.flexible_example_appbar);
appbar.addOnOffsetChangedListener(this);
}
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (mMaxScrollSize == 0)
mMaxScrollSize = appBarLayout.getTotalScrollRange();
int currentScrollPercentage = (Math.abs(i)) * 100
/ mMaxScrollSize;
if (currentScrollPercentage >= PERCENTAGE_TO_SHOW_IMAGE) {
if (!mIsImageHidden) {
mIsImageHidden = true;
ViewCompat.animate(mFab).scaleY(0).scaleX(0).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
if (currentScrollPercentage < PERCENTAGE_TO_SHOW_IMAGE) {
if (mIsImageHidden) {
mIsImageHidden = false;
ViewCompat.animate(mFab).scaleY(1).scaleX(1).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
}
public static void start(Context c) {
c.startActivity(new Intent(c, FlexibleSpaceExampleActivity.class));
}
}
There are some Github Implementation to develope this view and many other
Collapsing Toolbar with Fab
I implemented Recycler view, when click on recyclerview it goes to next activity but when I came back I should be back with the same position which I was clicked, like I need to scroll to specific position based on the position of the item, I have the position but I couldn't able to scroll because of nested scrollview.
How can I fix this issue?
<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:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/theme_color"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title="#string/app_name"
app:titleEnabled="false">
<LinearLayout
android:id="#+id/ll_report_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical">
......
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/theme_color"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
.....
</RelativeLayout>
</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:background="#color/palegray"
android:scrollbars="none"
android:id="#+id/nested_scroll"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/palegray"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/card_header" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
In this recyclerview, I need to scroll to specific item based on the position how can I make it? I used:
recyclerview.smoothScrollToPosition(position);
But didn't worked, and I used this one also but this one also dint worked for me,
RecyclerView.SmoothScroller smoothScroller = new LinearSmoothScroller(RoleActivity.this) {
#Override protected int getVerticalSnapPreference() {
return LinearSmoothScroller.SNAP_TO_START;
}
};
smoothScroller.setTargetPosition(i);
mLayoutManager.startSmoothScroll(smoothScroller);
private int mPosition = RecyclerView.NO_POSITION;
mPosition is the certain position you want to scroll. Save this in onSaveInstanceState
#Override
public void onSaveInstanceState(Bundle outState) {
outState.putInt(SELECTED_KEY, mPosition);
}
in onCreate
if(savedInstanceState != null && savedInstanceState.containsKey(SELECTED_KEY))
{
mPosition = savedInstanceState.getInt(SELECTED_KEY);
}
Call mRecylerView.smoothScrollToPosition(mPosition) once the data to be passed to reccylerview is ready,that is after adapter.notifyDataSetChanged();
My app has an Activity with TabLayout, and 3 Fragments. In Activity's layout, I have CoordinatorLayout with ViewPager. I need to animate toolbar as well.
Now In Fragments layout, I need to put a fixed TextView at the bottom.
Given below is the XML of activity and fragment.
I am facing the problem that this fixed TextView in Fragment's
layout is going under the bottom navigation bar and is scrolling also,
that I don't want.
How can achieve this ?
activity.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:id="#+id/clMain"
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: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:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
fragment.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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:id="#+id/rlParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_weight="1"
android:fitsSystemWindows="true"
android:orientation="vertical">
</android.support.v4.widget.NestedScrollView>
<TextView
android:id="#+id/tvConfirmOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorDarkGreen"
android:gravity="center"
android:padding="10dp"
android:text="#string/confirm_order"
android:textColor="#color/colorWhite"
android:textSize="18sp"
android:textStyle="bold"></TextView>
</LinearLayout>
As you want this bottom fixed TextView for each fragment, it can be solved by transferring your TextView to activity.xml and adding a custom behavior to it.
So, firstly, create a class that represents custom behavior:
public class FixedBottomViewBehavior extends CoordinatorLayout.Behavior<View> {
public FixedBottomViewBehavior() {
}
public FixedBottomViewBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
//making our bottom view depends on ViewPager (or whatever that have appbar_scrolling_view_behavior behavior)
return dependency instanceof ViewPager;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
if (ViewCompat.isLaidOut(parent)) {
//attach our bottom view to the bottom of CoordinatorLayout
child.setY(parent.getBottom() - child.getHeight());
//set bottom padding to the dependency view to prevent bottom view from covering it
dependency.setPadding(dependency.getPaddingLeft(), dependency.getPaddingTop(),
dependency.getPaddingRight(), child.getHeight());
}
return false;
}
}
There is no magic here, we're just making our bottom view dependent on some view with appbar_scrolling_view_behavior (in our case it's ViewPager) and then attaching it to the bottom of CoordinatorLayout and setting some padding to dependency.
Secondly, change your activity.xml, by adding your TextView there:
<?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:id="#+id/clMain"
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/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:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<TextView
android:id="#+id/tvConfirmOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorDarkGreen"
android:gravity="center"
android:padding="10dp"
android:text="#string/confirm_order"
android:textColor="#color/colorWhite"
android:textSize="18sp"
android:textStyle="bold"
app:layout_behavior="your.package.name.FixedBottomViewBehavior" />
</android.support.design.widget.CoordinatorLayout>
Make sure you've removed your TextView from fragment.xml. Don't forget also to change your.package.name.FixedBottomViewBehavior to your package name exactly.
Voila! That should work like a charm with proper toolbar animation and fixed view at the bottom.
In addition: if you don't know how to pass your OnClick event to your fragments you can follow this way in your Activity:
public interface OnConfirmOrderClickListener {
void onConfirmOrderClick(View v);
}
public Fragment getActiveFragment() {
String name = makeFragmentName(pager.getId(), pager.getCurrentItem());
return getSupportFragmentManager().findFragmentByTag(name);
}
public String makeFragmentName(int viewId, int index) {
return "android:switcher:" + viewId + ":" + index;
}
tvConfirmOrder.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Fragment current = getActiveFragment();
if (current instanceof OnConfirmOrderClickListener)
((OnConfirmOrderClickListener) current).onConfirmOrderClick(v);
}
});
Don't forget to make your fragments implements OnConfirmOrderClickListener. Hope that helps!
For those who want the button to appear only in one fragment, it's possible to use onPageChangeListener of ViewPager to make the button scroll with the ViewPager
viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
updateButtonPosition(position, positionOffsetPixels);
}
});
//Move the button according to the tab you want it to be fixed.
//Here is the 3rd tab of a 3 tab viewPager, for instance
private void updateButtonPosition(int position, int positionOffsetPixels) {
int fixedRewardXPos;
if (position == 0) {
fixedRewardXPos = viewPager.getWidth() * 2 - positionOffsetPixels;
} else if (position == 1) {
fixedRewardXPos = viewPager.getWidth() - positionOffsetPixels;
} else {
fixedRewardXPos = -positionOffsetPixels;
}
//Add getLeft() to keep the button to its former position in it's fragment
aButton.setX(fixedRewardXPos + aButton.getLeft());
}
in my app I am using a viewpager with 3 fragments. In two of those I have recuclerviews. I took advatngage of the new Coordinator layout and made my toolbar hides/shows when scrolling on a recyclerview. My problem is the following Say the user is scrolling on a recyclerview list in fragment A and thus the toolbar is hidden. After that, the user performs a swipe and goes to fragment B which does not have a recycle view to scroll so the toolbar can appear again. Is there a way I can alter the layout_behaviout so that when the user swipes on the view pager the toolbar to be shown?
NOTE: IF it is possible, I want to achieve that only using XML.
This is my main_layput xml 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:fab="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="com.studentsins.lust.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"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/NavigationTab"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<include layout="#layout/content_main"/>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="#+id/floatingActionMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
fab:fab_addButtonColorNormal="#color/blood_orange"
fab:fab_addButtonColorPressed="#color/dirtyWhite"
fab:fab_addButtonPlusIconColor="#color/dirtyWhite"
fab:fab_addButtonSize = "normal"
fab:fab_labelStyle="#style/menu_labels_style"
fab:fab_labelsPosition="left"
app:layout_anchor="#id/viewpager"
app:layout_anchorGravity="bottom|end">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/createPlanBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_title="Create a plan"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_event_white_48dp"
fab:fab_colorPressed="#color/dirtyWhite"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/changeStatusBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_textsms_white_48dp"
fab:fab_title="Change status"
fab:fab_colorPressed="#color/dirtyWhite"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>
You should be able to do this using the ViewPager.OnPageChangedListener and based on the page u are on which u can get from the onPageSelected(int position) method that is part of the listener. Hope this is what u are looking for.
I was able to achieve this by referencing the AppBarLayout and calling the "setExtended" method like that:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//Make sure that the fab is visible when scrolling the pages...
MainActivity.mFloatingActionsMenu.animate()
.setDuration(150)
.translationY(0);
//show the toolbar
expandToolbar();
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
my expandToolbar method:
public void expandToolbar(){
//setExpanded(boolean expanded, boolean animate)
AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.appBarLayouy);
appBarLayout.setExpanded(true, true);
}
I'm trying to get a Floating Action Button from the Android Design Support Library inside a Fragment which is inside a ViewPager. I've 4 tabs and I want the FAB in only one of the Tabs. My layout are as follows:
main_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: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="wrap_content"
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"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorHeight="3dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
list_fragment_with_fab.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="5dip"
android:background="#color/Transparent_White"
android:fitsSystemWindows="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<org.lucasr.twowayview.widget.TwoWayView
android:id="#+id/clip_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:twowayview_layoutManager="ListLayoutManager" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_list_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_list_add"
app:layout_anchor="#+id/clip_recycler_view"
app:layout_anchorGravity="bottom|right|end" />
Now the problem is, the FAB does not work as per the design specs. i.e the hiding and showing of the fab doesn't work. Also, the FAB is not at it's initial place when the fragment is activated. I've attached screenshots below to make it more clear.
The in the left image, as you can see, the FAB is off the screen. When I scroll, the Toolbar will hide (think Play Store App) and the tabs remain, that time the FAB will scroll up.
Is this a bug in the Design Support library? Or is my layout incorrect? Also, I want the FAB in only one of the fragments, so adding in the main_layout.xml kinda defeats that purpose.
It's not strictly a bug, but just the way they've implemented it.
It's because of this:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
This behavior doesn't manipulate the size of the ViewPager, it just pushes it off the bottom of the screen when the AppBarLayout is expanded.
Your fragment is filling the entire size of the ViewPager and so correctly aligns the FAB to the bottom right of the ViewPager container; but because the ViewPager container is offset, the bottom right is offscreen.
The "proper" way of using a FloatingActionButton in this context is by having the activity show it - like this:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="bubblebearapps.co.uk.nfcapi.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
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.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
You then change the FloatingActionButton's size, icon and onClickBehaviour based on what page is shown in the ViewPager using the OnPageChangeListener interface.
To make the FloatingActionButton scroll off the bottom when you're scolling the RecyclerView, you must create a Behaviour! This is one I used in a different project:
public class ScrollOffBottomBehaviour extends CoordinatorLayout.Behavior<View> {
private int mViewHeight;
private ObjectAnimator mAnimator;
public ScrollOffBottomBehaviour(Context context, AttributeSet attrs) {
super();
}
#Override
public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
mViewHeight = child.getHeight();
return super.onLayoutChild(parent, child, layoutDirection);
}
#Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child,
View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
if(mAnimator == null || !mAnimator.isRunning()){
int totalScroll = (dyConsumed + dyUnconsumed);
int targetTranslation = totalScroll > 0 ? mViewHeight : 0;
mAnimator = ObjectAnimator.ofFloat(child, "translationY", targetTranslation);
mAnimator.start();
}
}
#Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
}
Set this onto your FloatingActionButton with app:layout_behaviour and all should be well...