Button Size and Placement

Choosing appropriate button sizes and layouts can help users reliably interact with your app on the Fire tablets.

Button Size

When designing the user interface for your app, specify size using density-independent pixels (dp). Using dp allows you to enter one set of values to define the button size across devices. For information about choosing dp values that work well for all devices, see the Android design guide for 48dp Rhythm.

Use the following formula to convert from density-independent pixels to millimeters:

mm = (dp*25.4)*(density/pixel density)

The following example shows a conversion for Fire HD 8 (2015):

mm = dp*25.4*(1.33/189)

mm = dp/5.595 Therefore, a button width of 48db will result in a button 8.6 mm wide on this tablet.

Important: While dp allows you to specify one set of dimensions to be adapted across devices, you still need to provide multiple graphics resources. For more information, see Screen Layout and Resolution.

Touch Targets

The touch target is the area that responds to touch and activates the button. For each button, you need to make the touch target large enough for the user to reliably activate the button, which means that it may need to be larger than the visible area. The following example shows a button with a touch target larger than the visible area.

Make sure to provide additional space between the touch targets for adjacent user interface elements. For information about what size to make touch targets and how much space to allow between them, see 48dp Rhythm.