Collapse layout in a fragment under toolbar - android

The following is my layout in a Fragment.
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragments.TAClaimFragment"
android:background="#drawable/main_gradient"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_anchor="#id/parent"
app:layout_anchorGravity="top">
<android.support.v7.widget.SearchView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="?actionBarSize"
android:layoutDirection="rtl"
android:id="#+id/ta_search"
android:animateLayoutChanges="true"
app:searchIcon="#drawable/ic_search"
app:closeIcon="#drawable/ic_close"
android:tooltipText="tooltip"
app:searchHintIcon="#drawable/ic_search"
app:queryHint="#string/search_hint"
/>
<ImageView
android:layout_width="0dp"
android:id="#+id/ta_menu"
android:padding="16dp"
android:layout_weight="0.3"
android:layout_height="50dp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/ta_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
The RecyclerView has a SearchView and an ImageView above it in a linear layout I want the linear layout to disappear under the toolbar which the Activity containing the fragment has. I am not familiar enough with coordinator layout or collapsing toolbar layout, however I guess the solution lies in the use of the two.
How do I go about it?

I want the linear layout to disappear under the toolbar which the
Activity containing the fragment has.
If you are showing the Fragment by a FrameLayout (Or whatever), show the Fragment like following layout: (FrameLayout inside NestedScrollView for being the layout scrollable)
<CoordinatorLayout>
<AppBarLayout>
<Toolbar/>
</AppBarLayout>
<NestedScrollView>
<FrameLayout />
</NestedScrollView>
</CoordinatorLayout>
And then your Fragment codes (like your current layout codes) in another layout called myfragmentlayout.xml.
So, here, if you are trying to hide the LinearLayout, it will be disappear when you scroll the RecyclerView. Or, you can create a CollpasingToolbarLayout which contains a picture then if you scroll the content, it will be disappear.
Example for CollapsingToolbarLayout with an ImageView inside. (And so much more on SO by CollapsingToolbarLayout tag!):
How to add an ImageView with the title in collapsingtoolbarlayout in Android

Related

How to make linear layouts scrollable inside an coordinator layout?

I don't want to use recycler view here.
Because here is 3-4 Linear Layouts with static data.
I am using coordinator layout here, how can I make scrollable linear layouts inside it.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:background="#color/colorDark"
android:fitsSystemWindows="true"
tools:context=".EarnActivity">
<include layout="#layout/appbar"></include>
<- Here I want to insert linear layouts,
But how can I make this coordinator layout scrollable.
All things inside it should Scroll -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav3"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#android:color/transparent"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:itemIconTint="#color/item_selector"
app:itemTextColor="#color/item_selector"
app:menu="#menu/nav_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Why does my RecyclerView not scroll when placed inside an AppBarLayout?

I have an AppBarLayout in my app along with a FrameLayout that I use as a placeholder to load in fragments:
<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"/>
<FrameLayout android:id="#+id/main_content_fragment"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/white" />
</android.support.design.widget.AppBarLayout>
The fragment in question looks like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar android:id="#+id/loading_downloaded"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id = "#+id/items_downloaded"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
/>
</LinearLayout>
The Fragment is substituted in from code as you might anticipate:
val fragMan: FragmentManager = getSupportFragmentManager()
fragMan.beginTransaction().add(R.id.main_content_fragment, fragment).commit()
The problem is that I cannot scroll my RecyclerView when I format it this way. If I move the FrameLayout outside of the AppBarLayout it works perfectly but then the fragment lies behind the app bar, which is very untidy. This confirms for me that the fragment is working correctly, I just can't figure out why the fragment's scroll behaviour changes when it's within the AppBarLayout.
What do I need to do to be able to scroll my content? Or have I misunderstood and I need to display my fragments outside the AppBarLayout where they scroll correctly and shift everything down by the height of the app bar?
Your fragment's content is meant to be placed as a sibling of the AppBarLayout. You should wrap everything inside a CoordinatorLayout and set this attribute in your FrameLayout where your fragment resides: app:layout_behavior="#string/appbar_scrolling_view_behavior".
Here's your XML structure would be:
<CoordinatorLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior" ... >
...
</FrameLayout>
<AppBarLayout> ... </AppBarLayout>
</CoordinatorLayout>
Having this setup would allow your fragment to show all of it's views with your AppBarLayout. CoordinatorLayout will take care of everything for you.
Here's the official documentation:
AppBarLayout also requires a separate scrolling sibling in order to
know when to scroll. The binding is done through the
AppBarLayout.ScrollingViewBehavior behavior class, meaning that you
should set your scrolling view's behavior to be an instance of
AppBarLayout.ScrollingViewBehavior. A string resource containing the
full class name is available.
See this link for more details: https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

