I would like to make my activity like Google Maps.
I have added a bottom sheet but, when I run the application the bottom sheet appeared below the maps while other activities appear above it without any problem.
How to make it appear above the map like this?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_marginBottom="56dp"/>
</RelativeLayout>
<!-- Bottom Sheet Content -->
<include layout="#layout/content_bottom_sheet" android:fitsSystemWindows="true"/>
</android.support.design.widget.CoordinatorLayout>
Use below code
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:gravity="bottom|center_horizontal"
android:orientation="horizontal"
android:layout_gravity="bottom">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/texi_white"
android:gravity="center"
android:text="Map"
android:textAllCaps="false"
android:textColor="#android:color/darker_gray"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/food_white"
android:gravity="center"
android:text="List"
android:textAllCaps="false"
android:textColor="#android:color/darker_gray"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
`
Related
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>
I'm creating an android app and I've just added a Navigation drawer into one of my activities. I've successfully added it in, however, it now overlaps the content of the page. The jobs text and the rest should be below the ActionBar.
I've tried adding a margin to the top of the jobs text which does push it down as I wish. Is there a better way to move it down?
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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/jobListPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
tools:context="com.kitkat.crossroads.Jobs.JobsActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Jobs"
android:fontFamily="#font/bebasneueregular"
android:textSize="30dp"
android:textAlignment="center"
tools:layout_editor_absoluteX="163dp"
tools:layout_editor_absoluteY="16dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textName"
android:layout_width="125dp"
android:layout_height="50dp"
android:layout_marginLeft="60dp"
android:fontFamily="#font/bebasneueregular"
android:gravity="center_vertical"
android:text="Job Name"
android:textSize="15dp"
android:textColor="#FF000000"
android:visibility="visible" />
<TextView
android:id="#+id/textFrom"
android:layout_width="100dp"
android:layout_height="50dp"
android:fontFamily="#font/bebasneueregular"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/textName"
android:gravity="center_vertical"
android:text="From"
android:textSize="15dp"
android:textColor="#FF000000"
android:visibility="visible" />
<TextView
android:id="#+id/textTo"
android:layout_width="100dp"
android:layout_height="50dp"
android:fontFamily="#font/bebasneueregular"
android:textSize="15dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:text="To"
android:textColor="#FF000000"
android:visibility="visible" />
</LinearLayout>
<ExpandableListView
android:id="#+id/jobListView12345"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Becoz you assign the gravity="top" in Linearlayout so its happens
so u remove this gravity see my below code:
<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/jobListPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
//remove gravity="top" from hear
tools:context="com.kitkat.crossroads.Jobs.JobsActivity">
if your problem not solve then u can take android:layout_marginTop="20dp" in inner Linearlayout
see below code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:orientation="vertical">
Don't take a include in LinearLayout. Becoz its change your actionbar so u can only remove gravity and assign margin top
I believe you should put
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
inside
<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/jobListPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
tools:context="com.kitkat.crossroads.Jobs.JobsActivity">
The reason why I was having the overlap was because I put the page content in the activity_main.xml layout and not the content_main.xml. Putting the content in that layout sorted the issue out and put the content below the action bar.
I have a problem when create bottomsheet in android (look likes google maps)
when i come to maps ui,but bottom sheet does not hide
Expectation: Click on marker and appear the bottom sheet likes google maps
Here is my xml :
<?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="com.example.dangquang.stackexchange.activity.MapActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/actMap_Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextColor="#android:color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_maps"
android:textSize="#dimen/title_nav_toolbar" />
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/actMap_tbDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/actMap_tvDuration"
style="#style/title_detail_direction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/duration_icon" />
<TextView
android:id="#+id/actMap_tvDistance"
style="#style/title_detail_direction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/distance_icon" />
<Spinner
android:id="#+id/actMap_spnMode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<TextView
android:id="#+id/actMap_tvDirection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:textColor="#android:color/white"
android:textSize="#dimen/_14sdp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<EditText
android:id="#+id/actMap_etSearch"
style="#style/action_searchMap"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/place_autocomplete_search_hint"
android:imeOptions="actionSearch"
android:inputType="text" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/actMap_frgMaps"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
>
<android.support.v4.widget.NestedScrollView
android:id="#+id/actMap_BottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/actMap_tvDetailName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/item_title_size"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/actMap_tvDetailPoint"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/actMap_tvDetailDuration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/car_icon"
style="#style/navigation_item_text" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
</LinearLayout>
You can set bottomsheet invisible on onCreate with this actMap_BottomSheet.setVisibility(View.INVISIBLE) and make it visible whenever you want.
But your xml is so complex and has so many nested levels which causes to performance issues. I suggest you to use constraint layout.
I tried adding the floating action button but just not able to get it to position in the expected place.I've the xml along with the obtained and expected image.
Actually I want two such floating action buttons one on top of the other.
MapsActivity
<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:id="#+id/maplinear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:theme="#style/AppTheme">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="#+id/place_autocomplete_fragment"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment 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"
tools:context="com.example.srinivas.democomplete.MapsActivity" />
</LinearLayout>
<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_margin="16dp"
android:clickable="true"
app:srcCompat="#android:drawable/ic_dialog_email"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/autoComplete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#303F9F"
android:text="Auto Complete"
android:textColor="#ffffff"
android:visibility="visible" />
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:background="#ffffff" />
<Button
android:id="#+id/bsolarpanel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#303F9F"
android:text="Add solar panels"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Any help would be great thx!
Just remove the line
android:layout_gravity="bottom|end"
You can use margin to set it according to your need
UPDATE
You can add some more attributes like
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
I want to design a screen with a Google map and a footer. With the footer, i seperated it in a different xml layout file and used 'include' tag. The problem is the footer overlayed the map. My xml layout files were described bellow.
map_viewer.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/layout_mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/actionBtn"
android:layout_marginTop="5dp">
<fragment
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
map:uiRotateGestures="false"
class="com.glympsefunctionalitydemo.maps.Map"/>
<RelativeLayout
android:id="#+id/footer_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include layout="#layout/footer/>"
</RelativeLayout>
</RelativeLayout>
footer.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#null">
<ImageButton
android:id="#+id/actionBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="#null"
android:src="#drawable/btn_actions"/>
<ImageButton
android:id="#+id/mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/footer_horizontal_margin"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:background="#null"
android:src="#drawable/btn_map"/>
<ImageButton
android:id="#+id/mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/footer_horizontal_margin"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#null"
android:src="#drawable/btn_settings"/>
</RelativeLayout>
</merge>
The map takes all the space, the footer overlayed the map. But i just want the map to take the space left when showing the footer. How can i get it working.
Try this for map_viewer.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
class="com.glympsefunctionalitydemo.maps.Map"
map:uiRotateGestures="false" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/footer" >
</include>
</LinearLayout>