Floating action button on top of map fragment - android

I want to Place floating action button on top of map fragment.
My map fragment is completely filled the entire screen. When I place a floating action button it is not coming on top of map fragment
Please refer the image attached:
Please find layout code here
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
xmlns:android="http://schemas.android.com/apk/res/android"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_small"
>
<fragment
android:id="#+id/autocomplete_fragment"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<!--<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bell32"
android:visibility="invisible"
/>
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/alarm_on_switch"
android:layout_gravity="right|top"
android:layout_marginRight="#dimen/margin_small"
android:drawableLeft="#drawable/bell32"
/>-->
</android.support.v7.widget.CardView>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
tools:context="reminder.locrem.com.locationreminder.MapsActivity"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_margin="16dp"
android:src="#drawable/done"
app:layout_anchorGravity="bottom|right|end"
app:elevation="4dp" />
</LinearLayout>
</ScrollView>

You can use FrameLayout to acieve what you want.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_small">
<fragment
android:id="#+id/autocomplete_fragment"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v7.widget.CardView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="reminder.locrem.com.locationreminder.MapsActivity" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_margin="16dp"
android:src="#drawable/done"
app:elevation="4dp"
app:layout_anchorGravity="bottom|right|end" />
</FrameLayout>
</LinearLayout>
</ScrollView>

Hi you can try to this code..
<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"
tools:context=".MainActivity">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="30dp"
android:background="#android:color/transparent"
android:clickable="true"
android:onClick="myLocationCall"
android:rotation="0" />
</RelativeLayout>

I had a similar requirement, I used android material floating action button.
The button came with material design.
The trick was to add the button inside the fragment and then change the margin gravity accordingly.
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
tools:context=".ui.Maps.MapsActivity" >
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:layout_gravity="end|bottom"
android:layout_margin="8dp"
android:src="#android:drawable/ic_menu_revert" />
</fragment>

You just need to change the android:layout_gravity="top|right"
<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">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_margin="16dp"
android:src="#drawable/ic_done"
app:layout_anchor="#id/lvToDoList"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

Related

How to get buttons to show over maps activity

I have tried like 5 different ways to try and get buttons to show over a maps activity, but no matter what I try I can't seem to get them to show up, anybody know what I am doing wrong? This pertains to android studio
Here is code from activity_maps.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/currentloca"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:backgroundTint="#818181"
android:orientation="vertical"
android:visibility="visible">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="553dp"
tools:context=".MapsActivity" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<Button
android:id="#+id/zoomin"
android:layout_width="205dp"
android:layout_height="wrap_content"
android:onClick="onZoom"
android:text="Zoom In" />
<Button
android:id="#+id/zoomout"
android:layout_width="205dp"
android:layout_height="wrap_content"
android:onClick="onZoom"
android:text="Zoom Out" />
</androidx.appcompat.widget.LinearLayoutCompat>
</FrameLayout>
As suggested in comment, I think your need is a relative layout. Here is a example.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="553dp"
tools:context=".MapsActivity" />
<LinearLayout
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button />
<Button />
</LinearLayout>
</RelativeLayout>
This way the buttons will appears in the top of the map fragment.
You should use FrameLayout or its sort instead of LinearLayout. Below is just showing a structure for an explanation:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button />
<Button />
</LinearLayout>
</FrameLayout>
LinearLayout lays its child views on a horizontal or vertical line. While FrameLayout over-lays its children.
About your actual code, at first, replace (overwrite) the surrounding (outer most) LinearLayout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/currentloca"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#818181"
android:orientation="vertical"
android:visibility="visible">
(...)
</LinearLayout>
with FrameLayout:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/currentloca"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#818181"
android:orientation="vertical"
android:visibility="visible">
(...)
</FrameLayout>
Remove the first parent LinearLayout from your code.
Updated code should look like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/currentloca"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#818181"
android:orientation="vertical"
android:visibility="visible">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="555dp">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="553dp"
tools:context=".MapsActivity" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<Button
android:id="#+id/zoomin"
android:layout_width="205dp"
android:layout_height="wrap_content"
android:onClick="onZoom"
android:text="Zoom In" />
<Button
android:id="#+id/zoomout"
android:layout_width="205dp"
android:layout_height="wrap_content"
android:onClick="onZoom"
android:text="Zoom Out" />
</androidx.appcompat.widget.LinearLayoutCompat>
</FrameLayout>
</RelativeLayout>
If you want your Views to potentially overlap, use a FrameLayout. If you want them displayed linearly, use a LinearLayout
Well, you should use ConstriantLayout and LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".Activities.Maps">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal"
map:layout_constraintEnd_toEndOf="parent"
map:layout_constraintStart_toStartOf="parent"
map:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/zoomin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_weight="1"
android:onClick="onZoom"
android:text="Zoom In" />
<Button
android:id="#+id/zoomout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_weight="1"
android:onClick="onZoom"
android:text="Zoom Out" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Floating action button not visible over the Google Map in Android Studio

