How to show only fragment area when I use a BottomNavigationView? - android

I'm currently developing an application using android-studio with Kotlin.
This app has a BottomNavigationView and 4 fragments.
My question is How I can show only fragment area using BottomNavigationView?
ex) when I divide a fragment area using two LinearLayouts, each LinearLaytout has a different height like the photo below:
And I want to divide each LinearLaytout as the same heights.
Here are the codes:
fragment.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.HowToUseFragment" android:orientation="vertical">
<LinearLayout
android:id="#+id/viewBag"
android:visibility="visible"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_bright">
</LinearLayout>
<LinearLayout
android:id="#+id/viewReceipt"
android:visibility="visible"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_dark">
</LinearLayout>
</LinearLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
tools:context=".MainActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_navigation_menu"/>
<fragment
android:id="#+id/nav_host_fragment"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/navigation_graph"/>
</FrameLayout>
Android Studio : 3.3.2


Try LinearLayout instead of FrameLayout:
<LinearLayout
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"
android:orientation="vertical"
tools:context=".MainActivity">
<fragment
android:id="#+id/nav_host_fragment"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/navigation_graph"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_navigation_menu"/>
</LinearLayout>
Or add android:layout_marginBottom="56dp" to your <fragment/>

Related

How to hide BottomNavigationBar when scrolling?

activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activities.MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/activityMain_fragmentContainerView_container"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/activityMain_bottomNavigationView_bottomBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:labelVisibilityMode="unlabeled"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:menu="#menu/menu_bottom_navigation" />
</LinearLayout>
home_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
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"
tools:context=".fragments.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.HomeFragment">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/fragmentHome_materialTextView_titleOfCategories"
android:layout_width="match_parent"
android:layout_height="1500dp"
android:text="Categories"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Inside FragmentContainerView I'm showing home_fragment.xml and inside this fragment, I can scroll down.
I'm trying when I scroll down in home_fragment.xml want to hide the BottomNavigationView and show it when scrolling up.
I tried to put app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" but it does not have any effect.
How can I solve this problem?

Place a View at the center of the ScrollView's area using CoordinatorLayout

Suppose I have the following layout .xml file:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/pen_apl_app_bar"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#00FF00"
app:elevation="0dp" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/pen_rv_insurers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000FF"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
It should result in a preview like this
My question is, how can I place the ProgressBar at the center of the RecyclerView area when using a CoordinatorLayout? The ProgressBar should always be at the center of the RecyclerView.

I see appbarlayout has hight 260dp so you can add RelativeLayout with top margin 260dp and move RecyclerView and ProgressBar inside it like this
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/pen_apl_app_bar"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#00FF00"
app:elevation="0dp" />
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="260dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/pen_rv_insurers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000FF"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.recyclerview.widget.RecyclerView>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Edit** This Shuold work if hight dynamic of appbar
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/pen_apl_app_bar"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#00FF00"
app:elevation="0dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/pen_apl_app_bar">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/pen_rv_insurers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000FF"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.recyclerview.widget.RecyclerView>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center" />
</RelativeLayout>
</RelativeLayout>

fragments does not fit the all Layout pages?

I have a problem with fragment when I added contents do not to all page just stay at the top, I want to fit all layout and I use BottomNavigationView to bottom application use fragment to show contents.
enter image description here
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="appbar_scrolling_view_behavior"
tools:context="com.example.hp.votingsystemv1.Fragments.HelpFragment">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/help"/>
</FrameLayout>
<?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_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.hp.votingsystemv1.Activities.MainActivity">
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"
app:menu="#menu/bottombar_menu"
app:itemTextColor="#color/colorWhite"
app:itemIconTint="#color/colorWhite">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Use this
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_action_rupee" />
<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_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.hp.votingsystemv1.Activities.MainActivity">
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"
>
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>

Make BottomNavigationView stay under other view

I've implemented BottomNavigationView (BNV). My BNV always stay on top of other view, how can I make it stay under other view?
This is my View
<RelativeLayout xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_bottom_navi"
app:itemBackground="#drawable/selector_navi_bottom"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimary"
app:menu="#menu/bottom_navigation" />
<FrameLayout
android:id="#+id/frm_content_full"
android:layout_width="match_parent"
android:background="#color/colorPrimaryDark"
android:layout_height="match_parent" />
</RelativeLayout>
This is what it shown.
Thanks.
EDIT 1: The space below BNV is for AdView, my question is about when I use above code, screen will become Blue, BNV will be hidden.

Try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frm_content_full"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linear_bottombar"
android:background="#color/colorPrimaryDark" />
<LinearLayout
android:id="#+id/linear_bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_bottom_navi"
app:itemBackground="#drawable/selector_navi_bottom"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimary"
app:menu="#menu/bottom_navigation" />
<!--your adview-->
</LinearLayout>
</RelativeLayout>

<?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:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="com.study.navcon.module.home.HomeScreenActivity">
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:titleTextColor="#android:color/white"/>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="50dp"
android:layout_above="#+id/navigation"
android:animateLayoutChanges="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="#menu/navigation"/>
</RelativeLayout>
</LinearLayout>

try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<FrameLayout
android:id="#+id/frm_content_full"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#android:color/holo_red_light"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
[1]: https://i.stack.imgur.com/iyDlC.jpg

BottomNavigationView Is hiding my webview

I have a BottomNavigationView activity . in that, i have a webview fragment, whenever the web-view loads a website. The BottomNavigationView is hiding the bottom part of my web-view, is there anyone who can help me regarding this ?
this is my activity_main.xml which contain the BottomNavigationView
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.hackerinside.jaisonjoseph.polysocial.MainActivity">
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
android:layout_alignParentBottom="true"
app:menu="#menu/navigation" />
</RelativeLayout>
This is my first fragment code which contain the webview
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.hackerinside.jaisonjoseph.polysocial.tab2">
<FrameLayout
android:id="#+id/frame1"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#android:color/transparent">
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="3dp"
android:background="#android:color/transparent"
android:foregroundGravity="top"
android:progressDrawable="#drawable/custom_progress"
android:progress="20"/>
</FrameLayout>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swiperefresh1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.hackerinside.jaisonjoseph.polysocial.EulaWebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/webview"
android:focusable="true"
android:focusableInTouchMode="true" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

You just neet to add a FrameLayout (It will be you container so keep its id as android:id="#+id/container")
and replace your code of activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:layout_above="#+id/navigation"
>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
android:layout_alignParentBottom="true"
app:menu="#menu/navigation" />
</RelativeLayout>

Actully you are adding your your fragment on all your layout which is below the navigation below. you should use layout like below and place your fragment within inner layout.
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
android:layout_alignParentBottom="true"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_above="#id/navigation"
android:layout_height="match_parent">
<!--Your code for the fragment here.-->
</RelativeLayout>
</RelativeLayout>

use
android_layout_height="50dp" (in bottom navigation)
and use
android_layoutmarginBottom="50dp" (in web view)
hope it helps.

Categories

Resources