Im using the following layout. I want the recyclerview to appear below toolbar.
and I have also included the floating action button.
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:background="#drawable/bg"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<include
android:layout_below="#+id/appbarLayout"
layout="#layout/fragment_folder_content"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/folder_play_all_fab"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_play_arrow_white_48dp"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="9dp"
app:rippleColor="#888888"
app:layout_anchor="#+id/appbarLayout"
app:layout_anchorGravity="bottom|center"
/>
</android.support.design.widget.CoordinatorLayout>
The problem is that the recycler view in include tag is overlapping with toolbar.
How can I be able to prevent this from overlapping?
Related
I have a coordinator layout with a FrameLayout in it.
I set app:layout_behavior="#string/appbar_scrolling_view_behavior" for this framelayout.
but i want to have a button in this fragment that is fixed and i don't want that this button have scroll .
how should i do this??
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
tools:openDrawer="end">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- AppBarLayout is a wrapper for a Toolbar in order to apply scrolling effects. -->
<!-- Note that AppBarLayout expects to be the first child nested within a CoordinatorLayout -->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:elevation="0dp">
<!-- Toolbar is the actual app bar with text and the action items -->
<include
android:id="#+id/action_bar"
layout="#layout/custom_action_bar" />
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/but_nav_bar"
android:layout_marginTop="-25dp"
android:layout_marginBottom="#dimen/_30sdp"
android:paddingBottom="#dimen/_30sdp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<include layout="#layout/bottom_navigation_layout" />
<include layout="#layout/navigation_bar" />
</androidx.drawerlayout.widget.DrawerLayout>
and this is code of myFragment
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/shopsList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="40dp"
text="button"/>
</RelativeLayout>
You have not mentioned where you want a button to be fixed.
Adding android:layout_alignParentBottom="true" will fixed the button at the bottom of the screen.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:text="button" />
Trying to build layout in which the activity has Coordinator layout and Appbar layout. The appbar layout has tab layout, which is connected to a view pager. In the view pager, the first fragment has another coordinator layout and an appbar layout. When the scroll happens in appbar layout, I want the Activity's appbar layout also to scroll.
Activity's 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:id="#+id/coord"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|snap|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/material_flat"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarWithNavigationBack"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/tab_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/white"
android:clipToPadding="true"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="10dp"
app:layout_scrollFlags="scroll|enterAlways|snap">
<android.support.design.widget.TabLayout
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#BDBDBD"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
The fragment's xml
<?xml version="1.0" encoding="utf-8"?>
<NestedCoordinatorLayout
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="#android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:theme="#style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:id="#+id/home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e3e6e8"
android:gravity="center"
android:orientation="vertical"
android:padding="20dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|snap">
<android.support.v7.widget.CardView
card_view:cardCornerRadius="4dp"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="24dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/shade_gradient" />
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/simple.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</NestedCoordinatorLayout>
When the appbar scrolls in the fragment, I want the activity's appbar to scroll also.
I have used the NestedCoordinatorLayout as suggested in CoordinatorLayout inside another CoordinatorLayout
Please let me know how to achieve that
Thanks!
I have an activity with a FrameLayout in which i add or replace several fragments. That activity uses CollapsingToolbarLayout.
In the first scenario I add a fragment with a NestedScrollView, a LinearLayout, a CardView and TextViews. Everything works fine, the scrolling and collapse / expand of toolbar.
In the second scenario, i add a fragment to the FrameLayout with SwipeRefreshLayout and a RecyclerView but the problem is when i scroll up the toolbar does not collapse.
In this video you can see the problem: LINK
The activity layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="340dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
................
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/printerModels"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
style="#style/FabStyle"/>
First scenario fragment layout:
<android:android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:paddingTop="24dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dip"
android:layout_margin="15dp"
android:layout_marginBottom="50dp"
app:cardCornerRadius="3dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="#dimen/model_detail_card_view_margin">
..........
..........
//Several textviews here
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android:android.support.v4.widget.NestedScrollView>
Second scenario layout:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/contentView"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_users"
android:scrollbars="vertical"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<include
layout="#layout/view_progress"
/>
<include
layout="#layout/view_retry"
/>
<!--</LinearLayout>-->
</android.support.v4.widget.SwipeRefreshLayout>
Disable nested scrolling for RecyclerView in your xml
android:nestedScrollingEnabled="false"
Your coordinate layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="340dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
................
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
//This <include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/printerModels"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
style="#style/FabStyle"/>
content_main.xml
<android:android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</FrameLayout>
</android:android.support.v4.widget.NestedScrollView>
is there a way to put an AppBarLayout inside a ViewPager and get the scrolling behavior working? Background is that I want a header on the first fragment which scrolls out of the screen when the user scrolls down. All other fragments in the ViewPager have no header. My efforts are not successful so far, because the header doesn't scroll. Outside the ViewPager the scrolling workings fine.
I appreciate your help.
Activity layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
<include layout="#layout/toolbar_shadow"/>
</LinearLayout>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>
Fragment layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/space_between_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<!-- HEADER -->
<RelativeLayout
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<include layout="#layout/journal_header" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/button_menu"
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"
app:layout_behavior="de.malnvenshorn.slimly.ui.component.ScrollingBehaviorFAB">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/button_add_food"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_restaurant_menu_white_24dp"
fab:fab_size="mini"/>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/button_add_activity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_directions_bike_white_24dp"
fab:fab_size="mini"/>
</com.github.clans.fab.FloatingActionMenu>
</android.support.design.widget.CoordinatorLayout>
From Android Document AppBarLayout
https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.
Try placing your AppBarlLayout in a CoordinatorLayout .
I have implemented a view pager within a Coordinator layout that contains a ListFragment. The view pager is working fine but the list does not scroll,
can anyone help? Do I have to implement something to recognise the direction of the touch and then disable touch events?
Coordinator Layout:
<?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">
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
android:layout_height="wrap_content" android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<LinearLayout
android:orientation="vertical"
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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<com.passwordstore.utility.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#android:color/white"
android:foreground="#drawable/shadow"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" android:id="#+id/frameLayout">
<include layout="#layout/activity_password_list" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton android:id="#+id/fabNew"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin" android:src="#drawable/ic_add_white_24dp"
app:layout_anchor="#+id/frameLayout"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Fragment - activity_password_list:
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/item_list"
android:name="com.passwordstore.fragment.PasswordListFragment" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_marginLeft="16dp"
android:layout_marginRight="16dp" tools:context=".PasswordListActivity"
tools:layout="#android:layout/list_content" />
I had the same result with the same issue, i just had to used these custom layouts, you may want to take a look:
https://github.com/TheLittleNaruto/SupportDesignExample/tree/master/app/src/main/java/com/thelittlenaruto/supportdesignexample/customview