I need to anchor floating action button in android, but have the trouble:
fab will be in navigationview
Here is my activity_main layout.
It includes navigation drawer.
<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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground">
<!-- The main content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- The navigation drawer -->
<include
layout="#layout/nav_drawer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
Navigation drawer layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/clDrawer"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer_view"
app:headerLayout="#layout/anav_header"
android:background="#color/colorPrimary2"
app:itemIconTint="#color/colorIcon"
app:itemTextColor="#color/colorIcon"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/navFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:clickable="true"
android:src="#drawable/plus_icon"
app:backgroundTint="#color/colorIcon"
app:layout_anchor="#id/headerLayout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
And my anav_header for navigation view contains only the few text view.
I need fab to be anchored to the botom of the header, right between header and main content of ND.
The problem is layout_anchor works only if header and nav view are in the same layout. if i use navigationview property headerLayout , layout_anchor doesnt work. Also if i use NavigationView.addHeaderView(), it doesnt work too.
If i include header in navigation view layout by that way
<include
layout="#layout/anav_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
it works, BUT header and navigation view move like different parts. And i need them to act like one navigation drawer.
I need navigation drawer to lookes smth like that.
I have found my way.
First i've removed NavigationView and replaced it with drawer_header.xml with is simple LinearLayout with header image, and with drawer_list just after it with is a LinearLayout too with static menu items.
<?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/colorPrimary2">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:background="#color/colorPrimary2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- <android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary2"
app:headerLayout="#layout/drawer_header"
app:itemIconTint="#color/colorIcon"
app:itemTextColor="#color/colorIcon"
app:menu="#menu/menu_drawer_view" />-->
<include
layout="#layout/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin"/>
<include
layout="#layout/layout_drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/navFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:clickable="true"
android:src="#drawable/plus_icon"
app:backgroundTint="#color/colorIcon"
app:layout_anchor="#id/headerLayout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
So, i made header and menu as LinearLayout, otherwise they both have scrolled, but i need em to scroll together. To add elements in header or menu you can use addView(View v).
Related
So I will have my main-activity layout file below so you can understand what is happening
<?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"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#menu/toolbar"/>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_nav">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation"
app:itemIconTint="#android:color/white"
android:background="#39b54a"
app:labelVisibilityMode="unlabeled">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>
The problem with this layout is that the toolbar on the top and the bottom navigation bar cover content from my fragments. Also one of my fragments has got a recyclerview with many items and I can´t scroll down for some reason ? Is there a way to make the fragments fit exactly between the toolbar and bottomnavigation like resizing itself to fit into that area without cutting content and still make it scrollable ?
Do it like 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_layout"/> <!--include your layout file here -->
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_below="#id/toolbar"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_nav">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:itemIconTint="#android:color/white"
android:background="#39b54a"
app:labelVisibilityMode="unlabeled">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>
And by the way, you are supposed to set a layout resource file into the toolbar layout while including but you are passing the menu resource file. Change that also accordingly...
I have a frame layout in the activity. I have put an action bar and bottom navigation bar in the activity, but the problem is the frame layout is going behind the bottom navigation bar, and it's also not scrolling. I want the frame layout to always remain above the bottom navigation bar.
I have tried giving the bottom navigation drawer a fixed height of "56dp", and layout_margin Bottom="56dp". It works fine, But I don't think it is a good solution, because in some cases, I want to hide the bottom navigation bar.
<?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:background="#fafafa"
android:orientation="vertical"
tools:context=".Activities.Dashboard">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="#ff2729c3"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/navigation_icon"
app:theme="#style/AppTheme.Toolbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/app_logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="38dp"
android:layout_marginTop="4dp"
android:fontFamily="cursive"
android:text="LootBox"
android:textColor="#color/white"
android:textSize="22sp"
android:textStyle="bold" />
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="4dp"
android:layout_marginEnd="56dp"
android:src="#drawable/pin_posts" />
<include
layout="#layout/notification_icon_count_badge"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="4dp"
android:layout_marginRight="16dp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ff9800" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/myDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/fragment_container_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<include layout="#layout/bottom_nav" />
<android.support.design.widget.NavigationView
android:id="#+id/nav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimary"
app:headerLayout="#layout/nav_header"
app:itemBackground="#drawable/drawer_item_bg"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/my_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
</LinearLayout>
// Bottom Navigation Bar Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="#+id/bottomNavi"
android:background="#ff9800"></View>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:itemIconTint="#color/botto_nav_color"
app:itemTextColor="#color/botto_nav_color"
app:menu="#menu/bottom_nav_menu"/>
</RelativeLayout>
I want the frame layout to remain below the toolbar and above the bottom navigation bar.
But what happens, is the frame layout is below the toolbar, but the frame layout is behind the bottom navigation bar.
Try this:
<FrameLayout
android:id="#+id/fragment_container_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="56dp"
android:layout_above="#+id/nav" />
<include android:id="#+id/nav"
layout="#layout/bottom_nav" />
My approach would be to wrap the wrap the bottom navigation Layout you included in a LinearLayout and then wrap the FrameLayout and the new layout containing the bottom navigation bar in a relative layout then position the frame layout above the bottom navigation bar layout such that:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/fragment_container_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="56dp"
android:layout_above="#id/bnve"/>
<LinearLayout
android:id="#+id/bnve"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/bottom_nav" />
</LinearLayout>
</RelativeLayout>
try to place this include tag above Framelayout like
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/myDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/bottom_nav" />
<FrameLayout
android:id="#+id/fragment_container_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="56dp" />
sorry for late answer.. Can you try this ?
<include
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
layout="#layout/bottom_nav" />
I'm currently making an app and is facing this problem:
after I created fragments in a drawermenu my floating button doesn't react to anything anymore. I have asked this question on another forum and their answer was that my Drawerlayout was intercepting the clicks. How can I fix this?
<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:tools="http://schemas.android.com/tools"
tools:openDrawer="start"
android:clickable="false"
android:focusable="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00FFFFFF"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:elevation="4dp"/>
<!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:clickable="false"
android:focusable="false"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start">
<RelativeLayout
android:id="#+id/upper_section"
android:layout_width="match_parent"
android:layout_height="225dp"
android:background="#drawable/bg">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/listview"
android:layout_alignParentBottom="true"
android:layout_gravity="end|bottom"
android:layout_marginBottom="22dp"
android:src="#drawable/ic_add"
app:fabSize="normal" />
</RelativeLayout>
</FrameLayout>
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
Here's how to implement the drawer layout correctly. You seem to have some unwanted layout settings. Try copying the entire layout and replace only what's inside the frame layout :)
I have an activity that has a toolbar and a framelayout where I inject fragments.
This is the layout for that activity:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drwDrawerRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_main_selector"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/viewMainToolbar"
layout="#layout/view_toolbar" />
</LinearLayout>
<FrameLayout
android:id="#+id/frmDrawerContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/toolbar_height"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical" />
<include
android:id="#+id/viewDrawer"
layout="#layout/view_drawer"
bind:name="#{name}"/>
<include
android:id="#+id/viewUserDrawer"
layout="#layout/view_user_drawer"
bind:name="#{name}"/>
</android.support.v4.widget.DrawerLayout>
I have the framelayout with a margin so that the contents from the fragments do not overlay the toolbar, but I set clipChildren and clipToPadding to false as per some other posts I have seen here.
On some fragments however I have a loading view, which I would like to occupy all the screen.
This is a sample fragment:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout_main"
style="#style/Layout.FullScreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout_footer"
android:orientation="vertical">
<TextView
android:id="#+id/textView7"
style="#style/Text.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/login_header" />
<EditText
android:id="#+id/edtMessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:elevation="1dp"
android:ems="10"
android:inputType="textMultiLine" />
<Button
android:id="#+id/btnSend"
style="#style/Button.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/support_button" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_footer"
style="#style/Layout.FullScreen.Footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:id="#+id/footerInfo"
style="#style/Text.White.Small.Centered"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/footer_info" />
</LinearLayout>
<include
layout="#layout/view_loading"
android:visibility="invisible"
bind:loading="#{loading}" />
</RelativeLayout>
Ans this is the included loading view, which I have set with negative margin, hoping it would move up to the top of the screen:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-40dp"
android:background="#color/colorLoadingBackground"
android:clickable="true"
android:visibility="#{loading ? View.VISIBLE : View.GONE}">
</FrameLayout>
Am I missing something here?
Is this doable or do I need to change how I am doing this?
Clarification:
The first / root layout includes a toolbar and the second layout is included within the frame layout of the first. this means that the content of the second layout starts below the toolbar. However, I would like the third layout (a loading screen that is included in the second layout) to have a negative margin so that it overlays the full screen, not just starting below the toolbar.
You need to use CoordinatorLayout then you wont need negative margins. here are the sample layout u can customise according to your need
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior= "#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="My App" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!--include a full screen loading layout here and hide/show according to your need-->
<include layout="#layout/loading_layout/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I am trying to hide appbar when user scrolled recyclerview layout code as per follows:
<?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:fitsSystemWindows="true"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/my_appbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/plp_header_card_view"
app:layout_scrollFlags="scroll|enterAlways" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/item_list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:scrollbars="none" />
</android.support.design.widget.CoordinatorLayout>
I want to hide appbar when this screen intialize & show appbar when user scroll the recyclerview. Please help me to do this one.
The below code is proper way to make toolbar hide when the scroll down.
<?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.support.design.widget.AppBarLayout
android:id="#+id/tabanim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/tabanim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</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.design.widget.CoordinatorLayout>
Apply app:layout_scrollFlags="scroll|enterAlways" on LinearLayout work hide action recycleview scroll.
But you question is hide appbar when this screen intialize & show appbar when user scroll the recyclerview
My suggestion as belowit will help you to achieved target
1. Hide and show toolbar on scroll
2. you can use CollapsingToolbar