I have a view which contains a CoordinatorLayout which wraps an AppBarLayout and a NestedScrollView. Inside the NestedScrollView there is an EditText
I'm having problems showing the soft input keyboard and having it correctly resize the view.
With the usual flag android:windowSoftInputMode="adjustResize" everything seems to work fine, apart from when you hide the input.
With the input open (image 2), the NestedScrollView (with the boring grey background) has shrunk so you can scroll to the previously "covered" portion. All good. However, once the input is hidden (image 3), the NestedScrollView has not grown to refill the space and you can see it's parent CoordinatorLayout (which I've coloured in the fetching red).
I've tried this answer https://stackoverflow.com/a/31286789/726954, adding a myserious android:layout_gravity="fill_vertical" tag, but all this does is limit the NestedScrollView height which ends up cutting off child elements (although it does fix the problem with it refusing to refill it's container).
Am I missing something or is this a bug with the CoordinatorLayout
Here is a mockup of my 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:background="#color/red_granate">
<android.support.design.widget.AppBarLayout
android:id="#+id/actionBarContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<View
android:id="#+id/statusBarPadding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/primary_material_dark"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/primary_material_dark"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:background="#color/grey"
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="2000dp">
<EditText
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="1900dp"/>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Are you using the latest version - 22.2.1? I had similar problems with 22.2.0.
compile 'com.android.support:design:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'
Related
In my application I use the android.support.v7.widget.Toolbar for the toolbar.
Here is my 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"
tools:context="com.todo.app.MainActivity"
style="#style/MainActivityBg">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<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="4dp"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
style="#style/AppTheme.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"/>
and
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.todo.app.MainActivity"
android:layout_marginTop="5dp"> <!-- for adding some space between the toolbar and the rest, and this is the cause of the problem! -->
<android.support.v7.widget.RecyclerView
android:id="#+id/task_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
I try to add some space between the toolbar and the rest of the view. To do that I added 5dp in marginTop to the layout which is right under the view. And this causes this problem:
While I scrolling the view there is some space remaining under the toolbar.
In my style files xml, there is no style for margin or padding.
How I can adding some space between toolbar and the rest without trigger this problem (when I scrolling the view)?
Reason
Based on the xml files, it seems to me that:
<android.support.constraint.ConstraintLayout
...
android:layout_marginTop="5dp">
is the reason for cropping RecyclerView content.
When you set the layout_marginTop between the AppBarLayout and the upper edge of ConstraintLayout appears a 5dp high empty space.
You can confirm that by turning on one of the Android options for developers: Show Layout Bounds.
Solution
For the effect which you want to achieve try to remove android:layout_marginTop and set android:paddingTop for the RecyclerView but also set android:clipToPadding to false.
Check the gif in this SO answer.
<android.support.v7.widget.RecyclerView
android:id="#+id/task_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="5dp"
android:clipToPadding="false" />
This will allow you to add the desired space at the beginning of scrollable content but prevent cropping the items.
If the 5dp top margin isn't the problem, it may be the toolbar elevation, try to change 4dp to something much higher and check if changes your problem. Can you try same with margin top? Also a negetive margin sometimes work. Put a negetive margin on button of the toolbar and check.
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!
I have this 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:id="#+id/coordinatorLayout"
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"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</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.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_favorite_outline_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
Setting #string/appbar_scrolling_view_behavior attribute shifts the RecyclerView by the height of the Toolbar.
But what if I need the first element of the RecyclerView to be aligned to the status bar.
I want the Toolbar to cover (be above) the first element.
In other words, I don't want any offset which #string/appbar_scrolling_view_behavior behaviour entails.
Could you please tell me how to do that?
I had the same problem and I just wrapped the AppbarLayout and the rest of my views (in your case the recyclerview) in a RelativeLayout and it works fine. I don't know if there are any downsides with that approach.
The offset is not by #string/appbar_scrolling_view_behavior behaviour it's due to AppBarLayout it pushes the content down.
I'm not sure if there is any other better solution. But I'd suggest to remove the AppBarLayout to have your content go under the Toolbar. Moreover you might be need the scrolling behaviour for that you can check the library below.
It's been used by lots of apps like Jair Music Player even WhatsApp too uses it.
Library:
Android Observable Scroll View
I have:
1.Coordinator layout
2.appbar layout (child of Coordinator layout)
3.Collapsing toolbar layout (child of app bar)
4.NestedScrollView (child of coordinator)
I want to put a grid view inside NestedScrollView so that user can scroll over the entire screen space.
My problem is that currently the gridview occupies a small portion of the NestedScrollView and not full space of NestedScrollView and scrolls inside that portion,like in this image:
As you can see my gridview height is limited upto only that highlighted portion in sky blue color, i want that to occupy the entire screen space below that image(which is my Collapsing toolbar).i tried different ways but nothing works out.
my xml file is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/app_bar"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="196dp"
android:background="#3f51b5"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/index"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</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="#string/appbar_scrolling_view_behavior">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:id="#+id/gridView"
android:verticalSpacing="1dp"
android:horizontalSpacing="1dp"
android:numColumns="2"
android:stretchMode="columnWidth"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
GridView already has scrolling built in, so it conflicts with a NestedScrollView. You should be using a RecyclerView with a GridLayoutManager and appbar_scrolling_view_behavior layout behavior in place of the NestedScrollView.
well i had the same issue , the following worked for me.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
It is true, that GridView conflicts with the NestedScrollView and the correct solution would be to use the RecyclerView, but I needed a quick workaround with such setup and came across a solution using a custom class extending the GridView:
https://gist.github.com/jiahuang/2591977
Then you just have to replace your GridView with the custom class and set the parameter of NestedScrollView as in Apoorv's answer:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
Apoorv Singh's answer helped me, but not fully. You can put a GridView inside a NestedScrollView, but only the 1st row will show up. You need to add the android:fillViewport="true" inside the NestedScrollView definition in order for everything to display properly.
But, when I scroll down, it doesn't scroll past the bottom of the screen. I have a grid with 10 rows, there are multiple rows not on screen, but I cannot scroll down to view them now.
Answer:
This worked for me now. Use RecyclerView with GridLayoutManager instead of GridView. As Recycler view is compatible with Collapsing toolbar as well. And when you use RecyclerView inside NestedScrollView, it works well. Everything sizes correctly, as well as scrolls correctly.
Inside NestedScrollView add this one line code
android:fillViewport="true"
There's not many examples of these new layouts out on the Internet and those few that are out there are all based on same basic approach. How about if I don't have a proper toolbar in my app, but still want to use the cool functionalities of new material design layouts?
One thing that I've been trying out is using a MapView and RecyclerView inside CoordinatorLayout with a parallax scrolling effect. It works great, but there's a problem. If my adapter count is low, the RecyclerView doesn't remain on the bottom of screen. Here's some images to better describe the problem.
Initial screen:
RecyclerView scrolls over MapView, leaving blank space below:
Is there a way to keep RecyclerView on bottom?
My xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<com.google.android.gms.maps.MapView
android:id="#+id/tts_main_map"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_collapseMode="parallax" />
</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="wrap_content"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
Try to set the android:minHeight property of the CollapsingToolbarLayout dynamically depending on how many items you have in the list. I.e. you should set (pseudo-code):
minHeight = allAvailableHeight - (oneListItemHeigh * listItemCount)
PS. It just an idea, I did not tried. But I think it should works.