Title in CollapsingToolbarLayout truncates on SearchView open - android

Whenever I open a SearchView within a CollapsingToolbarLayout, the page title gets squashed and truncated to 1 side for some reason rather than being positioned underneath the SearchView widget. Is there a way to prevent this from happening?
Main layout
<?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"
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/collapsing_toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:scrollbarStyle="outsideInset"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/myFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_search"
android:contentDescription="#string/string_search"
android:layout_margin="16dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Collapsing toolbar layout
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
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="wrap_content"
android:id="#+id/myAppBarLayout">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/myCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:maxLines="3">
<androidx.appcompat.widget.Toolbar
android:id="#+id/myToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

Your CollapsingToolbarLayout was covered by your RecyclerView, try to change the Main layout

Related

A ListView overlaps a SearchView in a CoordinatorLayout

I'm fixing an app after the AndroidX migration, and I had a very odd bug that my ListView was not being loaded on the onCreate/onStart/onResume events:
A ListView is not displaying any data on OnCreate/OnStart after AndroidX migration
By matter of chance, I decided to "simplify" my layout and removed a LinearLayout that contained the ListView. After this change, the data was loaded properly because it seems LinearLayout was somehow blocking the getView event. However, after this change, the SearchView is being overlapped by the ListView, and I don't know how to put them in the right order (first the SearchView followed by the ListView).
This is how it looks now:
This is my code:
other_ruins.xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/search_container" />
<ListView
android:id="#+id/lstOtherRuins"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:nestedScrollingEnabled="true"
android:layout_margin="8dp"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:choiceMode="singleChoice"
android:layout_below="#id/toolbar_container"
android:layout_gravity="left|start" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:adSize="SMART_BANNER"
app:adUnitId="#string/banner_ad_unit_id" />
</LinearLayout>
search_container.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<FrameLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
Regarding, the search_container I tested also using the AppBarLayout and crashed the app; therefore, it's not a solution.
Any idea how can I fix it? And why is this happening? If you know how to fix the previous issue and somehow call the getView event on the onCreate/onStart/onResume events is another solution.
You need to replace the FrameLayout in the search_container.xml with AppBarLayout as the AppBarLayout should wrap the Toolbar when you're using the Toolbar within the CoordinatorLayout
<?xml version="1.0" encoding="UTF-8" ?>
<com.google.android.material.appbar.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.appbar.AppBarLayout>
In my case, I needed to wrap my FrameLayout with a AppBarLayout make it work properly, when I didnĀ“t do it, it duplicates the toolbar creating an strange shadow. This is the final change:
<?xml version="1.0" encoding="UTF-8" ?>
<com.google.android.material.appbar.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
</com.google.android.material.appbar.AppBarLayout>
Only one of them breaks the app.

BottomNavigationView hidden by default after adding scroll behaviour

I have the following main layout and a recyclerview in my fragment. The problem i am facing is that the bottom navigation view is hidden by default and appears only when i scroll down the navigation view appears.
Before scrolling down
After scrolling down the bottomnavigationview appears
Another issue i am facing is that after scrolling down and changing the fragment the toolbar disappears
content_home.xml
<RelativeLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activity.HomeActivity"
tools:showIn="#layout/activity_home">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:itemIconTint="#drawable/nav_item_foreground"
app:itemTextColor="#drawable/nav_item_foreground"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:menu="#menu/navigation" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/navigation" />
</RelativeLayout>
This is the main activity layout
activity_home.xml
<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"
>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBar"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
layout="#layout/content_home" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
There is an issue in your content_home.xmlYou are using app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior" in BottomNavigationView.
That's why it is happing.
Remove hide_bottom_view_on_scroll_behaviorfrom app:layout_behavior.

Android scrolling toolbar with other combined views