My screen has a AutoComplete Google Search at the top, Google Maps below and a floating action button at the bottom end.
When I try to add a floating action button over Google Maps at the bottom end, the button is not visible on the screen.
This is my activity_maps.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MapsActivity"
android:orientation="vertical"
android:weightSum="1">
<fragment
android:id="#+id/place_autocomplete"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="55dp"
/>
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="wrap_content"
android:layout_height="35dp">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="8dp"
android:layout_marginBottom="112dp"
android:src="#android:drawable/ic_menu_search"/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
Try 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"
xmlns:tools="http://schemas.android.com/tools"
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">
<fragment
android:id="#+id/place_autocomplete"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="55dp" />
</android.support.design.widget.AppBarLayout>
<fragment
android:id="#+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:src="#android:drawable/ic_menu_search" />
</android.support.design.widget.CoordinatorLayout>

Android bottom sheet

I have an activity that includes a fragment, inside it I have a map using google maps api, and I want to add a bottom sheet which should automatically move up my location floating button until it reach a medium height.
Here is my fragment:
<?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.v4.widget.DrawerLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/my_location_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="66dp"
app:backgroundTint="#ffffff"
app:elevation="6dp"
app:layout_anchor="#id/mapView"
app:layout_anchorGravity="bottom|right|end"
app:pressedTranslationZ="12dp"
app:srcCompat="#drawable/ic_my_location_black_24dp" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="350dp"
android:background="#android:color/holo_blue_light"
app:behavior_hideable="false"
app:behavior_peekHeight="55dp"
android:clipToPadding="true"
app:layout_behavior="#string/bottom_sheet_behavior">
<FrameLayout
android:id="#+id/job_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="2dp" />
</android.support.v4.widget.NestedScrollView>
I want to archive something like that, look at the my location button:
https://www.youtube.com/watch?v=iwpR_uzqTq4
Try anchor your fab with your sheet and put the anchor gravity as top|right as follow
<?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.v4.widget.DrawerLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="350dp"
android:background="#android:color/holo_blue_light"
app:behavior_hideable="false"
app:behavior_peekHeight="55dp"
android:clipToPadding="true"
app:layout_behavior="#string/bottom_sheet_behavior">
<FrameLayout
android:id="#+id/job_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="2dp" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/my_location_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="66dp"
app:backgroundTint="#ffffff"
app:elevation="6dp"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|end"
app:pressedTranslationZ="12dp"
app:srcCompat="#drawable/ic_my_location_black_24dp" />
</android.support.design.widget.CoordinatorLayout>

Linear Layout not showing some elements

I am trying to show three elements search box, google map and one button in vertical order. The problem is only search box and map show and below this no button is displayed. I have set orientation as vertical. Below is my code, please suggest any solution.
<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="mypackage">
<fragment
android:id="#+id/place_autocomplete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
/>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context="mypackage" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Try this make ScrollView as your root layout like below code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:fillViewport="true">
<LinearLayout
tools:context="mypackage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="#+id/place_autocomplete"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context="mypackage" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</ScrollView>
Or Provide weight to your fragments as per your requirement like this
<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="mypackage">
<fragment
android:id="#+id/place_autocomplete"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content" />
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:layout_weight="1"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context="mypackage" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
SupportMapFragment is suggested to be set with android:layout_height="match_parent", so a linear layout with another view below the map won't work. You can achieve that by using a relative layout:
<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="mypackage">
<fragment
android:id="#+id/place_autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button" />
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/place_autocomplete"
android:layout_above="#id/button2"
tools:context="mypackage" />
</RelativeLayout>

Add floating button on a CardView and RecyclerView

I have this problem to accommodate my floating button, and I do not understand why it does not work.
I would appreciate your response since I can not find the reason why this is happening, one more detail when scrolling or reloading the fragment some of the floating buttons will be accommodated.
And sorry for my English.
<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="wrap_content"
android:background="#color/colorBackground"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.CardView
android:id="#+id/mRequestCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:elevation="100dp"
android:orientation="horizontal"
app:cardBackgroundColor="#color/colorWhite"
app:cardCornerRadius="3dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/vDivisor"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/colorGreen" />
...
</RelativeLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="#dimen/fab_margin"
android:backgroundTint="#color/colorPurple"
android:scaleType="centerCrop"
android:src="#drawable/ic_route_direction"
app:layout_anchor="#id/mRequestCard"
app:layout_anchorGravity="right|end|bottom" />
</android.support.design.widget.CoordinatorLayout>
And this is my RecyclerView Which is inflated in a fragment
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.HistorialFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerRequest"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
And this is my fragment, where I show the RecyclerView
<FrameLayout 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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.test.MainActivity"
tools:showIn="#layout/app_bar_main">
</FrameLayout>
you should try RelativeLayout like this
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorBlack"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="#dimen/activity_corner"
android:layout_marginBottom="#dimen/activity_margin">
<!--your cardview item here-->
</android.support.v7.widget.CardView>
</RelativeLayout>
for your RecyclerView item
Check if this helps you:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.CardView
android:id="#+id/mRequestCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:elevation="100dp"
android:orientation="horizontal"
app:cardBackgroundColor="#color/colorWhite"
app:cardCornerRadius="3dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/vDivisor"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/colorGreen" />
...
</RelativeLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:backgroundTint="#color/colorAccent"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher"
app:layout_anchor="#id/mRequestCard"
app:layout_anchorGravity="right|end|bottom" />
</RelativeLayout>
try this use RelativeLayout and make your FloatingActionButton property android:layout_alignParentBottom="true" and
android:layout_alignParentRight="true" like below code
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorBlack"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="#dimen/activity_corner"
android:layout_marginBottom="#dimen/activity_margin">
</android.support.v7.widget.CardView>
</RelativeLayout>

Categories

Resources