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?
Related
I'm adding the Toolbar inside my app but seems I have a issue. In the app I should have a button that is on the right of the screen, and the title in center. But when I go deeper in the app I should display the back arrow on the left, by doing getSupportActionBar().setDisplayHomeAsUpEnabled(). And this is working fine but when I add the back button the text moves to the right so the back button can have some space I guess. Can someone tell me how can I have my button on the right and the title always in the center, no mather if the back button is displayed or not?
Here is my toolbar xml layout code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="5dp"
tools:ignore="MissingPrefix">
<RelativeLayout
android:id="#+id/toolbar_info_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textColor="#color/actionbar_title_color" />
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/toolbar_count"
android:layout_width="13dp"
android:layout_height="13dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/red_circle"
android:gravity="center"
android:text="4"
android:textColor="#color/white"
android:textSize="9sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
What worked for me is to set :
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
to the child view of the Toolbar, which is a LinearLayout for me (and a RelativeLayout for you). It sounded weird to me first but it's working so I won't complain.
First of all, a few general tips. This is the exact purpose behind the Android Hierarchical view. Use that to figure out what the container object of the back button is, how everything fits together, etc.
I suspect you can resolve your issue to some extend by changing some of the wrap_content to match_parent. Specifically, I suspect that changing it in your RelativeLayout for the layout_width will do the trick. But even if that doesn't, use the Hierarchical view to get a better understanding of exactly what happens when you are playing around, and it should help point you in the right direction.
You may have an activity title set, wich would prevent the logo from being centered on the action bar.
Try:
getActionBar().setDisplayShowTitleEnabled(false);
For v.7:
getSupportActionBar().setDisplayShowTitleEnabled(false);
This comes from this question and answer. Credit to #Fillipo Mazza.
Hope it helps.
Little late on this post, but will explain how it can work.
You can use custom view for your toolbar using following code.
supportActionBar?.setCustomView(R.layout.app_bar_title)
supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM
What basically happens is, app_bar_layout is added as custom view inside Toolbar.
So let's say the need is to show title in the center along with back key or action buttons on right side.
We can create layout like this.
<?xml version="1.0" encoding="utf-8"?>
<TextView 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/app_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
tools:text="HOME" />
This textview will attach inside Toolbar layout and align itself in center of the Toolbar layout. Even if you add back key or action menu, it shall remain in the center.
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.
I need to create a custom action bar that will have some image buttons and on click they will drop down a menu list.
i have designed the action bar using a linear layout.
i have the controls attached in my main activity and and the click events handled, but i don't know how to create the drop down controls.
i want to position the the dropdown controls below the clicked button. how can i make all of this?
this is my code for the action bar
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:background="#drawable/actionbar_background"
android:layout_height="65dp">
<Button android:id="#+id/btntest"
android:layout_marginLeft="50dp"
android:text="Sup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button android:id="#+id/btntest1"
android:layout_marginLeft="100dp"
android:text="Company"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button android:id="#+id/btntest2"
android:layout_marginLeft="100dp"
android:text="Client"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</LinearLayout>
</FrameLayout>
you can do this with an action provider which can be used by ActionProvider class...
It replaces an action item with a customized layout, but it also takes control of all the item's behaviors.
besides taking the control of appearance of items it also handles default events for menu...
check the link for more information...
http://developer.android.com/guide/topics/ui/actionbar.html#ActionView
How to add a separator between menu items in ActionBar likewise it's made in Gmail app?
Well when I was trying to make my own action bar I used a black FrameLayout in which all the items of the action bar will be displayed. I set the layout_margin attribute on each item at 1dp so it would appear like there was a black separator on either side - if you want it to be larger you can increase the margin.
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton ....... />
<ImageButton ...... android:layout_marginLeft="1dp"/> <!-- this will be shown as a separator-->
</LinearLayout>
</FrameLayout>
Do you know how to achieve the same effect as winamp for android ? I want to do the similar thing. That is when I click on listview, sliding drawer popup. But so far I only can show the sliding drawer in new activity not in the same.
How can I achieve in overlap view. That is when I close the drawer, the layout is show at the front, and the sliding handle is on the layout, when I open the drawer, it covers the main layout.
Any ideas about that ?
Thanks !!
Step #1: Create a RelativeLayout
Step #2: Put the rest of your UI in the RelativeLayout
Step #3: Put the SlidingDrawer in the RelativeLayout as a later child then the rest of the UI (e.g., in layout XML, have it as the last child element of the RelativeLayout)
Children of RelativeLayout (and FrameLayout) stack on top of one another on the Z-axis (i.e., out the face of the screen). Hence, later children will overlap earlier ones. By putting your SlidingDrawer last, it will overlap everything else when opened.
Thank you CommonsWare you helped me,I do not have much reputation to vote up. Here is my sample layout...
I used it.sephiroth.slider.widget.MultiDirectionSlidingDrawer as the SlidingDrawer
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:layout_marginLeft="82dp"
android:layout_alignTop="#+id/button_open">
<Button
android:id="#+id/button_open"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/open"
android:visibility="visible" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New EditText"
android:id="#+id/editText" android:layout_alignParentLeft="true" android:layout_marginLeft="114dp"
android:layout_alignParentTop="true" android:layout_marginTop="6dp"/>
</RelativeLayout>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:panel="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:id="#+id/drawer"
panel:direction="topToBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
panel:handle="#+id/handle"
panel:content="#+id/content">
<include
android:id="#id/content"
layout="#layout/pen_content" />
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="40px"
android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
</RelativeLayout>