How to wrap Coordinator Layout in a LinearLayout? - android

I´m attempting to use the new Android Design Library´s CoordinatorLayout inside of another layout. The CoordinatorLayout contains a RecyclerView. What I´m attempting to do is to place a simple LinearLayout below the CoordinatorLayout. This layout should be placed below the CoordinatorLayout. This is XML I´m using:
<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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="fill_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/conversation_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal">
<EditText
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_send_white_36dp" />
</LinearLayout>
</LinearLayout>
As you can see, I´m attempting to wrap the CoordinatorLayout inside another LinearLayout. However, on-screen the second part of the layout doesn´t even render.

That is because the CoordinatorLayout has layout_height="match_parent". That means it takes the whole size of the screen and your LinearLayout is rendered but it is below the CoordinatorLayout and off-screen.
An easy way to fix this would be setting the weight of the CoordinatorLayout to fill the parent layout but leave space necesseary to display the footer LinearLayout. This would be
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
But this is not ideal way so I would suggest leaving the CoordinatorLayout as the root element and place your LinearLayout just bellow the RecyclerView where it belongs. Since your footer LinearLayout has fixed height this can be done easily
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:paddingBottom="150dp" />
<LinearLayout
android:layout_height="150dp"
android:layout_gravity="bottom">
<EditText />
<ImageButton />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Related

RecyclerView inside NestedScrollView inside CoordinatorLayout

I have such 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_margin="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/avatar_placeholder"
/>
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginLeft="20dp"
android:id="#+id/list"
android:orientation="horizontal"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
As you can see there are CoordinatorLayout with NestedScrollView inside it. And inside of the NestedScrollView there are horizontal RecyclerView. So this layout behaves as follows:
As one can see, problem is in RecyclerView. When I drag it up, Toolbar doesn't hide. In the same time when I dragging up the ImageView Toolbar hides. How to fix that?
did you enable nested scrolling on your recycler ?
recylcer.nestedScrollingEnabled(true)
I had a pretty similar problem, but my recycler was vertical, you can refer to my answer here : Here

layout_anchor between toolbar and layout

I want a view to be anchored between AppBarLayout and layout. I get this behavior only on Android Studio editor, but on real device is different like so:
I am really confused. My code is:
<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"
tools:context="view.activity.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/bar_layout"
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" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="84dp"
android:layout_marginTop="#dimen/activity_vertical_margin">
<!--views on toolbar-->
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_home_content" />
<RelativeLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:background="#drawable/circle_accent"
app:layout_anchor="#+id/whole_layout"
app:layout_anchorGravity="top|start">
<!--img view-->
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
and 'activity_home_content'
<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:id="#+id/whole_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="view.activity.MainActivity"
tools:showIn="#layout/activity_home_toolbar">
<!--some other views-->
</LinearLayout>
Just tried it. As I mentioned in the comments, your whole_layout is a LinearLayout with elevation 0dp. Any element you anchor to this LinearLayout will receive an elevation of 0dp (same as the view you are anchoring to) by default. This means that the RelativeLayout will have an elevation of 0dp.
The AppBarLayout has an elevation of 4dp, so by default the RelativeLayout will always be drawn below it.
The Fix
Give an elevation to the relative layout that is greater than or equal to 4. This will fix your problem, except that the RelativeLayout will now cast a shadow too.
Here is the code for the RelativeLayout
<RelativeLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:background="#drawable/circle_accent"
app:layout_anchor="#+id/whole_layout"
app:layout_anchorGravity="top|start"
android:elevation="4dp">
<!--img view-->
</RelativeLayout>

Place view below AppBarLayout without appbar_scrolling_view_behavior

