Center a Textview only in steps of the width of its monospace letters

Question

I am trying to create a fake LCD display.

It should exist of some normal text, showing some data, and a background, faking that LCD look:

I wrote this xml, aligning 3 TextViews on top of each other.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/footer_linearLayout_footer_parent"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/dashboard_bottom_background"
    android:gravity="center"
    android:padding="3dip" >

    <TextView
        android:id="@+id/textView_heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:ellipsize="none"
        android:lines="1"
        android:text="text"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" />

    <TextView
        android:id="@+id/textView_heading2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="0.15"
        android:ellipsize="none"
        android:gravity="center"
        android:lines="1"
        android:text="88888888888888888888888888888888888"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" />

    <TextView
        android:id="@+id/textView_heading3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="0.15"
        android:gravity="center"
        android:lines="1"
        android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" />

</RelativeLayout>

Works fine for some cases, but now look what happens if the textlength of the topmost View changes:

The Views aren't properly aligned any more, as only the upper View changed its width and therefore is centered again.

What I am asking is, is there a possibility to center a TextView, but only in steps of the width of one letter of the used monospace-font

Answer 1

I think the best solution is to use a TextView for each char with a drawable that represent the two layers "8" and "X" as background.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView_heading"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/char_0"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="0"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" 
        android:background="@drawable/lcd_char"/>

    <TextView
        android:id="@+id/char_1"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="1"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" 
        android:background="@drawable/lcd_char"/>

    <!-- ... -->

    <TextView
        android:id="@+id/char_n"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="n"
        android:textColor="@color/holo_blue_light"
        android:textSize="28dip" 
        android:background="@drawable/lcd_char"/>
</LinearLayout>

However, If you prefer, you can also use three horizontal LinearLayout for each layer in this way:

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

    <LinearLayout
        android:id="@+id/textView_heading"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/char_0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="0"
            android:textColor="@color/holo_blue_light"
            android:textSize="28dip" 
            android:background="@drawable/lcd_char"/>

        <!-- ... -->
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textView_heading2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/char_8_0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:alpha="0.15"
            android:text="8"
            android:textColor="@color/holo_blue_light"
            android:textSize="28dip" 
            android:background="@drawable/lcd_char"/>

        <!-- ... -->
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textView_heading3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/char_X_0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:alpha="0.15"
            android:text="X"
            android:textColor="@color/holo_blue_light"
            android:textSize="28dip" 
            android:background="@drawable/lcd_char"/>

        <!-- ... -->
    </LinearLayout>
</merge>

So in onCreate() method you can retrieve all led chars in this way:

TextView[] lcdChars = new TextView[3/*lcd size*/];
for (int i = 0; i < lcdChars.length; i++) {
    int resID = getResources().getIdentifier("char_"+i, "id", getPackageName());
    lcdChars[i] = (TextView) findViewById(resID);
}

And then set the text you want with a method like this:

private void setLCDText(char[] chars){
    for (int i = 0; i < lcdChars.length; i++) {
        if(i < chars.length){
            lcdChars[i].setText(chars, i, 1);
        }else{
            lcdChars[i].setText("");
        }
    }
}