I'm working with RecyclerView and FloatingActionButton (FAB) in CoordinatorLayout. Before jumping into details, this is what I'm trying to achieve.
This layout has a list of items using RecyclerView and there is an FAB at the bottom. You can also see a text called 'Save' which is invisible at the start. Once RecyclerView has some items, it will be displayed. Everything works as intended. However, when the text 'Save' is shown, it is not pushing FAB upwards.
Here's the layout.
<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:id="#+id/layout_main_container">
<FrameLayout
android:id="#+id/layout_custom_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:textColor="#android:color/darker_gray"
android:layout_gravity="center" />
<com.custom.CustomRecycler
android:id="#+id/custom_recycler"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_gravity="center"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_vertical_margin"
android:clickable="true"
app:srcCompat="#drawable/icon_add"
android:id="#+id/add"
android:layout_gravity="bottom|right"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_anchor="#id/list_custom_recycler"
app:layout_anchorGravity="bottom|right|end"
/>
<TextView
android:id="#+id/save"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:layout_gravity="bottom|end"
android:text="Save"
android:textColor="#android:color/white"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:visibility="visible"
/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
What is it differently I'm doing which prevents FAB from being pushed upward when the text is shown?
Do I need a nested scroll view? Any thoughts?
Related
I am trying to fix this issue where my recyclerview is overlapped by bottomappbar. Here is my layout code .
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/notes_container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:padding="8dp"
android:text="#string/myTasksHeader"
android:textColor="#color/appBarTextColor"
android:textSize="40dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:padding="16dp"
android:scrollbars="none"
tools:listitem="#layout/note_list_item" />
</ScrollView>
</LinearLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/colorPrimary"
app:hideOnScroll="false"
app:menu="#menu/appbar_menu"
app:navigationIcon="#drawable/ic_menu" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/add_note_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/medium_margin"
android:backgroundTint="#color/colorPrimary"
app:layout_anchor="#id/bottomAppBar"
app:srcCompat="#drawable/ic_add_black_24dp"
tools:ignore="VectorDrawableCompat" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
when I fill my list I cant reach my last item in the recycler view. I tried adding margin but it did not work.
Two ways to achieve this
Hide BottomAppBar layout while scrolling ..
Add following attribute inside BottomAppBar
app:fabAlignmentMode="center"
app:fabCradleMargin="10dp"
app:fabCradleRoundedCornerRadius="10dp"
app:hideOnScroll="true"
If you do not want to hide BottomAppBar then add margin from bottom
in RecyclerView
android:layout_marginBottom="?actionBarSize"
The problem with using margin is that the RecyclerView won't show through the FAB. A better solution than using margin would be to add extra space at the bottom of the RecyclerView using padding.
android:clipToPadding="false"
android:paddingBottom="?actionBarSize"
I am using CollapsingToolbarLayout in my Fragment. It contains A RelativeLayout consisting of a ViewPager and an EditText aligned in top of ViewPager. When the user scrolls down the toolbar collapses. What i want is when it collapses I want to make only the ViewPager collapse but Edit Text remain un collapsed.
This is my XML file:
<?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/main_content"
android:orientation="vertical"
android:layout_marginBottom="10dp"
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:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_gravity="top"
android:scaleType="centerCrop"
android:background="#drawable/loading_image"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/user"
android:text=""
android:gravity="center"
android:layout_centerInParent="true"
android:textSize="16sp"
android:textColor="#ff0000"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_below="#+id/user"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search here"
android:padding="10dp"
android:id="#+id/srch"
android:textColor="#000"
android:maxLines="1"
android:background="#drawable/search_border_grey"/>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/search_24"
android:layout_centerVertical="true"
android:background="#fff"
android:layout_margin="5dp"
android:text="Button"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/collapsing_toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:id="#+id/root_layout"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/customgrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:paddingBottom="10dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:verticalSpacing="3dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I have tried adding a new layout below AppBarLayout and making it visible on collapsing of Toolbar, but its having a bad user experience since it causes the ui flicker. Is there solution for my requirement. All your responses are appreciated.
When the user scrolls down the toolbar collapses. What i want is when
it collapses I want to make only the ViewPager collapse but Edit Text
remain un collapsed.
You have added "scroll|exitUntilCollapsed" in the CollapsingToolbarLayout which means, it will close-exit the view when it collapsed.
In order to make EditText (Search) stay in there, I'd suggest adding the EditText inside the CoordinatorLayout as it's child then, anchoring it to the AppBarLayout. Just like when we anchor a Fab inside CoordinatorLayout.
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center" // change it for your own porpuse
The other way I'd suggest (Not tested), would be adding :
app:layout_collapseMode="pin"
To your View (EditText or Container of that) or, changing the flags to:
app:layout_scrollFlags="scroll|snap"
In the CollapsingToolbarLayout.
It can however be done by handling AppBarLayout behavior to detect when it is collapsed or expended:
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
{
if (offset == 0)
{
// Fully expanded
// make your view visible or not collapsible here maybe?
}
else
{
// Not fully expanded or collapsed
}
}
Check: How can i determine that CollapsingToolbar is collapsed?
Problem 1:
I have made my toolbar transparent but There is some sort of overlay effect which I don't want. How can I remove that effect? I have marked that place(1) in a sample image.
code for ToolBar:
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
ToolBarLayOut:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:background="#color/transparent"
android:minHeight="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/location_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_location"
/>
<TextView
android:layout_toRightOf="#id/location_ic"
android:id="#+id/toolbar_title"
android:padding="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/custom_font"
android:text="서울 서초구 강남역 주변"
android:textColor="#color/colorWhite" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_arrow_drop_down"
android:layout_toRightOf="#id/toolbar_title"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Problem 2: I am using a scroll view with a child list view in my app. but the problem is when I am taping any white space(marked 2) o list item parent scroll is not working but when taping on images then the parent scroll works (Marked 3). only the child list view scroll is working which I don't want I want the parent scroll to work here.
AppBarLayout has StateListAnimator by default try setting it to null using below code
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
android:stateListAnimator="#null"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
When I switch from any fragment back to Shopping List with the bottom app bar, it gets pushed down off the screen and I don't know why. Switching between the Fridge Fragment and Pantry Fragment works great, but switching from either of those back to the Shopping List Fragment pushes the bar off the screen, as shown here:
Github repository with full code
Try with these changes for FrameLayout and I guess you won't need fragment_navigation.xml after that.
activity_main.xml:
<androidx.coordinatorlayout.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">
<FrameLayout
android:id="#+id/relative_layout_for_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:backgroundTint="#color/colorPrimary"
app:hideOnScroll="true"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/ic_menu_white_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_shopping_cart_white_24dp"
app:fabSize="normal"
app:layout_anchor="#id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You also said that it happens when you switch to ShoppingListFragment which has another CoordinatorLayout in there.
You simply change fragment_shopping_list.xml codes as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/shopping_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="141dp"
android:text="TextView" />
</RelativeLayout>
Or just don't use CoordinatorLayout in there then try.
I have Activity with bottom navigation bar (via roughike BottomBar library). It's look like this:
When i'm trying to scroll page, bottom bar hides automatically. So, I get this:
I want avoid this effect. I do not want hide bottom bar when I'm just trying to scroll content but all content lies on screen.
But if page contains content more than one screen then bottom bar must hides on scroll (and now it's works fine).
My code doesn't have any listeners for scroll and my xml file looks like this:
<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"
tools:context=".presentation.ui.mainactivity.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainCord" >
<android.support.design.widget.AppBarLayout
android:id="#+id/sliderContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="#color/primary"
android:theme="#style/ToolbarStyle"
app:titleTextAppearance="#style/ToolbarStyle" />
</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:visibility="gone" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
</android.support.design.widget.CoordinatorLayout>
I'm looked for solution for my problem but found nothing. What can i do for avoid this effect?
UPDATED:
FAB is inside ViewPager. Layout for tab on screenshot look 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"
android:id="#+id/eventCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.RecyclerView
android:id="#+id/eventsRecyclerView"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity = "center"
android:gravity="center" >
<TextView
android:id="#+id/emptyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:gravity="center"
android:text="#string/empty_events_text"
android:drawableTop="#drawable/ic_no_calendar"
android:drawablePadding="4dp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_event_text"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primary"
android:text="#string/create_event"
android:textSize="16sp"
android:visibility="gone" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/createEvent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_add_white_24dp"
style="#style/floating_action_button"
app:layout_anchor="#id/eventsRecyclerView"
app:layout_anchorGravity="bottom|end"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
<RelativeLayout
android:id="#+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
app:bb_behavior="underNavbar"
You have an issue in the following code
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
replace the
app:bb_behavior="shy|shifting"
with
app:bb_behavior="underNavbar"
Hope this works for you!
Check your manifest FILE and make sure you're not using full screen theme...However, you can use the following code to hide and show the bar on android higher than API 19. To hide the bar, just change VISIBLE to GONE, and make sure you call the showNavBar() method in both your onCreate() and onResume() method
public void showNavBar() {
View view = getWindow().getDecorView();
view.setSystemUiVisibility(View.VISIBLE);
}
I had the same issue, I fixed it by doing this:
In activity_main.xml add this to the CoordinatorLayout:
android:fitsSystemWindows="true"
The viewpager should be like this:
<android.support.v4.view.ViewPager
android:background="#color/colorPrimary"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
And in all your Fragments, they should start with NestedScrollView and must contain (fillViewport):
<android.support.v4.widget.NestedScrollView 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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context="com.khan.junaid.phonefans.MainActivity">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fans_list_view"
/>
</android.support.v4.widget.NestedScrollView>
These settings will make the fragments scrollable, and the content will no more be hiding behind the Navigation bar buttons.