0

The three dot overflow menu icon is so close to the edge of the screen that it is difficult to touch. I see that the style of the overflow button can be changed (via actionOverflowButtonStyle), but I can't find any documentation on what can be changed aside from the icon. Can padding or margin be adjusted? If so, how? What options are available under actionOverflowButtonStyle? I'd like to push the button out from the right edge of the screen a bit, without necessarily having to create a new drawable with built-in padding.

Thanks.

Casey Perkins
  • 1,853
  • 2
  • 23
  • 41
  • I don't understand how the menu icon would be so close to the edge of the screen when it's reasonably rendered on the action bar by default. Can you post your relevant code snippets, particularly your menu resource file? – DaveNOTDavid Jul 05 '17 at 14:51
  • Dave, I haven't changed anything about menu styling at all. My client thinks it's hard to touch on his 7 inch tablet, and I agree. All I want to do is to move it over leftward a bit. – Casey Perkins Jul 05 '17 at 15:32

1 Answers1

0

I ran into the same problem, it didn't just feel too close to the edge, it looked closer than what the Material design shows. I came up with two solutions:

  1. If you're using a vector drawable for the icon, you can change the width of the icon. With the following standard 24dp icon from the Material icons set, increase android:viewportWidth and android:width. They need to be equal, otherwise the image is stretched/compressed. Since the vector is drawn from the top left of its bounds, increasing the width adds space to the right of the vector path.

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="24dp" android:tint="#FFFFFF" 
        android:viewportHeight="24.0"
        android:viewportWidth="24.0"
        android:width="24dp">
    <path android:fillColor="#FF000000" android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</vector>

  2. Alternatively, assuming the following is in your app's theme:

    <item name="actionOverflowButtonStyle">@style/OverflowButton</item>

    You can actually apply padding or margin in the OverflowButton style. The following is what I'm using:

    <style name="OverflowButton">
    <item name="srcCompat">@drawable/ic_more_vert_white_24dp</item>
    <item name="android:tintMode">src_in</item>
    <item name="android:tint">?textColorOnPrimary</item>
    <item name="android:paddingRight">8dp</item>
</style>

    I prefer to use padding since the padding will be included in the touchable area

mgray88
  • 376
  • 1
  • 5
  • 10