In my app I want to display a simple Image,
On my Samsung Galaxy S7 Real device the image is fine, The bottom Navigation bar is not part of the view but part of the phone itself.
The whole of the Image is present.
On the Android Emulator the bottom navigation bar is part of the view and the image is partially hidden
Here is my simple Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/md_blue_50"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/toolbar"/>
<ImageView
android:id="#+id/photo_image_large"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:scaleType="fitXY"/>
</LinearLayout>
Here is the Android Emulator Screenshot
android emulator
Here is my Samsung Galaxy Real Device Screenshot
android real device
The problem also occurs in recycler Views in the app the bottom part of the image is cut off on the android emulator...
It's because of android:fitSystemWindows put it to false and it should be good
I had similar problems with BottomNavigationView (menu) this is solution :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_activity_main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/main_activity_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
app:itemIconTint="#color/color_main_white"
app:itemTextColor="#color/color_main_white"
app:menu="#menu/bottom_navigation_menu"/>
Try to change parameter android:layout_heigh to 0dp and add this android:layout_weight="1" for ImageView
you have to place the view above the bottom navigation bar so that the view wont hide in the bottom navigation bar
Related
I have created layout with help of sdp Library and ssp Library, When testing in Nexus 10 API 24 emulator, BottomNavigationView show icon and text label which overlap each other. It work fine with mobile screen.
BottomNavigationView : android.support.design.widget.BottomNavigationView,
Bottom navigation height : #dimen/_43sdp equivalent to 56dp in mobile,
Bottom navigation icon size : #dimen/_18sdp,
Bottom navigation text label size : #dimen/_12ssp,
I am unable to understand whats going wrong. Please guide me.
Layout code:
<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/cord_home_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.mainHome.MainNavigationActivity">
<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.BottomNavigationView
android:id="#+id/bottom_navigation_view"
style="#style/BottomNavigation"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_navigation_height"
android:layout_gravity="bottom"
android:background="#color/white"
app:itemIconSize="#dimen/bottom_navigation_icon_size"
app:elevation="#dimen/_6sdp"
app:labelVisibilityMode="labeled"/>
<!--app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"-->
</android.support.design.widget.CoordinatorLayout>
Screenshot of tablet screen:
Just increase your bottom navigation view height. It will override default height. Let me know if it's not working because currently, I have done it.
<dimen name="design_bottom_navigation_height" tools:override="true">86dp</dimen>
The problem is in the title, I use a Bottom Navigation View/Bar, it works fine on smartphone without virtual Navigation Bar :
On my Samsung Galaxy S6 Edge without Navigation Bar
And with a virtual NavBar, the Bottom Navigation View disappear :
On my Huawei with virtual Navigation Bar
I tried to remove the Navigation Bar and force the application to go on Fullscreen and the Bottom Navigation View/Bar appeared.
It's why I think that the Navigation Bottom Bar is overrided by the Navigation Bar from the smartphone.
I want my Navigation Bottom Bar to be above the virtual Navigation Bar!
Help me to fix this bug please.
EDIT :
Here is the layout of this activity :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_fond_opacite"
android:fitsSystemWindows="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:id="#+id/frame"
android:layout_above="#+id/bottomNavigationAvis"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
android:id="#+id/bottomNavigationAvis"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:bnv_active_color="#color/vraiment_pro_vert"
app:itemBackground="#color/vraiment_pro_fond_gris"
app:itemTextColor="#color/vraiment_pro_fond_gris"
app:bnv_active_text_size="#dimen/bottom_navigation_text_size_active"
app:bnv_colored_background="true"
app:bnv_inactive_text_size="#dimen/bottom_navigation_text_size_inactive"
app:bnv_with_text="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
I solved it ! It was a problem with something in my code that was blocking the UI, unfortunately, sorry :)
Try setting the RelativeLayout height to match_parent as shown below.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</RelativeLayout>
I recently integrated the BottomNavigationView in a fragment. As per Google guidelines, it should auto hide on scrolls. But it does not!
I also can't scroll the mainlayout. So without the autohide feature, the bottom part of my mainlayout is neither visible nor touchable.
Below is my footer layout:
<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"
tools:context="com.app.ui.footer.FooterFragment">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/grey"
app:itemTextColor="#color/black" />
</FrameLayout>
Is there a flag I need to set to enable AutoHide functionality?
I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks
Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".
I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!
I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity 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=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>