floating action button blocks bottom navigation bar - android

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>

Related

Android Edit Text not visible while keyboard is on

layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:fitsSystemWindows="true"
tools:context=".activity.LaunchActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<include
android:id="#+id/header_relative_layout"
layout="#layout/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<RelativeLayout
android:id="#+id/body_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/footer_linear_layout"
android:layout_below="#+id/header_relative_layout"
android:layout_centerInParent="true" />
<include
android:id="#+id/footer_linear_layout"
layout="#layout/footer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp" />
</RelativeLayout>
</RelativeLayout>
I want to move whole layout up when keyboard is visible but,
only footer layout (Included layout) moves up.
Behind the keyboard there are two more edit text and one button.
android:windowSoftInputMode="adjustResize" is added in manifest activity.
In android:id="#+id/body_relative_layout" I've added layout programatically with layoutInflater.
bodyRelativeLayout.removeAllViews();
bodyRelativeLayout.addView(bodyView);
You can use NestedScrollView for scrolling up whole layout like below:
<RelativeLayout><!--Main Layout-->
<androidx.core.widget.NestedScrollView>
<!--Layout code for edittext-->
</androidx.core.widget.NestedScrollView>
<LinearLayout>
<! You can directly use include tag here-->
<!--bottom view that will scroll up when keyboard show-->
</LinearLayout>
</RelativeLayout>
Example:
<?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"
android:fitsSystemWindows="true"
android:id="#+id/rlMainLayout">
<androidx.core.widget.NestedScrollView
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:isScrollContainer="true"
android:layout_above="#+id/footer_linear_layout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/header_relative_layout"
layout="#layout/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<RelativeLayout
android:id="#+id/body_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header_relative_layout"
android:layout_centerInParent="true" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
<include
android:id="#+id/footer_linear_layout"
layout="#layout/footer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp" />
</RelativeLayout>
In Manifest file:
android:windowSoftInputMode="adjustResize

Make SlidingUpPanelLayout stand above the bottom navbar

How to make SlidingUpPanelLayout stand above the bottom navbar? Now my sliding panel standing below navbar because in code of "SlidingUpPanelLayout" sliding layout have to be below of main layout. I have no idea how to do it
how its looks like now
There is my xml file
<com.sothree.slidinguppanel.SlidingUpPanelLayout 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/nav_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
tools:context=".NavActivity"
app:umanoPanelHeight="70dp"
app:umanoShadowHeight="5dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:background="#9275B8FA"
android:id="#+id/nav_back" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom"
android:id="#+id/fragment_container"/>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/bottom"
android:layout_alignParentBottom="true"
android:layout_height="48dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_navbar"
android:background="#color/blue"
app:itemIconTint="#color/whiteDarker"
app:labelVisibilityMode="unlabeled"
app:itemTextColor="#color/white"
/>
</com.google.android.material.appbar.AppBarLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="#layout/mini_player" />
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
A nice way would be to use a RelativeLayout as parent then set the Panel and Nav Bar as children. Here's a quick example:
<?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">
<!-- Notice the attribute layout above -->
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/nav_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:layout_above="#+id/bottom_navigation"
tools:context=".NavActivity"
app:umanoPanelHeight="70dp"
app:umanoShadowHeight="5dp">
<!-- Fragment container here -->
<!-- Mini Player here -->
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
<!-- Notice the alignParentBottom true -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navbar"
android:background="#color/blue"
app:itemIconTint="#color/whiteDarker"
app:labelVisibilityMode="unlabeled"
app:itemTextColor="#color/white" />
</RelativeLayout>

Android RecyclerView Gravity issue

I am using DrawerLayout to show Navigation Drawer, in that A NavigationView, the xml code is :
MyDrawerLayout.xml
<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">
<include layout="#layout/layout_navigation_list" />
</android.support.design.widget.NavigationView>
layout_navigation_list.xml
<?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="wrap_content"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/headerLayout"
layout="#layout/nav_header_dash_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:gravity="top" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/headerLayout"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/white"
android:foregroundGravity="bottom" />
</RelativeLayout>
In the RecyclerView i have only 3 items to be shown, and they are aligning on the top of the RecyclerView layout which is i don't want. Hence my question here is , how to send those items to the bottom of the RecyclerView (just like shown in the image).
Set match_parent instead wrap_content field layout_height in relativeLayout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
Insert a ConstraintLayout
<?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"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/headerLayout"
layout="#layout/nav_header_dash_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:gravity="top" />
<android.support.constraint.ConstraintLayout
android:layout_below="#id/headerLayout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
You should have to MATCH_PARENT height instead of WRAP_CONTENT in root relative layout in file layout_navigation_list.xml. So it looks like,
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
...
...
...
</RelativeLayout>
Notes: Gravity won't work with relative layouts.

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.

android layout with fragment breaks when toolbar is there

Couldn't find a more appropriate title but my problem is the following. I have a LinearLayout that contains another LinearLayout and a fragment. I also want to add the toolbar but when I do so, then I only see the toolbar and the other screen is just white.
Here is the layout:
<?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"
android:orientation="horizontal"
tools:context="xeniasis.mymarket.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:weightSum="4">
<LinearLayout
android:id="#+id/categories_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="20dp">
<ExpandableListView
android:id="#+id/categories_listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<fragment
android:id="#+id/mainPane"
android:name="xeniasis.mymarket.Products"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
tools:layout="#layout/activity_main" />
</LinearLayout>
</LinearLayout>
Toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
And the fragment layout:
<?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"
android:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeRefreshContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="#dimen/activity_vertical_margin">
<GridView
android:id="#+id/productsGridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:numColumns="3"></GridView>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="8dp"
android:clickable="true"
android:elevation="5dp"
android:src="#android:drawable/ic_menu_search" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
This only happens when I have a fragment, cause I previously had the same xml with a static layout where the fragment is now.
The problem is that you used a LinearLayout with
android:orientation="horizontal"
and since the toolbar has match_parent as width it occupies all the screen.
Try to use
android:orientation="vertical"
in the root layout

Categories

Resources