6

I want to make an action bar with a button on the right with a margin_right. like this picture1 And I use the action button to do it. But the button was on the right without margin_right. picture2 android:layout_marginRight doesn't work here.

here is my styles.xml:

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarSize">50dp</item>
    <item name="android:actionBarStyle">@style/my_actionbar_style</item>
    <item name="android:actionButtonStyle">@style/my_action_button</item>

</style>
<style name="my_actionbar_style" parent="android:Widget.ActionBar">
    <item name="android:background">@color/actionbar_backgroud</item>
    <item name="android:titleTextStyle">@style/myTitleStyle</item>
    <item name="android:displayOptions">showTitle</item>
</style>
<style name="myTitleStyle">
    <item name="android:textColor">#ffffff</item>
    <item name="android:textSize">20sp</item>
</style>

<style name="my_action_button">
    <item name="android:background">@drawable/button_selector</item>
    <item name="android:width">70dp</item>
    <item name="android:textSize">13sp</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:layout_marginRight">10dp</item>
</style>

and this is my menu.xml:

<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="AppCompatResource">

<item
    android:id="@+id/action_search"
    android:title="submit"
    android:showAsAction="always" /></menu>
2

2 Answers 2

6

Another quick and clean way to go about this is specifying your own layout for that menu button. something like this

<menu 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"
      tools:context="com.example.MainActivity">

    <item
        android:id="@+id/action_custom_button"
        android:title="Custom Button"
        android:icon="@drawable/ic_custom_button"
        app:actionLayout="@layout/layout_to_custom_button"
        app:showAsAction="always" />

</menu>

there should be

layout_to_custom_button.xml

layout file which contains the padding and style you wanted.

and also do this in your activity for the click event

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.menu_product_detail, menu);
  final Menu mMenu = menu;
  final MenuItem item = menu.findItem(R.id.action_custom_button);
  item.getActionView().setOnClickListener(new View.OnClickListener(){

    @Override
    public void onClick(View v) {
      mMenu.performIdentifierAction(item.getItemId(), 0);
    }
   });
        return true;
}
3
  • it worked out! thanks a lot. But I found that "android:showAsAcion="always"" should be added, or the action button will hide in the overflow
    – Yriuns
    Commented Aug 25, 2015 at 2:41
  • Sorry, but I meet another problem. After I add the "actionLayout", public boolean onOptionsItemSelected(MenuItem item) method doesn't work. It seems that the method was not actived although i click the button
    – Yriuns
    Commented Aug 25, 2015 at 5:45
  • i just added a method of how to get the click event of the custom menu item. thanks Commented Aug 25, 2015 at 10:49
1

I found the easiest way to do this was to just create your own action bar in a layout file. You can then use it by having your activities inherit from a common activity that overrides setContentView, where you just stick the view you're given into a parent view containing that and your action bar. You can mimick the overflowing menu behavior by using ActionMenuView (5.0+). For example, assume you have an action_bar.xml with an ActionMenuView in it named menuView:

class BaseActivity extends Activity {

    ...
    ActionMenuView mMenuView;
    ...

    @Override
    protected void setContentView(int resId) {
        LayoutInflater inflater = getLayoutInflater();
        View actionBar = inflater.inflate(R.layout.action_bar, null);
        View contentView = inflater.inflate(resId);

        mMenuView = (ActionMenuView)actionBar.findViewById(R.id.menuView);

        RelativeLayout parentLayout = new RelativeLayout(this);
        LayoutParams actionBarLayout = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        actionBar.setLayoutParams(actionBarLayout);
        parentLayout.addView(actionBar);

        actionBar.setId(R.id.actionBar);
        LayoutParams contentLayout = new LayoutParams(LayoutParams.MATCH_PARENT, 0);
        contentLayout.addRule(RelativeLayout.BELOW, actionBar.getId());          
        contentLayout.addRule(RelativeLayout.ALIGN_WITH_PARENT_BOTTOM);
        contentView.setLayoutParams(contentLayout);
        parentLayout.addView(contentView);

        setContentView(parentLayout);
    }

}
1
  • It worked out! Thanks a lot! But I prefer to use the xml to solve this problem :)
    – Yriuns
    Commented Aug 25, 2015 at 2:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.