Adding custom footer buttons to Google Maps Marker on Android - android

When I click on a Marker inside a MapFragment, two buttons appear on the bottom of the map (for route and search). How can I customize those buttons?
I searched for some tips here but only find how to add buttons to the info window...
Thanks.

You can use a FrameLayout with 3 children, and set the android:visibility of the bottom buttons to invisible.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.google.android.gms.maps.SupportMapFragment"
/>
<Button
android:layout_gravity="bottom|left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:text="Button 1"/>
<Button
android:layout_gravity="bottom|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:text="Button 2"
/>
</FrameLayout>
(If you dont set the android:visibility="invisible", you can see these 2 buttons in the bottom of your mapFragment, see image below)
In your onMarkerClick method, you can change the invisibility of the these 2 buttons to visible, sample code:
button1.setVisibility(View.VISIBLE);
button2.setVisibility(View.VISIBLE);

Related

Add a view overlay on map view android

I am using the MapView from the Google Map Android SDK in full screen, but I have a requirement to display another transparent full view over the mapview. The overlay displays as expected, however, the map can be controlled (markers can be clicked, map can be moved) despite the overlay being on it.
How can I ensure the overlay prevents the map from being controllable when in view?
Add following on your overlay view parent layout.
android:focusable="true"
android:focusableInTouchMode="true"
android:clickable="true"
Remember you need to place above line on parent layout of overlay view
You can do this by making your overlay clickable. Add below code to the xml of your overlayview.
android:clickable="true"
For example I use the following code to add a button to the page
<?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">
<fragment
android:id="#+id/location_map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#359c5e"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:padding="8dp"
android:layout_margin="5dp"
android:text="#string/go"
android:textColor="#ffffff" />
</RelativeLayout>

How to set Tabbar position at center in android?

I have to design a screen where at the top I need to show some user details and then at center I have a tab bar and bottom part will show the page selected from the tab. But I am not able to show the tabbar at center. It can set either at top or bottom of the screen. How can I set the tabbars at center so that we can show some information at top of the bar and show the selected page of tabs at bottom part?
In this example image I need to show the user profile pic, username, and some other details of user at top where "Material is good" written. and below that the tabbar like this image.
You may have to create View pager, Tab Layout, fragments etc..
below is the project that i made similar to your request go though it...
Hers the github link
i hope it helps...:)
Do you want to achieve it like following screenshot?
If so , you could download this demo, Then changed Main.axml like following code.
<?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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="name tom"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="age 10"
/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="50">
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingTop="10dp"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
</LinearLayout>

Change the position of a text in android studio

I just started a programing in course in android studio using Java and XML and cant really figure out how to do a simple task. I have 3 buttons at the top of the screen, they fill up the whole width of the screen. I want to add a text below these 3 buttons, but i dont really now how to specify this. Right now i have:
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_textcolor" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_textsize" />
<TextView
android:text="South Africa"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
</LinearLayout>
Now, the text in the text element is displayed at the right side of the screen, its barely visible. The text gets cramped up so tight that it gets misaligned verticaly. What would i do if i instead wanted the text inside the textview element to be displayed just below the 3 buttons, to the left horizontaly, like normal text?
Thank you!
Use something like this. Inside the TextView tag add:
android:layout_below="#+id/buttonid"
Obviously you have to use relative layout for using this
Here you go
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button_send" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button_textcolor" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button_textsize" />
</LinearLayout>
<TextView
android:text="South Africa"
android:layout_height="match_parent"
android:layout_width="wrap_content"
/>
</LinearLayout>
Use RelativeLayout instead of LinearLayout. There are also many other layouts you can try. Check here for the other type of available layouts.
RelativeLayout lets child views specify their position relative to the
parent view or to each other (specified by ID). So you can align two
elements by right border, or make one below another, centered in the
screen, centered left, and so on. By default, all child views are
drawn at the top-left of the layout, so you must define the position
of each view using the various layout properties available from
RelativeLayout.LayoutParams.

Placing button to top of Map in Android

I currently have a map implemented in my Android application, and I'm having a bit of trouble trying to place a button at the top of it.
At the moment, this is how it is being displayed -
I want to prevent the button from being transparent, ideally I want it to appear like this below, or even have the button to span the width of the screen and stick to the top of the map -
Can anyone point me in the right direction in how to achieve the look in my second screenshot? Or even have the button across the top without being transparent, the map doesn't have to be in a frame or anything. Here is my code for the top screenshot -
<fragment 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:id="#+id/map"
tools:context="com.example.pro.maps.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btn_login"
android:layout_gravity="center_horizontal"/>
If anyone could help me I would appreciate it.
Nest the two views within a different layout such as a RelativeLayout. Take advantage of the alignParentTop, align_bottom, etc. properties.
<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" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btn_login"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"/>
<fragment
android:layout_below="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/map"
tools:context="com.example.pro.maps.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment" />
</RelativeLayout>

Switch between button bars

I have a layout xml file:
<?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"
android:background="#000000" >
<FrameLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_above="#+id/taoFooter">
<com.example.gamedice.DrawingPanel
android:id="#+id/taoCanvas"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#000000" />
</FrameLayout>
<LinearLayout
android:id="#+id/taoFooter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
style="#android:style/Holo.ButtonBar">
<Button
android:id="#+id/roll1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll1"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll2"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll3"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll4"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
</LinearLayout>
</RelativeLayout>
In addition to other items in the layout, this layout has a button bar consisting of four buttons at the bottom of the screen. Based on user input, I want to be able to replace this button bar with another predefined set of buttons, and then be able to change back later.
Since I know what the alternate set of buttons will be ahead of time, I thought it might be possible to use an alternate layout xml file, but I couldn't figure out how to do that. Can anyone give me some guidance?
You can add your second set of buttons in a layout like you did with the first, then in the layout xml file set the attribute android:visibility="gone" on the second layout. In your code you can call setVisibility(View.GONE) for one layout (e.g. taoFooter) and setVisibility(View.VISIBLE) on the other layout when you need to switch the buttons out.
Alternatively, if you easily want to add some animations you can add a ViewFlipper around your two alternate button layouts. Only the first one is visible by default. You can switch to the next layout with showNext(). Add calls to setInAnimation() and setOutAnimation() before that to enable the animations.

Categories

Resources