Prevent bottom navigation view to hide floating action button - floating-action-button

I am having some trouble making hide_bottom_view_on_scroll_behavior work as wished for the bottom navigation view.
The floating action button is partly hidden by the bottom navigation. I was expecting the fab to be above the bottom navigation since I have set the app:layout_anchor and app:layout_anchorGravity properly.
<?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:id="#+id/main_coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- my content here-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#id/toolbar">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
style="#style/Widget.BloodPressureWatcher.App.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
app:layout_collapseMode="pin"
app:menu="#menu/menu_home" />
<include
<!-- some content-->
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:layout_anchor="#id/bottom_navigation"
app:layout_anchorGravity="top|end"
app:srcCompat="#drawable/ic_round_add_24" />
<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"
app:labelVisibilityMode="labeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:menu="#menu/bottom_navigation_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Related

How can I create a custom InfoWindow layout/background for Google Maps on with a 'stalk'

I have managed to define and use a custom InfoWindow in my Google Maps app on Android, but I can't figure out how to create a similar custom layout to that shown on the right in these examples on developer.google.
I have created a simple rounded box with a red outline as a layout and am using this as the background drawable resouce for the layout:
round_bg_box_white_with_red_border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="#fff" />
<stroke
android:width="2dp"
android:color="#f00" />
</shape>
custom_info_window.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_bg_box_white_with_red_border"
android:orientation="horizontal"
android:padding="5dp">
<TextView
android:id="#+id/fixed_prefix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:maxLines="1"
android:textColor="#f00"
android:textSize="14sp"
android:text="prefix:"
android:textStyle="bold" />
<TextView
android:id="#+id/marker_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textColor="#000"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
Thsi all works with my code, but I'd like to add the down pointing triangle extension to the background/layout so that the InfoWindow sits a little above the marker and points to it - as in the standard Google InfoWindows.
I want the box itself to be scaled to it the content (hence using a rectangle shape), but the 'stalk' that points down to NOT scale. ie the same behaviour as the standard InfoWindows.
One might consider it as a work-around, but here is my approach to the following design outcome:
The custom window consists of the content, the outer layout with a drawable as background and an adapted material down arrow icon with 0dp margin.
Your background can easily be updated with yours, despite the fact that a border would not show up. That would need some customization if necessary. The vector code of the triangle might be integrated in another drawable combining the two or smth.
After setup of your infoWindow overwrite
#Override
public View getInfoWindow(#NonNull Marker marker) {
View infoWindow = getLayoutInflater().inflate(R.layout.info_contents, requireView().findViewById(R.id.map), false);
TextView title = infoWindow.findViewById(R.id.location_marker_title);
title.setText(marker.getTitle());
TextView snippet = infoWindow.findViewById(R.id.location_marker_snippet);
snippet.setText(marker.getSnippet());
return infoWindow;
}
My layout looks like this (important the 0dp margin bottom, layout may be simplified):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:cropToPadding="true">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/bg_tooltip"
android:gravity="center_horizontal|center_vertical"
android:maxWidth="250dp"
android:maxHeight="200dp"
android:minWidth="200dp"
android:orientation="horizontal"
android:padding="#dimen/activity_vertical_margin"
app:layout_constraintBottom_toTopOf="#+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/location_marker_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="230dp"
android:text=""
android:textColor="#color/textDark"
android:textFontWeight="600"
android:textSize="20sp" />
<TextView
android:id="#+id/location_marker_snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="230dp"
android:text=""
android:textColor="#color/textDark"
android:textFontWeight="400"
android:textSize="14sp"
/>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageView5"
android:layout_width="80dp"
android:layout_height="20dp"
android:layout_margin="0dp"
android:cropToPadding="true"
android:adjustViewBounds="true"
android:padding="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_drop_down_24"
app:tint="#color/backgroundAltDark"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My background is a simple shape with round corners:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_horizontal">
<item>
<shape>
<solid android:color="#color/backgroundAltDark" />
<corners android:radius="#dimen/radius_small" />
</shape>
</item>
</layer-list>
And the arrow looks after customized like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="30"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="#android:color/white"
android:pathData="M7,10l5,5 5,-5z"/>
</vector>

BottomSheet move to top of screen when changing visibility of its component

