I have a MapView that I would like to have an animated Menu of options that slide in from the left of screen and overlays the a MapView when the user clicks an icon on the top navbar.
The desired behavior is:
1. User clicks icon on top nav bar
2. Menu slides in from the left, displays buttons with different options.
3. If user select to cancel or return to Mapview, the Menu slides out to the right and disappears.
What is the best approach to implement this behavior on top of a MapView?
First you need to add the buttons in the same XML layout where you have your mapview:
<?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" >
<view
android:id="#+id/mv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
class="com.google.android.maps.MapView"
android:apiKey="your key"
android:clickable="true" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linear_layout_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:paddingRight="5dp" >
<Button
android:id="#+id/button_overlay_show_zoom_all"
android:layout_width="64dp"
android:layout_height="64dp"
android:paddingBottom="10dp" />
<Button
android:id="#+id/button_overlay_previous"
android:layout_width="64dp"
android:layout_height="64dp"
android:paddingBottom="10dp" />
<Button
android:id="#+id/button_overlay_next"
android:layout_width="64dp"
android:layout_height="64dp"
android:paddingBottom="10dp" />
</LinearLayout>
</RelativeLayout>
Then you need to initialize the buttons (I assume you know this part)
Then you define the method for the animation:
//Buttons Fadein / Fadeout-------------------------------------------------------------------------------
private void buttonFadeOut() {
linear_layout_buttons.startAnimation(AnimationUtils.loadAnimation(MyMapActivity.this, android.R.anim.slide_out_right));
linear_layout_buttons.setVisibility(View.GONE);
}
private void buttonFadeIn() {
if(linear_layout_buttons.getVisibility() == View.GONE){
linear_layout_buttons.startAnimation(AnimationUtils.loadAnimation(MyMapActivity.this, android.R.anim.slide_out_left));
linear_layout_buttons.setVisibility(View.VISIBLE);
}
Finally, you just need to call buttonFadeIn() and ButtonFadeOut() where you need.
Good luck.
Related
Hello guys i have a requirement where I need to move the action bar to little left and place a view on button click and again on button click i need to hide view beside action bar and make action bar to full width
I am using custom action bar in my activity
getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getActionBar().setDisplayShowCustomEnabled(true);
getActionBar().setCustomView(R.layout.custom_actionbar_reader);
my custom view
<?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="wrap_content">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/menu_sidebar"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:id="#+id/action_bar_back"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/search_reader"
android:id="#+id/action_search"
android:clickable="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_centerVertical="true"/>
</RelativeLayout>
Is it possible to move action bar, I serched a lot but didnt find any thing related to it. Is that possible? if yes how?
Currently my code places a button at the bottom of the screen:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|bottom">
<ImageButton
android:id="#+id/button1"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_centerInParent="true"
android:gravity="center"
android:src="#drawable/main_button"
/>
</LinearLayout>
</RelativeLayout>
However, I wish to align it slightly below the bottom of the screen, so a small part of the button is clipped off (Say, 20%). Ultimately, my end result is that when I tap and drag the button up, it will move up and reveal the entire button, but before that, the bottom part of it is clipped.
There are many questions on how to align a button to the bottom of a screen, but I can't seem to find any that aligns it to below the bottom of the screen.
Is there any way to do so, or am I not using the correct search terms?
EDIT: From the answers, I tried android:translationY="20dp" and it did not work, but I tried android:layout_marginBottom="-20dp" and it worked for me.
You can add android:translationY="Xdp" to your button to move it down by X dp.
Alternatively you can create two LinearLayouts. One to fill the screen and hold other components and another that contains the button. You can then add android:layout_below="#id/layout0" and android:margin_top="Xdp" to control how far below the screen the layout with the button should be.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
</LinearLayout android:id="#+id/layout0"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_below="#id/layout0"
android:margin_top="Xdp"
android:gravity="center|bottom">
<ImageButton
android:id="#+id/button1"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_centerInParent="true"
android:gravity="center"
android:src="#drawable/main_button"/>
</LinearLayout>
</RelativeLayout>
You can translate the button:
android:translationY="20dp"
in your xml, that's moves the view 20 dp's down.
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);
In a layout file I have a Listview whose size can grow/shrink dynamically. I have a button btn_rec_add and it's click event I add an item in the ListView. I have tried many changes in the Layout file but haven't been able to make the button shift its location based on number of items in the ListView. If I keep the button in the same RelativeLayout which has the ListView, then the button moves dynamically which is exactly how I want but I can't see the button after adding 5 or more elements in 4.3 inch display phones. If I keep the button outside the RelativeLayout of the ListView, then it is fixed on the screen.
Currently, the btn_rec_add is fixed to the bottom of the layout. Can someone please help me solve this problem.
Here is the XML code:
<?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:background="#drawable/bg" >
<ImageView
android:id="#id/top_bar_view"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/top_bar"
android:contentDescription="#string/content" />
<TextView
android:id="#+id/txt_recipients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:text="#string/text_recipients"
android:textColor="#FFFFFF"
android:textSize="16sp" />
<ImageButton
android:id="#id/btn_back"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/content"
android:paddingTop="6dp"
android:src="#drawable/ic_back" />
<RelativeLayout
android:id="#+id/Rlayout_recipients"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/btn_rec_add"
android:layout_alignParentLeft="true"
android:layout_below="#id/top_bar_view" >
<ListView
android:id="#+id/rec_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:paddingTop="20dp" />
</RelativeLayout>
<ImageButton
android:id="#+id/btn_rec_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/content"
android:src="#drawable/icon_add" />
</RelativeLayout>
If I understand correctly, you want the behavior of the button to be as follows:
Appear below the last ListView item if the ListView does not extend to fill screen
If the ListView extends the full height of the screen, the button should be at the bottom of the screen, but the list should remain scrollable
If my understanding is correct, you should place your ListView and your button in a LinearLayout as follows:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="#dimen/button_height"
android:background="#drawable/button_image" />
</LinearLayout>
The effect of the above layout is as follows:
Layout in which items are vertically placed
Layout which will be as wide as parent, but as tall as ListView and Button
ListView will take up all of the space in the layout that the button does not occupy (this is layout_weight="1" whereas Button has no layout weight so it will simply fill as much space as it needs as defined in this case by #dimen/button_height)
Great Android layout question!
Your Problem is related to User Experience.
You have to decide whether user will like to scroll to end of the list to press add button
or user want to add without scrolling to end of list.
Since you only have two options with our scenario,
either keep add button fixed or add it as footer of listview.
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.