About the Grey Selector Buttons

If you have read any of the recent update changelogs for our Android apps, you probably will have noticed mention of the Grey Selector button style. First of all, don’t be alarmed, this should not be a significant change. This is both an evolution and an attempt to standardize the Glass Bottle Apps visual style. These grey selector buttons will be replacing Android system buttons and our clear background buttons and will show up the same way on any Android version. For now, our iPhone/iPad apps will keep the Apple approved coloured text buttons, but we may apply some of the same design principles to them as well.

At first glance, Grey Selector buttons will probably look very similar to what came before them: a sizable icon with small text underneath with no background or outline. This remains the same. The goal is to provide a visual icon for both fast recognition and accessibility, while having the text to provide clarity in case the icon is not fully understood. The biggest difference is that when pressed, the grey selector button will show a translucent grey background as seen in the example. As before, most grey selector buttons will be shown on a grey background.

Grey Selector Example

Grey Selector Example on Android 2.1

The biggest reason for this change was to have a consistent button style that would appear the same on all Android phones and tablets. As well, I didn’t like the lack of visual feedback provided by the simple transparent background. While looking at code samples online, I found that I could set the background to be an xml selector instead of an image. A selector is xml code that defines two backgrounds based on certain conditions. As seen in the example below, the Grey Selector chooses between a translucent light grey or clear depending of whether the button is being pressed.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_pressed="true" 
 android:drawable="@drawable/grey_rect_pressed" />
 <item android:state_focused="false" 
 android:drawable="@drawable/clear_rect" />
</selector>
Share This: Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailby feather

Trackbacks & Pings

  • GB Apps Fourth Month in Review | Glass Bottle Apps :

    […] establishing a distinctive look and feel for Glass Bottle Apps with the implementation of the Grey Selector button style for our Android apps. Most of our Android apps were updated this month to implement this new […]

    3 years ago

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.