Android Styling

We are finishing off the development of Simply Fish and are coding some of the UI elements and have come across a couple of useful things I thought I would share with you.

The xml below allows you to change the colour of the title of your Preference category. You can tweak this to modify the UI look and feel of the other components on the Preferences Page.

Styling the Preferences

Add the following, changed for your particular instance in to your styles.xml files.

<!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="actionModeStyle">@style/CustomActionMode</item>
    <item name="preferenceTheme">@style/PrefTheme</item>
 </style>

 <style name="PrefTheme" parent="@style/PreferenceThemeOverlay">
    <item name="preferenceCategoryStyle">@style/CategoryStyle</item>
 </style>

 <style name="CategoryStyle" parent="Preference.Category">
    <item name="android:layout">@layout/pref_category_view</item>
 </style>

And the actual style file you need, pref_category_view.xml – I put mine in the layout folder.

<?xml version="1.0" encoding="utf-8"?>
 <TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/title"
    style="?android:attr/listSeparatorTextViewStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="@color/colorPrimaryDark"
 />

AutoCompleteTextView and “nextFocusForward”

To ensure that the “next” button works as expected when dealing with an Android AutoCompleteTextView ensure you include the following tags, in bold, in your xml layout.

<AutoCompleteTextView
    android:id="@+id/species"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/species"
    android:imeOptions="actionNext"
    android:inputType="text"
    android:singleLine="true" 
/>

You don’t normally need the imeOptions tag if you use tags like nextFocusForward and identify the next view to go to like below.

android:nextFocusForward="@+id/length"

This will take you to the “length” view if this is set in a EditText or a TextInputLayout.

Be aware that “actionNext” takes you to the next field, it might not necessarily be the one you want it to go to.

View.setError

If you are using the TextInputLayout view to support error texts and the very nice way of showing EditTexts etc as below.

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_species"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:nextFocusForward="@+id/weight">

    <AutoCompleteTextView
        android:id="@+id/species"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/species"
        android:imeOptions="actionNext"
        android:inputType="text"
        android:singleLine="true" />
</android.support.design.widget.TextInputLayout>

Then always remember to do the following, request the focus BEFORE you set the error message otherwise the error message will NOT appear even though it executes as if there is no problem.

mSpecies.requestFocus();
mInputLayoutSpecies.setError(getString(R.string.non_blank));