Have upgraded app to use Material Design - Theme.AppCompat.Light.NoActionBar, Toolbar instead of ActionBar etc..
And have a problem.
Bottom content become to be hidden under soft NavigationBar (see picture below) on devices with APi >= 21
Have found solution to fix this:
in values-v21/styles.xml
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorPrimaryDark">#color/green</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</styles>
if option <item name="android:windowDrawsSystemBarBackgrounds">false</item> - bottom content is visible, but statusbar become completely black. I cant change color to colorPrimaryDark (green in my case)
if option <item name="android:windowDrawsSystemBarBackgrounds">true</item> - bottom content is invisible, and statusbar is green, as expected.
I want to have statusbar colored(green) and visible bottom content..
Probably, issue is with toolbar. Is it pushes content down?
Any suggestions?
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
UPDATE:
As suggested #azizbekian, I've replaced container for fragmets to CoordinatorLayout(before FrameLayout) and applied android:fitsSystemWindows="true"
In this case bottom panel is visible, but not at the bottom..
Goal is to keep buttons athe bottom...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<include
layout="#layout/toolbar"/>
<!-- The main content view -->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/content"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
layout of the screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<FocusableScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/order_editor_layout"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/o_e_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
</FocusableScrollView>
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/oe_bottom_pane"/>
</LinearLayout>
Here is result:
UPDATE#2
Activity Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ActionBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- The main content view -->
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
Replaced LinearLayour with CoordinatorLayout as root for activity.
As root element for content I've keep FrameLayout.
Applied android:fitsSystemWindows="true" to CoordinatorLayout.
This way, all content was slightly moved up and part of placed below the toolbar(you can see on image below - top elements are circle with + and - symbold. But on previous images there are text on the top.) Regarding bottom elements (buttons panel) - still placed below navigation bar but also slightly moved up. I've marked android:background="#color/red" to easier recognize position of this panel.
Seems, we are on the right way. All we need - to resolve problem - why content moved below the toolbar.. If tolbar will be top ui elemnt, buttons will be visible..
Apply android:fitsSystemWindows="true" to your root view.
See this post for detailed explanation.
Related
I have been trying to display the icon images on my bottom navigation bar. No matter what I try I still can't get it. I have been trying so many different ways to solve but to no avail. Could someone please help me on this? Maybe I have missed out on something.
<?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:background="#color/yellow"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/fragment_layout">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavView"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="bottom"
android:background="#color/white"
app:menu="#menu/menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>```
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_donate"
android:icon="#drawable/donate_icon"
android:title="Donate"/>
<item
android:id="#+id/nav_status"
android:icon="#drawable/status_icon"
android:title="Status"/>
<item
android:id="#+id/nav_history"
android:icon="#drawable/history_icon"
android:title="History"/>
<item
android:id="#+id/nav_logout"
android:icon="#drawable/logout_icon"
android:title="Log Out"/>
</menu>
```
The image link below is how the display is as of now.
[1]: https://i.stack.imgur.com/EH6AQ.png
Your layout height is set to 0dp
android:layout_height="0dp" where it is matching the constraints it is given. I have not seen your display but I'm guessing the frame layout is hiding your bottomNavView.
Change it to
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/fragment_layout"
app:layout_constraintTop_toTopOf="parent">
app:layout_constraintBottom_toTopOf="#id/bottomNavView">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavView"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="bottom"
android:background="#color/white"
app:layout_constraintBottom_toBottomOf="parent">
app:menu="#menu/menu"/>
EDIT
With help from #Niaj Mahmud .
Change the material version in your app level build.gradle files from 1.5.0 to 1.3.0
yes in physical device it's work properly but in preview it does not show. this issue is for material version 1.5.0 .. try material 1.3.0 version
live view of bottom navigation in design view is not showing icons and the menu resource
I am working on an android project that uses a drawer layout. The drawer layout contains many items and is therefore scrollable. The problem is, I need the last item to have a padding bottom such that there will be some spacing after scrolling to the last item.
From the screenshot above, how can I add some padding between the last item 'Log out' and the end of the screen.
I have tried adding padding bottom to the drawerlayout but its still not working
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
android:paddingBottom="#dimen/_120sdp"
android:clipToPadding="false">
I have also tried enclosing navigation view in a scrollview but it is also not working
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="#dimen/_120sdp">
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</ScrollView>
This is my last element in the drawer layout
<item
android:paddingBottom="#dimen/_190sdp"
android:title="#string/action">
<menu>
<item
android:id="#+id/nav_rate_us"
android:title="#string/rate_us" />
<item
android:id="#+id/nav_log_out"
android:paddingBottom="#dimen/_120sdp"
android:title="#string/log_out" />
</menu>
</item>
How can I achieve this?
add one dummy items to the end of your menu resource file.
<item
android:title=""
android:enabled="false" >
</item>
I have a custom View within the NavigationView. The problem is no matter in what combination, fitsSystemWindows is not working within the NavigationView. and the top item in the drawer always stays behind the transcludent statusbar.
main_layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimaryBottomBar"
android:fitsSystemWindows="true">
<include layout="#layout/navigation_main_drawer" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
navigation_main_drawer
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/default_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:fitsSystemWindows="true"
android:orientation="vertical">
<LinearLayout
...
</LinearLayout>
<View
... />
<LinearLayout
...
</LinearLayout>
<View
... />
<LinearLayout
...
</LinearLayout>
<View
... />
</LinearLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
So, if I've understood correctly, you want your custom view to get the necessary padding so that its contents are not clipped by the status bar right?
If that's the case then you need to set
android:fitsSystemWindows="true"
in your root DrawerLayout, and then set
android:fitsSystemWindows="false"
in your NavigationView component. Note that's false, not true :)
REASONING:
The new NavigationView component designed by Google uses the 'fitsSystemWindows' property to customize how its content relates to the status bar. Note that "customize" here is the key word, because the hardcoded behaviour for this particular component is that its contents should overlap the status bar and reach the top of the screen, while the status bar itself should be transparent to allow the drawer's content to be seen through it. This is specified as part of the new Material Design, as can be seen in https://material.io/guidelines/patterns/navigation-drawer.html.
So, the only way to disable this behaviour is to tell the NavigationView to not signal the fitsSystemWindow property, and only set this in the root DrawerLayout that contains all other views, which will do what you would expect and pad all its children views appropriately.
Note that this reasoning is confirmed also by this comment from Android developer Ian Lake in a blog post talking about this specific property.
P.S.
I would also remove all mentions to the 'fitsSystemWindows' property in all the child elements in your navigation_main_drawer XML, just in case, although it probably does have no effect whatsoever as it is..
I'm currently trying to use coordinator layout in order to collapse an image - in a theme with transparent status bar -, however three issues are bothering me:
When Activity is started, image is not being displayed behind the status bar (if I remove the coordinatorlayout, it works);
When I scroll up, I would like to change the status bar to a solid color, but a piece of the image remains showing;
After adding AppBarLayout and CollapsingToolbarLayout the bottom of the image - with the same height of the status bar - get cut;
Image remains below status bar - even though it is set to be transparent in the theme
Status bar after collapsing - it should have a solid color
Code:
<?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/colorPrimary"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:statusBarScrim="#color/colorPrimary"
app:contentScrim="#color/colorPrimaryDark">
<RelativeLayout
android:id="#+id/cover_wrapper"
android:layout_width="match_parent"
android:layout_height="#dimen/rsc_character_details_cover_height">
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent" android:layout_height="#dimen/rsc_character_details_cover_height"/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/cover_wrapper"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="6">
...
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is how I'm setting the status bar transparency:
<item name="android:windowTranslucentStatus">true</item>
Any help will be very appreciated.
Thank you very much.
For the problems with the image not being displayed behind the status bar and being cut off, anything that should be displayed in the status bar area should have android:fitsSystemWindows="true". ie. your cover_wrapper and cover.
I have an activity that shows extra space at the bottom even though I have no bottom padding applied. Style code, xml code, java code and a screenshot are below and the relevant json data is here:
http://lara.rufflecol.es/strollcharlton/strollcharlton_data_1_2.json
It isn't a huge issue it is just annoying! Have already tried to using android:fillViewport set as true or false but it doesn't seem to make any difference. Is the problem related to my json?
UsefulLinks.xml
<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"
tools:context="">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/dark_green"
android:minHeight="?attr/actionBarSize" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/useful_links"
style="#style/UsefulLinksTextStyling"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left" />
</LinearLayout>
</ScrollView>
</LinearLayout>
styles.xml
<style name="UsefulLinksTextStyling" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">#dimen/fifteen_size</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingLeft">15dp</item>
<item name="android:paddingRight">15dp</item>
</style>
UsefulLinks.java
TextView usefulLinksIntroTextView = (TextView) findViewById(R.id.useful_links);
usefulLinksIntroTextView.setText(Html.fromHtml(data.getUsefulLinks()));
usefulLinksIntroTextView.setMovementMethod(LinkMovementMethod.getInstance());
Screenshot
ensure the html that you are setting to the textview does not having blank space inside of it
change your base LinearLayout to wrap_content so that if the html takes up less than the screen height you don't have "extra padding"
You can also turn on "show layout bounds" for your application, that way you will understand which View is giving you the "extra padding" http://tysmith.me/post/27035355999/layoutbounds combine it with the Hierarchy Viewer http://developer.android.com/tools/performance/hierarchy-viewer/index.html to work out which View is at fault