Pre-style the Color of a Substring in a Spinner Option [Android Studio]

Question

I've got an SQLite database with a units table. The units table is set up with only two columns:

create table units (_id INTEGER PRIMARY KEY, desc TEXT)

Example data for a row in this table is:

• _id: 4
• desc: "Helix #5 [2231]"

The "[2231]" substring is important, and I'd like to change its color to a medium gray color. Id also prefer to do this to the data in the desc column, as opposed to manipulating it with java.

So, I query for the data:

/**
 * Get all unit records for display in spinner
 */
public Cursor getAllUnitRecords(){
    String sql = "select * from units order by `desc`";
    return db.rawQuery(sql, null);
}

My spinner looks like this:

<Spinner
    android:id="@+id/UnitSpinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:spinnerMode="dropdown" />

And I get the data to the spinner like this:

// Prepare unit dropdown
Cursor units = db.getAllUnitRecords();
MatrixCursor unitsMatrixCursor = new MatrixCursor(new String[] { "_id", "desc" });
unitsMatrixCursor.addRow(new Object[] { 0, "" });
MergeCursor unitsMergeCursor = new MergeCursor(new Cursor[] { unitsMatrixCursor, units });
String[] unitsFrom = new String[]{"desc"};
int[] unitsTo = new int[]{android.R.id.text1};
Spinner unitSpinner = (Spinner) findViewById(R.id.UnitSpinner);
SimpleCursorAdapter unitAdapter = new SimpleCursorAdapter(this, android.R.layout.simple_spinner_dropdown_item, unitsMergeCursor, unitsFrom, unitsTo, 0);
unitAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
unitSpinner.setAdapter(unitAdapter);

Since I'd like to color the "[2231]" substring a medium gray color, I thought I might be able to change the value of desc in the database, so that it looks like this:

"Helix #5 <font color='#6e737e'>[2231]</font>"

I did that only because I was searching the internet, and it seemed like it might work. Well, that doesn't work, as the tags are just output, instead of changing the color. What is wrong, and how can I fix it? I guess I'm open to a different solution if necessary, but this Android stuff is hard for me, as I don't work on it very often, so I was trying to go for the easiest solution.

UPDATE #1 ----------------------

So @MartinMarconcini was kind enough to point me in the right direction, and I copy and pasted his colorSpan method into my activity class to test it out. I then looked all around Stack Overflow for any clues as to how to modify the text of my spinner, and then how to modify the text that's in a SimpleCursorAdapter.

I found these questions with answers:

• Android, using SimpleCursorAdapter to set colour not just strings
• Changing values from Cursor using SimpleCursorAdapter

That gave me some ideas, so I tried to work with that:

// Prepare unit dropdown
Cursor units = db.getAllUnitRecords();
MatrixCursor unitsMatrixCursor = new MatrixCursor(new String[] { "_id", "desc" });
unitsMatrixCursor.addRow(new Object[] { 0, "" });
MergeCursor unitsMergeCursor = new MergeCursor(new Cursor[] { unitsMatrixCursor, units });
String[] unitsFrom = new String[]{"desc"};
int[] unitsTo = new int[]{android.R.id.text1};
Spinner unitSpinner = (Spinner) findViewById(R.id.UnitSpinner);
SimpleCursorAdapter unitAdapter = new SimpleCursorAdapter(this, android.R.layout.simple_spinner_dropdown_item, unitsMergeCursor, unitsFrom, unitsTo, 0);
unitAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

/* NEW CODE STARTS HERE */
unitAdapter.setViewBinder(new SimpleCursorAdapter.ViewBinder() {

    public boolean setViewValue(View aView, Cursor aCursor, int aColumnIndex) {

        if (aColumnIndex == 1) {
            String desc = aCursor.getString(aColumnIndex);
            TextView textView = (TextView) aView;
            final Spannable colorized = colorSpan(desc);
            textView.setText(TextUtils.isEmpty(colorized) ? desc + "a" : colorized + "b");
            return true;
        }

        return false;
    }
});
/* NEW CODE ENDS HERE */

unitSpinner.setAdapter(unitAdapter);

Notice I added the letter "a" if there was no text, and "b" if there was text. Sure enough, the "a" and "b" were added to my spinner items, but there was no color change! So, I am trying ... but could still use some help. Here is an image of what I'm seeing:

Answer 1

As mentioned in the comments, the presentation shouldn’t be tied to the logic. This is a presentation problem. You want to display a text and you want part of that text to be colored.

So, anywhere in your app where you need to display/present this text to the user, say…

someTextViewOrOtherWidget.setText(yourString);

…you’ll then have to call a method that does the coloring for you.

Example…

I’d move this code into a separate method/place for reuse and make it more re-usable by not hardcoding the [] and such,but this is how a simple example would look:

