floating action button at bottom right - android

I'm using this xml, which contains a single ListView and a Floating Action Button. I want the FAB to always be at bottom right(but not too close to borders of screen) but it just fits the list's last item(so when the list has a single item, it's getting at top right)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.reminder.other_activities.AllSimpleRemindersActivity">
<com.baoyz.swipemenulistview.SwipeMenuListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/simpleRems"
android:dividerHeight="0dp"
android:divider="#null"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<RelativeLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:layout_margin="10dp"
android:id="#+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#FF0000"
app:borderWidth="0dp"
app:elevation="8dp"
app:layout_anchor="#id/test"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

Try setting your SwipeMenuListView height to match_parent and remove your test relative layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.reminder.other_activities.AllSimpleRemindersActivity">
<com.baoyz.swipemenulistview.SwipeMenuListView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/simpleRems"
android:dividerHeight="0dp"
android:divider="#null"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<android.support.design.widget.FloatingActionButton
android:layout_margin="10dp"
android:id="#+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#FF0000"
app:borderWidth="0dp"
app:elevation="8dp"
android:layout_gravity="bottom|right"
app:layout_anchor="#id/simpleRems"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

Related

floating action button blocks bottom navigation bar

I want my floating action button to be over the listview and above the navigation bar but i cant seem to make it work. (the include layour is the navigation bar).
This is how it looks right now
<?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=".SessionsList">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/lvSessions"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_baseline_add_24"
android:contentDescription=""
android:layout_margin="16dp" />
<include layout="#layout/activity_base"/>
</FrameLayout>
</LinearLayout>
This is the navigation bar layout code:
<?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"
tools:context=".BaseActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
app:itemBackground="#color/orange"
app:itemIconTint="#drawable/selector"
app:itemTextColor="#drawable/selector"
android:layout_gravity="bottom"
app:menu="#menu/menu_navigation" />
</LinearLayout>
I tried putting it in a frame layout and moving things around but I cant get it to work like I want it to.
Change your main layout like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/lvSessions"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:id="#+id/baseLayout"
layout="#layout/activity_base"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_above="#+id/baseLayout"
android:layout_alignParentEnd="true"
android:src="#drawable/g1" />
</RelativeLayout>
</FrameLayout>
And also change activity_base layout like this
<LinearLayout 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.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:itemBackground="#color/black" />
</LinearLayout>

How to align fab to the bottom right of screen inside a fragment in a recycler view?

I have "activity_main" in which I'm using a Collapsing Toolbar and a Fragment Container. Inside container I'm adding and replacing multiple fragments one of them is "activity_user_shops_list" which is a recycler view. I want to align fab to the bottom right of the screen inside this list fragment. I can't find a way to align it. Any help is appreciated.
activity_main.xml:
<?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"
android:orientation="vertical"
android:gravity="center_horizontal"
android:background="#F3F3F3">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/id_appbar_layout_m"
android:layout_width="match_parent"
android:layout_height="200dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/id_collapsing_toolbar_m"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:titleCollapseMode="scale"
app:title="#string/user_name"
app:expandedTitleGravity="center_horizontal"
app:expandedTitleMarginTop="160dp"
android:background="#F3F3F3">
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#mipmap/ic_launcher"
app:shapeAppearanceOverlay="#style/circleImageView"
android:layout_gravity="center"/>
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/id_appbar_layout_m"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/id_fragment_container_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
fragment_user_shops_list.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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/null_gray">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/id_recycler_view_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/id_floating_button_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/add_a_shop"
android:src="#drawable/ic_plus"
app:tint="#color/white"
app:maxImageSize="30dp"
app:useCompatPadding="true"/>
</RelativeLayout>
Edit:
After adding android:layout_alignParentRight="true" and
android:layout_alignParentBottom="true" and making all fab parents match_parent, It still not working.
No mater what I do result is same. Here is the result (Gray area is "fragment_user_shops_list"):
You need to set android:layout_alignParentRight and android:layout_alignParentBottom to your FloatingActionButton to align to bottom right corner
Here's what updated xml file should look like:
<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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/id_recycler_view_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/id_floating_button_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:contentDescription="Shop"
android:src="#android:drawable/btn_plus"
app:maxImageSize="30dp"
app:tint="#android:color/white"
app:useCompatPadding="true" />
</RelativeLayout>

Arrange views in Coordinator Layout

I have problem making my Frame layout be below Bottom Navigation Drawer (yes I put it on the top :)). Right now the top of Frame layout is hidden by BND because it is aligned with parents top just like BND instead of being aligned with BNDs bottom.
Here is the 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:id="#+id/coordID">
<android.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/m_navigation"
/>
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:srcCompat="#drawable/ic_settings"
app:layout_insetEdge="bottom" />
</android.support.design.widget.CoordinatorLayout>
You should try to wrap them in RelativeLayout something like this:
<?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:id="#+id/coordID">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/m_navigation" />
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/BND_ID"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_gravity="end|bottom"
app:layout_anchor="#+id/relativeLayout"
app:layout_anchorGravity="right|bottom"
app:layout_insetEdge="bottom"
app:srcCompat="#drawable/ic_settings" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout is just a super-powered FrameLayout as described in the docs.
That's why the views are overlapping. Unless you want to use any of the behavior that this view group offers I would suggest you to change to a different layout setup such as
<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">
<android.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/m_navigation" />
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/BND_ID">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_gravity="end|bottom"
app:layout_insetEdge="bottom"
app:srcCompat="#drawable/ic_settings" />
</RelativeLayout>
or make use of one of the coordinatorLayout behaviors
eg.
<?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:id="#+id/coordID">
<android.support.design.widget.BottomNavigationView
android:id="#+id/BND_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
//Add the line below
app:layout_scrollFlags="scroll|enterAlways"
app:menu="#menu/m_navigation"/>
<FrameLayout
android:id="#+id/fID2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
//Add the line below
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/dummyFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:srcCompat="#drawable/ic_settings"
app:layout_insetEdge="bottom" />
</android.support.design.widget.CoordinatorLayout>
so when whatever you put inside the frameLayout scroll your bottom nav will hide.