In my android application I have Toolbar with SlidingLayer which that is simple library and extends from FrameLayout to make sliding on application. now when I try to use toolbar with this view I have to make it into FrameLayout, with this action scrolling my toolbar is not working.
I moved app:layout_scrollFlags="scroll|enterAlways" from <android.support.v7.widget.Toolbar to FrameLayout but scrolling it doesn't work again. for example my view with toolbar is:
Now how can I use app:layout_scrollFlags="scroll|enterAlways" and scrolling toolbar with this view?
My xml layout is:
<?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:slidingLayer="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer
android:id="#+id/sliderTabPages"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="56dp"
android:layout_marginRight="8dp"
android:elevation="5dp"
app:offsetDistance="30dp"
app:slidingEnabled="true"
app:stickTo="top"
slidingLayer:changeStateOnTap="true">
</com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer>
<android.support.design.widget.AppBarLayout
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="wrap_content"
android:background="#android:color/white"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar.Light">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</FrameLayout>
try this out:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:slidingLayer="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Can use any layout for your content important thing is app:layout_behavior="#string/appbar_scrolling_view_behavior"-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer
android:id="#+id/sliderTabPages"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="56dp"
android:layout_marginRight="8dp"
android:elevation="5dp"
app:offsetDistance="30dp"
app:slidingEnabled="true"
app:stickTo="top"
slidingLayer:changeStateOnTap="true" />
<!--Other content-->
<!--Note that this content has to have scrollable view like RecyclerView-->
<!--Example-->
<RecyclerView
android:id="#+id/yoursScrollableView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Collapsing toolbar-->
<!--You can put any kind of view for scrolling important thing is app:layout_scrollFlags="scroll|enterAlways"-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarThatGoingToScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar.Light" />
</com.google.android.material.appbar.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</layout>

RecyclerView Hide behind AppbarLayout?

I have an Activity with CoordinatorLayout and inside it with a FrameLayout as a fragment container. I use the toolbar and change the visibility and FitSystemWindows attribute to control the Appbar Overlay like this:
private void modifyToolbar(boolean isVisible) {
if (isVisible) {
appbar.setFitsSystemWindows(true);
imageToolBar.setVisibility(View.VISIBLE);
imageToolBar.setFitsSystemWindows(true);
coll.setFitsSystemWindows(true);
appbar.requestApplyInsets();
} else {
appbar.setFitsSystemWindows(false);
imageToolBar.setVisibility(View.GONE);
imageToolBar.setFitsSystemWindows(false);
coll.setFitsSystemWindows(false);
appbar.requestApplyInsets();
}
}
It works fine except when in my overlay Fragment, I collapse the overlay ImageView and return to the non-overlay Fragment then come back. The overlay item will hide behind the toolbar.
Normal :
Error :
Here is my activity and my appbar
<?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:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.phoenix.soft.agenda.MainActivity">
<include layout="#layout/app_bar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp"
app:backgroundTint="#drawable/fab_background"
app:layout_anchor="#+id/fragment_content"
app:layout_anchorGravity="bottom|right" />
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_overlapTop="64dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
Appbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
android:theme="#style/AppThemeNew.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/coll_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/image_over_lay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/find_bank"
android:transitionName="#string/toolbar_transition"
android:visibility="gone"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_bar"
android:visibility="gone"
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_collapseMode="pin"
app:popupTheme="#style/AppThemeNew.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And also, there is a "blink" shows up when I collapse the AppBar and return. I guess it's somehow the same reason cause this problem.
Thanks for the help.

How to make RecyclerView fix header when scrolling

I have a RecyclerView that has been filled with data. It's just that when I scroll, the header does not fix the toolbar into position and results go up.
How do I hide the toolbar header when scrolling? Or more easily create fixed scroll on RecyclerView when scrolling?
All my code runs well, it's just a problem with the header that goes up when the scroll
ActivityMain 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.bertho.gmyl.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabBackground="#drawable/tab_selector"
app:tabIndicatorColor="#color/whiteColor"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
RecyclerView Layout :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvArticle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Result :
Try setting android:fitsSystemWindows="false" as it takes entire screen (including status bar) to draw activity.
For more info.

Categories

Resources