Where to put floating action button when there are multiple fragments

I'm trying to create a layout with a MainActivity which incorporates a BottomNavigationBar and a FrameLayout for swapping out fragments. I want the BottomNavigationBar to stay fixed with every fragment having a fab which on the other hand disappears when scrolling. The problem is that I'm not sure which layout to use for the MainActivity and the Fragments and where to put the fab, I could put the fab either in the MainActivity's layout and change the behaviour of the fab for each fragments (don't know how though) or add a fab to every fragment's layout. When I do the latter I cannot reference the MainActivity's bottom bar to stay over it.
I tried #1:
MainActivity:
<CoordinatorLayout>
<FrameLayout/>
<BottomNav/>
<FAB/>
</CoordinatorLayout>
And #2:
<CoordinatorLayout>
<FrameLayout/> -> fabs defined in each fragment layout
<BottomNav/>
</CoordinatorLayout>
My Main activites xml file looks somewhat like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom_navigation"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_navigation"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And one of my fragments with FAB:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".View.MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="#layout/note_item"
android:layout_gravity="top" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/button_add_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="64dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_add"
app:layout_anchor="#id/recycler_view"
app:layout_anchorGravity="bottom|right|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I want the bottom nav and coordinator layout to be aware of the fab and the fab to be above the bottom nav without using hard-coded dp values but how do I do that?
If you want to use CoordinatorLayout.Behavior logic, your fab should at the same level with CoorditorLayout.
For you i recommend this logic: Activity contains BottomNavigation, FrameLayout (fragment container). Then all your fragment contains:
<CoordinatorLayout>
<RecyclerView/>
<FloatingButton/>
</CoordinatorLayout>
It will give a power to construct UI of fragment exactly how you want.

Android bottom toolbar disappears when fragment fills screen

I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks
Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".

Scroll second child in AppBarLayout

I'm trying to obtain this effect where if the user scroll a RecyclerView a certain layout scroll up together with the recycler and disappear behind a Toolbar.
A similar behavior could be obtained using the CoordinatorLayout, this would be possible by setting
app:layout_behavior="#string/appbar_scrolling_view_behavior"
on the said Recycler, and doing
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
Also, If I put a second child inside the AppBarLayout, and set app:layout_scrollFlags to it, the effect obtained is the same, with both layout scrolling together with the Recycler.
What I'm trying to achieve is to keep the first child (The toolbar) fixed in position, and let the second child (a LinearLayout) to scroll and hide behind the toolbar. Unfortunately I couldn't get to this behavior.
Is it possible without using 3rd part library?
Thanks in advance and sorry for my english.
Finally I figured out a way to achieve this behavior, by including the CoordinatorLayout in an LinearLayout and making the second child(LinearLayout) become the first, by moving the Toolbar to the extrnal(root) level
Hierarchy before:
<CoordinatorLayout>
<AppBarLayout>
<ToolBar>
<LinerarLayout>
Hierarchy after:
<LinearLayout>
<ToolBar>
<CoordinatorLayout>
<AppBarLayout>
<LinearLayout>
An exmaple:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="48dp" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorSecondaryLight"
android:orientation="vertical"
app:layout_scrollFlags="scroll"/>
</com.google.android.material.appbar.AppBarLayout>
.
.
.
.
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
Hope that helps!

Categories

Resources