I have a bottom sheet with a NestedScrollView inside (see below). When I press on a FAB button, I want to make some parts in this NestedScrollView invisible. But when I change some linearlayouts visibilities to GONE, bottomsheet fly aways from the top.
My XML 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:id="#+id/messageOptionBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/back_miscellaneous"
android:gravity="center"
android:orientation="vertical"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/textSecondary" />
<LinearLayout
android:id="#+id/layoutDeleteMessage"
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_margin="#dimen/_10sdp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:animateLayoutChanges="true"
tools:ignore="UseCompoundDrawables">
<ImageView
android:layout_width="#dimen/_22sdp"
android:layout_height="#dimen/_22sdp"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_remove" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:includeFontPadding="false"
android:text="#string/delete_message"
android:textColor="#color/textSecondary"
android:textSize="#dimen/_12ssp" />
<TextView
android:id="#+id/textConfirmDelete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:gravity="end"
android:includeFontPadding="false"
android:text="#string/confirm"
android:textColor="#color/red"
android:textSize="#dimen/_12ssp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Your bottom sheet is moving top because you are using
android:animateLayoutChanges="true"
remove this line from your layoutDeleteMessage (Linear layout)
Hope this solve your problem

Hide Cardview & ImageView inside CollapsingToolbarLayout

Whenever I'll scroll my activity, I want toolbar should remain stable and else everything should go below the toolbar. I have used CollapsingToolbarLayout and AppBarLayout, but still I'm not getting proper solution.
Here in this code, CircleImageView and CardView are comming above the toolbar while scrolling.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/contact_photo_height"
android:elevation="8dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsideToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorAccent"
app:title="back"
app:titleEnabled="false"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/verify_image"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool_bar"
app:title="back"
app:titleTextColor="#color/white"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ToolbarTheme"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You are missing one of the most important property app:layout_behavior in card view.
If you want eveything else like cardview, circular ImageView and rest to scroll till toolbar then club them in Relative or LinearLayout and assign app:layout_behavior="#string/appbar_scrolling_view_behavior".
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</LinearLayout>
Now, everything will just scroll properly. Hope it helps.

recycle view inside scroll view not scrolling

Recycle view is not scrolling inside Scroll View. I have Used Nested Scroll View instead but it doesn't work either. here is My xml code
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/coordinatorlayout"
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">
<include layout="#layout/content_main" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:behavior_scrolling_appbar_peek_height="#dimen/bottom_sheet_peek_height"
app:layout_behavior="com.example.deepdepindersingh.adore.ui.lib.ScrollingAppBarLayoutBehavior">
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:behavior_peekHeight="#dimen/bottom_sheet_peek_height"
android:paddingTop="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingBottom="8dp"
android:id="#+id/bottom_sheet"
app:layout_behavior="com.example.deepdepindersingh.adore.ui.lib.BottomSheetBehaviorGoogleMapsLike"
app:anchorPoint="#dimen/anchor_point"
android:fitsSystemWindows="true">
<ScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
android:layout_below="#+id/llOptions">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:background="#fff">
</android.support.v7.widget.RecyclerView>
</ScrollView>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|right|end"
android:src="#android:drawable/ic_dialog_map"
android:layout_margin="#dimen/fab_margin"
app:layout_behavior="com.example.deepdepindersingh.adore.ui.lib.ScrollAwareFABBehavior"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
and i am using Grid Adapter to display array list
grid-Single.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/grid_image"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:id="#+id/grid_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textSize="9sp" />
</LinearLayout>
Please Help in solving my problem.

Placing LinearLayout to the bottom of other LinearLayout

I am trying to use Caldroid calendar widget and position it to the bottom of the screen. But for some reason it is not going to the bottom and I see some free space below the widget.
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<LinearLayout
android:id="#+id/r1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="#+id/lv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
/>
<LinearLayout
android:id="#+id/calendar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
</LinearLayout>
</LinearLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:dividerHeight="0dp"
android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>
I am replacing calendar1 with the caldroid Fragment programatically.
Below is my screen. Please let me know how I can push the calendar widget to the bottom. I tried layout_weight, layout_gravity but no effect.
(EDIT)With Relative Layout
![<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<LinearLayout
android:id="#+id/r1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:id="#+id/lv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
/>
<LinearLayout
android:id="#+id/calendar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:dividerHeight="0dp"
android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>][2]
I guess if you try this, it will work. Here I'm putting the two lieaner layouts inside a relative layout, so then I can manipulate where they are going to be on the screen.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/r1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ListView
android:id="#+id/lv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true" />
</LinearLayout>
<LinearLayout
android:id="#+id/calendar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
>
</LinearLayout>
</RelativeLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:dividerHeight="0dp"
android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>
Hope it helps!

Resources