private Spannable colorSpan(final String text) {
    if (TextUtils.isEmpty(text)) {
        // can't colorize an empty text
        return null;
    }

    // Determine where the [] are.
    int start = text.indexOf("[");
    int end = text.indexOf("]");

    if (start < 0 || end < 0 || end < start) {
        // can't find the brackets, can't determine where to colorize.
        return null;
    }

    Spannable spannable = new SpannableString(text);

    spannable.setSpan(
            new ForegroundColorSpan(Color.BLUE)
            , start
            , end
            , Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    );

    return spannable;
}

And you’d use it like…

    String text = "Hello [123123] how are you?";
    final Spannable colorized = colorSpan(text);

    textView.setText(TextUtils.isEmpty(colorized) ? text : colorized);

I hope this gives you a better idea how to get started.

Answer 2

So, with a lot of help from @MartinMarconcini, I finally achieved what needed to be done, and so I wanted to leave "the answer" here, in case anyone else wants to see what needed to be done. I ended up making a custom cursor adapter, and although I'm still dumbfounded by the complexity of Android Studio, it works!

First, in the activity, the way SimpleCursorAdapter was being used ended up getting changed to the custom cursor adapter (which extends SimpleCursorAdapter).

These lines:

Spinner unitSpinner = (Spinner) findViewById(R.id.UnitSpinner);
SimpleCursorAdapter unitAdapter = new SimpleCursorAdapter(this, android.R.layout.simple_spinner_dropdown_item, unitsMergeCursor, unitsFrom, unitsTo, 0);
unitAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
unitSpinner.setAdapter(unitAdapter);

Were replaced with these lines:

Spinner customUnitSpinner = (Spinner) findViewById(R.id.UnitSpinner);
UnitSpinnerCursorAdapter customUnitAdapter = new UnitSpinnerCursorAdapter(this, R.layout.unit_spinner_entry, unitsMergeCursor, unitsFrom, unitsTo, 0);
customUnitSpinner.setAdapter(customUnitAdapter);

I put the custom cursor adapter in its own file, and I put Martin's colorSpan method in there too (for now):

package android.skunkbad.xxx;

import android.content.Context;
import android.database.Cursor;
import android.graphics.Color;
import android.support.v4.widget.SimpleCursorAdapter;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.TextUtils;
import android.text.style.ForegroundColorSpan;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class UnitSpinnerCursorAdapter extends SimpleCursorAdapter {

    private Context context;
    private int layout;

    public UnitSpinnerCursorAdapter(Context context, int layout, Cursor c, String[] from, int[] to, int flags) {

        super(context, layout, c, from, to, flags);
        this.context = context;
        this.layout = layout;

    }

    /**
     * newView knows how to return a new spinner option that doesn't contain data yet
     */
    @Override
    public View newView(Context context, Cursor cursor, ViewGroup parent) {
        super.newView(context, cursor, parent);

        Cursor c = getCursor();

        final LayoutInflater inflater = LayoutInflater.from(context);
        View v = inflater.inflate(layout, parent, false);

        int descCol = c.getColumnIndex("desc");
        String desc = c.getString(descCol);
        final Spannable colorized = colorSpan(desc);

        TextView unit_spinner_entry = (TextView) v.findViewById(R.id.custom_spinner_entry_desc);

        if (unit_spinner_entry != null) {
            unit_spinner_entry.setText(TextUtils.isEmpty(colorized) ? desc : colorized);
        }

        return v;
    }

    /**
     * bindView knows how to take an existing layout and update it with the data pointed to by the cursor
     */
    @Override
    public void bindView(View view, Context context, Cursor cursor) {
        super.bindView(view, context, cursor);

        int descCol = cursor.getColumnIndex("desc");
        String desc = cursor.getString(descCol);
        final Spannable colorized = colorSpan(desc);

        TextView unit_spinner_entry = (TextView) view.findViewById(R.id.custom_spinner_entry_desc);

        if (unit_spinner_entry != null) {
            unit_spinner_entry.setText(TextUtils.isEmpty(colorized) ? desc : colorized);
        }

    }

    private Spannable colorSpan(final String text) {
        if (TextUtils.isEmpty(text)) {
            // can't colorize an empty text
            return null;
        }

        // Determine where the [] are.
        int start = text.indexOf("[");
        int end = text.indexOf("]");

        if (start < 0 || end < 0 || end < start) {
            // can't find the brackets, can't determine where to colorize.
            return null;
        }

        end++; /* Why do we even need this ? */

        Spannable spannable = new SpannableString(text);

        spannable.setSpan(
                new ForegroundColorSpan(Color.rgb(100,100,100))
                , start
                , end
                , Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        );

        return spannable;
    }

}

Finally, I had to make a layout file for each entry in the spinner:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="50dp">


    <TextView
        android:id="@+id/custom_spinner_entry_desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16dp"
        android:textColor="#FFFFFF"
        android:layout_marginLeft="10dp" />

</LinearLayout>

Thanks Martin! It might seem like nothing to you, but it was hard for me, and I couldn't have done it without your help.

One note: I had to put end++; in your colorSpan method, because for some reason it wasn't coloring the closing bracket.