I am using a CoordinatorLayout that contains an AppBarLayout and a FrameLayout that will hold different fragments at runtime. I need the FrameLayout to always be below the AppBarLayout without using the appbar_scrolling_view_behavior attribute. For reasons (namely trying to get a RecyclerView and a floating footer button to work on the Fragments) I am applying this attribute on the RecylerView in the Fragment. Scrolling works fine except the FrameLayout thinks it should have the full height of the screen. This is usually fixed by the appbar_scrolling_view_behavior, but I cannot use that here. I tried layout_anchor and layout_anchorGravity to literally no effect.
Any ideas?
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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/AppTheme.Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/NavigationTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<!-- Fragments go here; they will set appbar_scrolling_view_behavior themselves -->
<!-- layout_anchor and layout_anchorGravity don't work -->
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|left|right"/>
</android.support.design.widget.CoordinatorLayout>
Layout of one of the fragments:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingEnd="15dp"
android:paddingStart="15dp">
<!-- Bottom padding is so the last row isn't fully covered by the button -->
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="55dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<Button
android:id="#+id/add_photo_button"
style="#style/ProductActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="15dp"
android:drawableStart="#drawable/white_camera"
android:text="#string/product_photo_add"/>
</FrameLayout>

implementing a custom behavior on recyclerview inside coordinatorlayout

I have 3 views in my layout file with CoordinatorLayout as the root view : AppbarLayout, RecyclerView and a Footer(not visible all the time). Recyclerview implements the default behavior appbar_scrolling_view_behavior, that ideally, brings recyclerview below the appbarlayout. But the recyclerview and footer overlap. To Prevent that, I had to write a custom behavior so that when footer is visible, Recyclerview should make space for the footer. But now, the default behavior of appbar_scrolling_view_behavior is gone and now appbarlayout and recyclerview overlap.Here is the Image of the layout
Link to the custom behavior i implemented:
https://github.com/Mandeep221/CustomBehaviorForRecyclerview/blob/master/CustomBehavior.java
My Question: How can i implement 2 things(simultaneously in one behavior):
get the recyclerview below the appbarlayout inside the co-ordinatorlayout
get the recycelerview to make space for the footer if the footer is visible.
If you can suggest some workaround, that would also be great! Thanks alot!
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:scrollbars="vertical"
app:layout_behavior="prokure.it.prokure.Search.NewSearch.CustomBehavior" />
<prokure.it.prokure.FooterBarLayout
android:id="#+id/footerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//footer child views
</LinearLayout>
</prokure.it.prokure.FooterBarLayout>
</android.support.design.widget.CoordinatorLayout>
Don't keep the android.support.design.widget.CoordinatorLayout as root layout.
Add a RelativeLayout as a root layout. Then add android.support.design.widget.CoordinatorLayout with property layout_alignParentTop and layout_above="#+id/footerBar" and set prokure.it.prokure.FooterBarLayout as align parent bottom as second child of RelativeLayout.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/footerBar">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:scrollbars="vertical"
/>
</android.support.design.widget.CoordinatorLayout>
<prokure.it.prokure.FooterBarLayout
android:id="#+id/footerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//footer child views
</LinearLayout>
</prokure.it.prokure.FooterBarLayout>
</RelativeLayout>
Another simpler way is to add following lines to your prokure.it.prokure.FooterBarLayout
app:layout_anchor="#id/list_recycler_view"
app:layout_anchorGravity="bottom"
and keep prokure.it.prokure.FooterBarLayout inside coordinator layout.
Make sure to add an empty cell at the end of the recycler view so that prokure.it.prokure.FooterBarLayout does not overlap with last cell of RecyclerView.

ViewPager with Coordinator Layout

I have an activity layout that looks like the following:
<android.support.design.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">
<android.support.design.widget.AppBarLayout
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"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
The viewpager has two fragments, one with a RecyclerView and one with a LinearLayout.
The fragment with RecyclerView works as expected and the action bar scrolls off screen when the RecyclerView is scrolled.
The other fragment with the LinearLayout isn't displaying as I would like it to however. The LinearLayout is drawn below the TabLayout and extends offscreen. I would like it to be resize to fill the space available below the TabLayout without extending offscreen. The LinearLayout looks like this:
<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:orientation="vertical">
<LinearLayout
android:id="#+id/station_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/station_detail_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3" />
<include
layout="#layout/station_detail_body"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2" />
</LinearLayout>
<TextView
android:id="#+id/text_view_station_detail_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:text="#string/text_view_station_detail_empty"
android:visibility="gone" />
</LinearLayout>
Thanks for any help, much appreciated!
I think you need to add nested scroll view to your linearlayout.
Alex I thing you have to use two CoordinatorLayout in two fragment and you can include your linear layout inside it .

Categories

Resources