CoordinatorLayout add padding between elements

I want to have two FloatingActionButtons in my CoordinatorView. But when I try to add margin to the top FloatingActionButton, It applies from end of the view - It should add space between FloatingActionButtons.
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
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.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginBottom="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top" />
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</android.support.design.widget.CoordinatorLayout>
SOLUTION 1:
Add another View to make a gap between two FAB's. Set the anchor of View to top position of the wordpackAddButton and set the anchor of importWordpack to top-right position of the View.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
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">
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<View
android:id="#+id/gap"
android:layout_width="16dp"
android:layout_height="16dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top">
</View>
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:src="#drawable/add"
app:elevation="5dp"
app:layout_anchor="#id/gap"
app:layout_anchorGravity="top|center" />
</android.support.design.widget.CoordinatorLayout>
SOLUTION 2:
Wrap two FAB into a LinearLayout and anchor this layout to the bottom-right position of ListView.
Here is an workaround:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_anchor="#id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="16dp"
android:background="#android:color/transparent"
android:clipToPadding="false">
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:src="#drawable/add"
app:elevation="5dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:src="#drawable/add"
app:elevation="5dp" />
</LinearLayout>
<ListView
android:id="#+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</android.support.design.widget.CoordinatorLayout>
OUTPUT:
Add this view after Fab button and change top level fab's
layout_anchor to transparent_view.
<View
android:layout_width="8dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top"
app:useCompatPadding="false"
android:layout_gravity="end"
android:background="#android:color/transparent"
android:id="#+id/transparent_view"
android:layout_height="8dp"/>
Hope it helps.
I have faced a similar problem while implementing a FAB Menu.
You can solve this problem by wrapping the second FAB in a FrameLayout like so:
<android.support.design.widget.FloatingActionButton
android:id="#+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchorGravity="bottom|right|end" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="56dp"
app:layout_anchor="#id/wordpackAddButton"
app:layout_anchorGravity="top|right">
<android.support.design.widget.FloatingActionButton
android:id="#+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchor="#id/wordpackAddButton" />
</FrameLayout>
This might be a bit of a hacky solution but it is simple and it works. The padding value of the FrameLayout is set to 56dp since that is the size of the FAB.

EmptyView of ListView hides BottomNavigationView

I have an AppCompatActivity with a listview with the layout below
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/user_title"
android:background="#drawable/user_title_color"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Large"/>
<ListView android:id="#+id/joggings_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:drawSelectorOnTop="false"/>
<LinearLayout
android:id="#+id/empty_list"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center">
<TextView
android:text="No joggings yet"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/empty_add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_jogging"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_plus"
app:borderWidth="0dp" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:foregroundTint="#color/colorAccent"
app:itemTextColor="#color/bottom_navigation_color"
app:itemIconTint="#color/bottom_navigation_color"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
and in my code I have
mListView.setEmptyView(findViewById(R.id.empty_list));
in order to display a message and an "add" button when the list is empty. My problem is that when the list is empty the BottomNavigationView is hidden and the user cannot navigate to another activity.
One possible solution I can think of is to add another BottomNavigationView with the same items in the empty layout but that seems ugly.
Any other solution?
Set empty_list height to wrap_content
Your ListView and it's empty view should have the same layout attributes if you want them to occupy the same space. In your case, they should both be
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
Also, you should put the FloatingActionButton outside of the LinearLayout, or else it will affect the size of your ListView/empty view. It is also meant to be a direct child of CoordinatorLayout, otherwise its default behaviors do not work.
The following layout worked fine. The basic idea is that coordinateLayout contains listview and FloatingActionButton and empty view. CoordinateLayout is contained in an outer vertical LinearLayout which also contains the header textview and the BottomNavigationView
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/user_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/user_title_color"
android:textAppearance="#android:style/TextAppearance.Large"
android:textColor="#android:color/white" />
<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/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ListView
android:id="#+id/joggings_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:drawSelectorOnTop="false" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_jogging"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_plus"
app:borderWidth="0dp"
app:layout_anchor="#id/joggings_list"
app:layout_anchorGravity="bottom|right|end" />
<LinearLayout
android:id="#+id/empty_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No joggings yet" />
<Button
android:id="#+id/empty_add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:foregroundTint="#color/colorAccent"
app:itemIconTint="#color/bottom_navigation_color"
app:itemTextColor="#color/bottom_navigation_color"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>

Categories

Resources