1735

Android Studio ActionBar width / icon locations

I have a problem with my ActionBar that results in my menu icon being pressed up against the edge of the screen! <img src="https://i.stack.imgur.com/LIKAm.png" alt="image">

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

<strong>HomeActivity.xml</strong>

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); }

<strong>styles.xml</strong>

<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 :)

Answer1:

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> <hr>

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"/>

Recommend