Android : Google Play Store like transparent clickable action bar

    The recent updates to the Play store application introduced the new look to the action bar when browsing applications. The action bar is transparent with just the store icon on the left and the search icon in the right and yet more than one half of the action bar responds to click events and navigates back to the previous screen. If the title isn't set, the entire middle section of the action bar is not clickable as the width of the up navigation container wraps content and in this case it is just an icon. So how does the Play store implement the wide clickable area?




   Well, play store actually sets the title. Its just that the color of the text is transparent which causes the container to wrap both the play store icon and the text view hosting the transparent application name and that is why it responds to click events and navigates user back to the previous user interface. Its implemented just my modifying the action bar styles,


<style name="MyTheme" parent="@android:style/Theme.Holo.Light">
    <item name="@android:attr/actionBarStyle">@style/MyActionBarStyle</item>
</style>

 <style name="MyActionBarStyle" parent="@android:style/Widget.DeviceDefault.ActionBar">
        <item name="@android:attr/titleTextStyle">@style/MyTextStyle</item>
        <item name="android:background">@android:color/transparent</item>
 </style>

 <style name="MyTextStyle" parent="@android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Title">
        <item name="android:textColor">@android:color/transparent</item>
 </style>

  As a note, the latest version of Play store app based on the new material design uses ToolBar.

No comments: