Android Studio ActionBar width / icon locations

Question

I have a problem with my ActionBar that results in my menu icon being pressed up against the edge of the screen!

Below is a few code snippets of the styles I've tweaked and the declarations:

HomeActivity.xml

private TextView tvViewAll;
DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);

    //Nav Drawer
    mDrawerLayout = findViewById(R.id.drawer_layout);

    //custom shadow for menu drawer
    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the sliding drawer and the action bar app icon
    mDrawerToggle = new ActionBarDrawerToggle (this, mDrawerLayout, R.string.drawer_open, R.string.drawer_close);

    mDrawerLayout.addDrawerListener(mDrawerToggle);
    mDrawerToggle.syncState();

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    if(mDrawerToggle.onOptionsItemSelected(item)){
        return true;
    }

    return super.onOptionsItemSelected(item);
}

styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:statusBarColor">@color/colorBackgroundBlack</item>
    <item name="android:navigationBarColor">@color/colorBackgroundBlack</item>
    <item name="actionMenuTextColor">@color/colorBackgroundBlackDark</item>
    <item name="colorPrimary">@color/colorBackgroundBlackDark</item>
    <item name="colorAccent">@color/colorPrimaryDark</item>
    <item name="colorButtonNormal">@color/ipBlue</item>
    <item name="toolbarNavigationButtonStyle">@color/ipGreen</item>
</style>

<style name="ActionBar.Solid.TMSA.NoTitle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="displayOptions">useLogo|showHome</item>
    <item name="logo">@drawable/ic_ipaustralialogo</item>
    <item name="android:contentDescription">@string/ip_logo</item>
</style>

<style name="AppTheme.TMSA" parent="@style/AppTheme">
    <item name="actionBarStyle">@style/ActionBar.Solid.TMSA.NoTitle</item>
</style>

I don't remember touching the formatting layout for the ActionBar apart from the inclusion of the gov logo but I can't otherwise figure out why I'm getting this askew menu icon.

I have already considered doing a Toolbar approach but would prefer not to have to convert :P

Happy coding :)

`toolbarNavigationButtonStyle` takes a style, not just a color. I would guess that it's failing with that; at least, it's not getting the minimum width value that's set in the default style. If you want to modify that style, you should create your own style with the default style as the parent, and set the desired attributes in that; something like is shown in the first code block in [this answer](https://stackoverflow.com/a/46495771). — Mike M., Nov 06 '17 at 05:31
No problem. Btw, I'm not sure exactly which part you're trying to color there, but the animating hamburger-arrow drawable has its own style that you can modify, too. There's an example of that in [this answer](https://stackoverflow.com/a/27251004). — Mike M., Nov 06 '17 at 05:52
@MikeM. hadn't even though of tweaking the hamburger/arrow! I'll give it a try :) also - sorry to bother you, but I am trying to mark your 1st comment as the correct answer but I can't even upvote you - is it because I'm a novice or..? — Danielle Orth, Nov 06 '17 at 06:04
Yeah, I don't think you can upvote anything until you reach 15 rep. Also, you can't mark a comment as an answer. Gimme a little bit, though, and I'll put together an actual answer down below that you can accept with the check mark. I'll include a list of the attributes you can set on the drawable, if that's really what you're trying to modify. Glad you got it fixed. Cheers! — Mike M., Nov 06 '17 at 06:16

score 1 · Accepted Answer · answered Nov 06 '17 at 06:51

ActionBarDrawerToggle sets its toggle icon on the ActionBar's navigation button. In an AppCompatActivity, the ActionBar is actually a Toolbar underneath, and that navigation button is styled with the style resource set on the theme's toolbarNavigationButtonStyle attribute.

In your theme, you've set a color resource on that attribute, rather than a style resource, and all of the values in the default style are lost, including the minWidth value, which is why your toggle is wrapped to the drawable's width.

If you want to modify some style values on the navigation button, you should create your own style resource, with the default style as its parent, set the desired attributes there, and specify that style as your theme's toolbarNavigationButtonStyle. For example:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="toolbarNavigationButtonStyle">@style/Toolbar.Button.Navigation</item>
</style>

<style name="Toolbar.Button.Navigation" parent="Widget.AppCompat.Toolbar.Button.Navigation">
    <item name="android:background">@color/ipGreen</item>
</style>

If what you're actually trying to modify is the hamburger-arrow drawable, it has its own style that you can "sub-style", and change certain features in that. For example:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="drawerArrowStyle">@style/DrawerArrowToggle</item>
</style>

<style name="DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@color/ipGreen</item>
</style>

Below is the full list of attributes available for modification in a drawerArrowStyle, should you want to customize any other of its properties.

<!-- The drawing color for the bars -->
<attr name="color" format="color"/>
<!-- Whether bars should rotate or not during transition -->
<attr name="spinBars" format="boolean"/>
<!-- The total size of the drawable -->
<attr name="drawableSize" format="dimension"/>
<!-- The max gap between the bars when they are parallel to each other -->
<attr name="gapBetweenBars" format="dimension"/>
<!-- The length of the arrow head when formed to make an arrow -->
<attr name="arrowHeadLength" format="dimension"/>
<!-- The length of the shaft when formed to make an arrow -->
<attr name="arrowShaftLength" format="dimension"/>
<!-- The length of the bars when they are parallel to each other -->
<attr name="barLength" format="dimension"/>
<!-- The thickness (stroke size) for the bar paint -->
<attr name="thickness" format="dimension"/>

Android Studio ActionBar width / icon locations

1 Answers1

Linked