Using Google Maps as "Overlay" on another Layout/View - android

I have a little problem.
My app has a surfaceview and displays the camera preview.
Now I want a map overlay. This overlay should be displayed in a corner of the display and show the current position of the user.
Here's a preview image of what I'd like to have:
full res image
My problem is, that I don't know how to display a view/layout over another.
What I have at the moment is this as main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/CameraPreviewLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/SurfaceViewLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="#+id/MapsLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:orientation="vertical" >
<fragment
android:id="#+id/Map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.MapFragment" />
</LinearLayout>
</RelativeLayout>
But this shows my preview layout with the + and - Button of the maps-layout.
Is it possible to get something like that? Cause I'm searching for a while now and find nothing.
Hope someone has an idea.
regards
UPDATE:
Here is my new main_activity.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="match_parent" >
<FrameLayout
android:id="#+id/SurfaceViewLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/ic_launcher" />
<fragment
android:id="#+id/Map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.google.android.gms.maps.MapFragment" />
</RelativeLayout>

Related

Map in viewPager with custom design

I am developing app with map in viewPager, I followed the second part of this answer and every thing is ok.
Now I need the view to be map with button.
This is the .xml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
<fragment xmlns:android="http://schemas.android.com/apk/red/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:layout_width="match_parent"
android:name="com.google.android.gms.maps.SupportMapFragment"
tools:context="com.developers.redfinger.mymap.MainMapActivity"></fragment>
<Button
android:id="#+id/bAdd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.9"
android:paddingTop="5dp"
android:text="Add Place"
android:textSize="28dp" />
</LinearLayout>
When I override onCreatView() as first part of answer to define button the unfortunately stop, any help please.

Android place an image view between two views

I need to create a layout as shown in the image.
The rounded button with the arrow needs to be exactly between the blue and the gray background.
I'm having difficulties placing it without specifying the margins precisely, which is something I don't want to do because there is no guarantee it will look good on all resolutions and devices.
I would appreciate an xml sample for that
Thanks!
Use the desired drawable.. hope it works.. you can set width and height according to your need.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/arrow" />
</FrameLayout>
</LinearLayout>

Preview Screen Layout Android

When I restore an Activity from memory, I have a preview window for a couple of seconds.(Android OS just place it before loading all GUI stuff). I need to place a logo of an app in this preview window (I coded this as layout.xml) or make some splash screen (but not at the start of activity, but when it's restored).
To make situation more clear:
I have a layout with picture:
<?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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="194dp"
android:layout_height="146dp"
android:src="#drawable/shell1" />
</RelativeLayout>
It looks like on this picture:
But, I can't use this layout for preview window. And if i use only image for preview window, I have something like that:
P.s. The second picture is not from preview window, it's just used to show the situation.
What should I do to have a proper nice look of preview window? To have this image just in the middle of screen. Thanks in advance.
This is for first Screen:
<?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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="194dp"
android:layout_height="146dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/shell1" />
</RelativeLayout>
and this is for second Screen:
<?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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/shell1" />
</RelativeLayout>
try using-
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/shell1" />
instead of -
<ImageView
android:id="#+id/imageView1"
android:layout_width="194dp"
android:layout_height="146dp"
android:src="#drawable/shell1" />

Changing view order in the program

My main.xml has ListView and ImageView. Now ListView is behind the ImageView. How can I make when the user touch the screen, the ImageView is put behind the ListView. How can I implement in the program? My main.xml is as follow.
<?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"
>
<LinearLayout android:id="#+id/tracker_container"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="vertical"
/>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/im1"
/>
</LinearLayout>
You can try bring the list view to the top by using
listView.bringToFront()

Bottom bar layout in android

This is my android xml source code for a map - bottom bar layout. I am displaying a huge map in the screen and i need a 30dp tall layout in the bottom of the screen to display a few tab like images. How do i push the horizontal linear layout to the bottom of the page ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height=" what here ? "
android:layout_width="fill_parent"
android:orientation="vertical">
<com.google.android.maps.MapView
android:id="#+id/map_view"
Map goes here. Almost full screen. Exactly full - 30dp;
/>
<LinearLayout>
I want 3 images here. Bottom of the screen.
</LinearLayout>
</RelativeLayout>
Use android:layout_alignParentBottom="true" to set the linearlayout at the bottom of the parent for linearlayout and android:layout_above for mapview to set the mapview above the linearlayout.
Your code will be:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical">
<LinearLayout android:layout_height="30dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:id="#+id/linearLayout1"
>
<!-- ... -->
</LinearLayout>
<com.google.android.maps.MapView
android:id="#+id/map_view"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_above="#+id/linearLayout1"
/>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.google.android.maps.MapView
android:id="#+id/map_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/rel_bottom" />
<RelativeLayout
android:id="#+id/rel_bottom"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:layout_height="30dp" >
<ImageView
android:id="#+id/img1"
android:layout_width="40dp"
android:layout_height="fill_parent" />
<ImageView
android:id="#+id/img2"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/img1" />
<ImageView
android:id="#+id/img3"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/img2" />
</RelativeLayout>
</RelativeLayout>
use the properties of the RelativeLayout, like android:layout_alignParentBottom and android:layout_above.
I would do something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout
android:id="#+id/footer"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:width="fill_parent"
android:height="30dp">
add your images here
</LinearLayout>
<com.google.android.maps.MapView
android:id="#+id/map_view"
android:height="fill_parent"
android:width="fill_parent"
android:layout_alignParentTop="true"
android:layout_above="#id/footer"/>
</RelativeLayout>
Try the following layout. Using android:layout_alignParentBottom="true" won't be enough as the MapView with android:layout_height="fill_parent" will fill the whole screen and hide the LinearLayout. You must also add android:layout_above="#id/menu" so it won't hide it.
<?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" >
<com.google.android.maps.MapView
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/menu"
android:apiKey="#string/google_maps_api_key"
android:clickable="true" />
<LinearLayout
android:id="#+id/menu"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true" >
</LinearLayout>
</RelativeLayout>

Categories

Resources