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.
Related
I am working with a RecyclerView which will be used to load potentially many images and I'd like to have an actionbar above the RecyclerView like this:
But I'd also like the actionbar to only have that grayish background at the very top. If the user scrolls, it should be totally transparent like this:
I've accomplished what I wanted by using this as my layout (with one major issue):
fragment_recycler_gallery.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Gray bar at top -->
<View
android:id="#+id/gray_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#null" />
<android.support.v7.widget.RecyclerView 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/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
The NestedScrollView is key to getting my entire fragment to scroll instead of only the RecyclerView but it makes my app slow or unresponsive when loading a large set of images (500+). Is there a better way to create what I'm looking for? I've tried finding solutions but all I can find is "don't use recyclerviews inside nestedScrollViews" without any alternative solutions offered.
I'm using Glide to load the images into each ImageView(within the recyclerview) if that matters as well.
And I'm already using this on my RecyclerView as well:
mAlbumRecyclerView.setNestedScrollingEnabled(false);
Any time you use wrap_content on a RecyclerView, you're setting yourself up for performance problems. Using wrap_content completely defeats the performance improvements that you get from recycling views. So the question, then, is how you can do what you want without using wrap_content.
One thing you could do is use a FrameLayout to overlay a Toolbar on top of your RecyclerView, and then use padding on the RecyclerView (combined with android:clipToPadding="false") to make things appear to start below the actionbar. As long as your toolbar has a translucent background color, your recyclerview content will appear below it when you scroll.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"
android:clipToPadding="false"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
tools:listitem="#layout/itemview"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#1111"
app:title="Hello world"/>
</FrameLayout>
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!
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.
My activity contains 2 Toolbars at the top of screen, and I'm using a CoordinatorLayout to make the top one exit/enter the screen on scroll of a RecyclerView, and the other Toolbar will always follow it but not exiting the screen.
Another layout containing the RecyclerView forementioned is added into a FrameLayout container dynamically. The layout is from another package so I must add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the FrameLayout container to work with the CoordinatorLayout. And it works fine with no problem.
However, when I added another layout to the FrameLayout(a centered ProgressBar for example) instead of the RecyclerView , the bug showed. The FrameLayout, which match_parent, did not fill the screen, and its height was the same as ProgressBar.
After I deleted the line app:layout_behavior..., the FrameLayout succeeded to fill the screen. But at runtime when i want to add a RecyclerView, part of its 1st item is blocked by the Toolbar, because of the lack of app:layout_behavior... attribute.
In a word, if I add a app:layout_behavior.. attribute to the FrameLayout which match_parent, the RecyclerView in it shows correctly but the FrameLayout only wrap_content in height; if not, it match_parent while the RecyclerView is blocked by the 2nd Toolbar.
Note that I can't add this attribute to RecyclerView directly, which is in another package.(but i can get the reference of it at runtime)
Below is the 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/mainToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
style="#style/Toolbar"
app:theme="#style/Toolbar" />
<android.support.v7.widget.Toolbar
android:id="#+id/subToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/Toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
UPDATE: I have solved the problem by adding an invisible new View(this) object , which fills the screen by default, to the FrameLayout at runtime before the ProgressBar is added. But I still don't know why the bug occurs. And I think this solution is a hack.
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'