Styling custom views in Android

Styling of a view like TextView, EditText, Button etc. is a common task of an Android developer to maintain similar look and feel across the screens of an app. Apart from maintaining similar theme styling has an additional advantage i.e., app will not have redundant code so maintaining of such Views become an easier task. As Android has given flexibility to create and use a custom view instead of the built-in ones to the developers, we use to create such custom views with custom attributes. But styling custom views are trickier compared to the standard views. Lets have a comparison of styling between standard views vs custom views.

Styling standard views

<style name="spinnerStyle" parent="Widget.AppCompat.Spinner">
        <item name="android:textSize">15sp</item>
        <item name="android:layout_marginLeft">5dip</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:textColor">@color/dark_grey</item>
    </style>

The above xml snippet is a sample style of a spinner, and spinner is a standard view provided by Android which is similar to a drop down in html.

Styling custom views

If you have written a custom view or simply using a library of a custom view you should consider using styles for those too. Styling of a custom view is similar to styling a standard view if your custom view does not have any custom attribute to refer from layout. By now you might started thinking that your custom view has some custom attributes so don’t worry as defining styles for such views are also easy. Lets have a look on the below example –

Suppose you have View called Foo and Foo have two custom attributes called allowSpace and leftIcon. So style of this view will be –

<style name="fooStyle">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">match_parent</item>
        <item name="allowSpace">false</item>
        <item name="leftIcon">@drawable/joker</item>
</style>

Oh style looks similar like the standard view’s style and yes you are right it is exactly similar then where is the catch ?

So let me tell you the catch is you need to declare your custom attributes also within the same resource file with the style, then only Android will able to recognize the custom attributes of the custom view within a style otherwise not. Here is the full style.xml file for this view –

<declare-styleable name="Foo">
        <attr name="allowSpace" format="boolean" />
        <attr name="leftIcon" format="integer" />
</declare-styleable>

<style name="fooStyle">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">match_parent</item>
        <item name="allowSpace">false</item>
        <item name="leftIcon">@drawable/joker</item>
</style>

Hurray!! your styling of custom view is done and ready to use within your app’s layout files.

 

I hope you have learned to define styles for custom views in Android,  help your friends and colleagues too by sharing this article with them

Happy coding!!!

Leave a Reply

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