lunes, 20 de mayo de 2013

BLOG MUY INTERESANTE

LIST VIEWS
http://blog.stylingandroid.com/archives/605

DINAMIC ICONS
http://blog.stylingandroid.com/archives/1471

ESTILO BARRA DE ACCION (6)


Styling the ActionBar – Part 6

In the previous article we got the styling of our ActionBar almost complete – all that’s left to do is apply a style to the ActionMode. In this article we’ll do precisely that.

Applying a style to the ActionMode is actually quite easy and is simply a case of defining drawables for actionModeBackground (and, if our ActioMode was to split on to a second line actionModeSplitBackground) in our theme. The problem that we have is we do not have assets for these. At the time of writing neither Jeff Gilfelt’s ActionBar Style Generator nor Jérôme Van Der Linden’s Android Holo Colors Generator will create assets which matches those used by the default holo theme which can be viewed hereand here. For those who are adept with image manipulation tools such as Photoshop or Gimp it is relatively straightforward to change the colours of these existing assets to match those that we have used elsewhere in this series. However, we’ll use a slightly different approach and define our own vector drawable to do the job. Our example doesn’t require actionModeSplitBackground, so we’ll just focus onactionModeBackground.
Let’s start with the first of those graphics. It has a dark blue background with a light blue stripe across the bottom. We’ll use a technique that we used before to add lines at the edge of a drawable using an inset drawable to pull the unwanted edges outside of the viewable area. Let’s create a new drawable in res/drawable/cab_background_top:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
    android:insetBottom="0dp"
    android:insetLeft="-5dp"
    android:insetRight="-5dp"
    android:insetTop="-5dp" >
    <shape>
        <solid android:color="@color/stacked_green" />
        <stroke
            android:width="3dp"
            android:color="@color/accent_green" />
    </shape>
</inset>
This works by creating a dark green solid rectangle with a 3dp light green border. We use the negative offsets in the inset to pull the top, left, and right edges of that border outside the visible area of the rectangle. This results in a dark green rectangle with a light green bottom edge, and this is precisely what we require. We can apply this in our theme:
1
2
3
4
5
6
7
8
9
10
11
12
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/DropDownListView</item>
    <item name="android:actionBarWidgetTheme">@style/Theme.stylingactionbar.widget</item>
    <item name="android:actionDropDownStyle">@style/DropDownNav</item>
    <item name="android:spinnerDropDownItemStyle">@style/DropDownItem</item>
    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:actionBarItemBackground">@drawable/selectable_item_background_stylingactionbar</item>
    <item name="android:actionModeBackground">@drawable/cab_background_top</item>
</style>
If we run this we can see that the ActionMode is styled as we expect. The only thing that isn’t correctly styles is the selection of the “tick” button on the left hand side:

This is pretty simple to fix, we need to create a style which applied our existing selector drawable:
1
2
3
<style name="CloseButton" parent="@android:style/Widget.Holo.ActionButton.CloseMode">
    <item name="android:background">@drawable/selectable_background_stylingactionbar</item>
</style>
Then we set assign this style in the theme:
1
2
3
4
5
6
7
8
9
10
11
12
13
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/DropDownListView</item>
    <item name="android:actionBarWidgetTheme">@style/Theme.stylingactionbar.widget</item>
    <item name="android:actionDropDownStyle">@style/DropDownNav</item>
    <item name="android:spinnerDropDownItemStyle">@style/DropDownItem</item>
    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:actionBarItemBackground">@drawable/selectable_item_background_stylingactionbar</item>
    <item name="android:actionModeBackground">@drawable/cab_background_top</item>
    <item name="android:actionModeCloseButtonStyle">@style/CloseButton</item>
</style>
Now we get the correct behaviour on the close button and our styling of the ActionBar is complete:

We’ve made it! It has been a fairly long journey since we first started looking at theActionBar but, hopefully, this has evolved in to one of the most comprehensive studies of the ActionBar currently available. The ActionBar is a powerful and versatile UI component which, thanks to Jake Wharton’s ActionBarSherlock can be used back to Android 2.X. Applying styles can be problematic, at times, but it is always worth looking at the Android source when you get stuck as often the clues are there in the base theme that you’re using.