Got a weird problem. Contents of the fragment getting hidden under the action bar. Its a pretty basic drawer layout and a fragment.
New to android and don't know if this is how it is.
I used margin just to pull this down, as you can see below. But this doesn't sound correct to me... please throw some light where am I going wrong. Thanks in Advance.
It is the normal and expected behaviour if you set FEATURE_ACTION_BAR_OVERLAY (android:windowActionBarOverlay) . Here the documentation
Add an attribute
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to your parent view of your fragment.
Another possible solution for many who see this question is to change the parent layout of the toolbar to LinearLayout (likely with a vertical orientation), as this type of layout does not allow its children to overlap.
For example, this layout in activity_main.xml will result in the fragment being below the toolbar, rather than behind it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph"/>
</FrameLayout>
</LinearLayout>
Setting top margin of the fragment's layout to height of AcionBar worked, at last!!
android:layout_marginTop="?attr/actionBarSize"
Don't know if this is a better solution but for me this is the only working solution.
Related
With the bottom sheet fragments not showing up, I initially thought the problem was within my Java code — maybe improper setup in the adapter, using the wrong fragment manager, etc — and not in the XML layouts. After a couple days of frustration, I finally identified the culprit.
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="?android:attr/actionBarSize"
android:name="androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:navGraph="#navigation/analytics"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_surface"
android:elevation="#dimen/size_2"
app:behavior_peekHeight="?android:attr/actionBarSize"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tabs"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
When the bottom sheet is at collapsed, its tabs and their labels are visible (at the peekHeight), and I can tap through them. However, when the bottom sheet is expanded, the tabs are still visible but nothing is showing in their fragments. I've identified that if I comment out the FragmentContainerView — and here it really doesn't matter if I use the old fragment view instead — the bottom sheet works as expected, with all content in all tabs getting displayed.
So what's going on?
First, your TabLayout needs app:layout_constraintTop_toTopOf="parent"
And make ViewPager height other than 0dp like android:layout_height="match_parent" or 500dp .. something like that.
If that does not solve the issue you can use other layouts like RelativeLayout or LinearLayout as BottomSheet root.
It seems like a simple Snackbar message looks pretty jarring if android:animateLayoutChanges is set to true. The Snackbar will flicker repeatedly throughout the animation. Removing the android:animateLayoutChanges parameter from the layout solves this issue but now I won't get to enjoy the benefits from it. It also works if I use android:animateLayoutChanges on a child view instead of the root view.
Is this a known issue and is there a way around it?
Here is an example layout which will demonstrate the issue if a snackbar is shown.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="end"
app:fabCradleMargin="4dp"
app:fabCradleRoundedCornerRadius="16dp"
app:fabCradleVerticalOffset="4dp"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
app:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/colorAccent"
app:layout_anchor="#id/bottomAppBar"
app:srcCompat="#drawable/ic_add"
app:tint="#color/colorWhite" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Looks like an open bug. see here
Happened to me too, still not fixed of 30/07/2021. 😕
If applicable, the simplest workaround would be to put the part of layout that needs animating in a extra FrameLayout, for example like this:
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:theme="#style/AppTheme"
<-- Other views here, FragmentContainerView, AppBarLayout, ... -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<-- Place anything that you want animated here -->
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
If you would happen to have some other container views in the "useless" FrameLayout you may get "UselessParent" prompt by Android Studio, you can just include this ignore in the child of the added FrameLayout: tools:ignore="UselessParent".
I am using bottom app bar inside the coordinator layout. the rest of the content is coming from a fragment. the fragment content is being covered by the bottom app bar
Because I am using bottomAppBar it has to be inside a CoordintorLayout and all the children have to be inside of it as well. All layout above the BottomAppBar should fill the space reminding, but if I do so the views at the bottoms get covered. how do I ensure the view do not overlap with BottomAppBar
<androidx.drawerlayout.widget.DrawerLayout
android:id="#+id/drawerLayout_main"
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=".main.MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="0dp"
android:layout_height="wrap_content">
</androidx.constraintlayout.widget.ConstraintLayout>
<fragment
android:id="#+id/fragment_main_navHost"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
android:layout_gravity="top"
app:navGraph="#navigation/nav_graph"/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabAlignmentMode="end"
app:fabCradleMargin="4dp"
app:hideOnScroll="true"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navView_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_layout"
app:menu="#menu/main_navigation"/>
What I need is to ensure whatever content is replacing the fragment should not be covered by the bottom app bar and it should use all the white space not being used the bottom app bar. I another world the content should be above it while using rest the white space and still be inside the coordinator layout.
Just add margin to your fragment container :
<fragment
android:id="#+id/fragment_main_navHost"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="{bottom_navigation_height}"
android:layout_marginTop="{tool_bar_height}"
app:defaultNavHost="true"
android:layout_gravity="top"
app:navGraph="#navigation/nav_graph"/>
According to the CoordinatorLayout Documentation, edges where a View in CoordinatorLayout expects to overlap with another View can be specified with layout_dodgeInsetEdges=”bottom”. So if your fragment is being overlapped by your BottomAppBar, you add this attribute to the fragment. You must also specify that you wish to dodge the BottomAppBar. This is done by adding layout_insetEdge=”bottom” to it.
To be more specific for your case, do the following:
Add app:layout_dodgeInsetEdges="bottom" to the <fragment> like so:
<fragment
app:layout_dodgeInsetEdges="bottom" <--- THIS
android:id="#+id/fragment_main_navHost"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
android:layout_gravity="top"
app:navGraph="#navigation/nav_graph"/>
Add app:layout_insetEdge="bottom" to BottomAppBar. (Note that this step my be unnecessary if BottomAppBar applies this inset by default so try also without it):
<com.google.android.material.bottomappbar.BottomAppBar
app:layout_insetEdge="bottom" <---- THIS
android:id="#+id/bottomAppBar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabAlignmentMode="end"
app:fabCradleMargin="4dp"
app:hideOnScroll="true"/>
There's a really good article that shows examples with animated giffs that I highly recommend you to check out.
Try adding app:layout_behavior="#string/appbar_scrolling_view_behavior" to the fragment.
Good day, I'm having a problem with my xml layout. I create an another xml file share_app_scroll(ScrollView Layout) and included it in my ShareApp.xml .
The Problem is, my toolbar/action bar don't appear. All I can see, is my scrollview layout that I created. Is this possible to include the scrollView layout?. Here's my Code.
<RelativeLayout
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:fitsSystemWindows="true"
tools:context=".activities.ShareAppActivity">
<!--Include ActionBar/Toolbar-->
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
<include
android:id="#+id/share_scrollview"
layout="#layout/share_extend_scrollview"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
Sorry for the blurred picture.
Thank you in advanced.
You are using relative layout as your parent layout therefore you have to align your include layout below toolbar.Like this
<include
android:id="#+id/share_scrollview"
layout="#layout/share_extend_scrollview"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="#+id/toolbar"/>
The problem will be in the manifest file.
Check if the java file for your xml has a android:theme="#style/AppTheme.NoActionBar" in the manifest. remove the no action bar and it will appear. if you are talking about during the design view. next to the api level there is app theme. change that to any except .NoactionBar
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