Android textview - possible to border each letter (like a table border)

Question

I want to know if its possible to design my textview in a way where 8000 LP would look like [8|0|0|0] LP (with the top and bottom border as well). I tried looking it up but all I could find is how people want an outline/shadow border on text. I dont want to create a table in my layout if thats possible, but if its required please give an example, tailored to my code format.

Heres an example of what i mean... it has each number seperated by that square border.

Heres my xml(shortened for relevant info only).

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/default_background_obelisk"
    android:scaleType="centerCrop"
    android:padding="16dp">
<TextView
        android:id="@+id/playerTwo_LP"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:textSize="40dp"
        android:textColor="#ffffff"
        android:text="8000 LP"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:rotation="180"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/playerTwo_addLP"
        app:layout_constraintRight_toLeftOf="@+id/playerTwo_loseLP"
        app:layout_constraintBottom_toBottomOf="@+id/playerTwo_toolKit"
        android:textIsSelectable="true"/>

*    *    *

<TextView
        android:id="@+id/playerOne_LP"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="8000 LP"
        android:textAppearance="?android:attr/textAppearanceLarge"
        app:layout_constraintTop_toTopOf="@+id/playerOne_toolKit"
        app:layout_constraintLeft_toRightOf="@+id/playerOne_toolKit"
        app:layout_constraintRight_toLeftOf="@+id/playerOne_CardLibrary"
        app:layout_constraintBottom_toBottomOf="parent"/>

Current Layout

Put some between letters, or change the String to char arrays! — Xenolion, Sep 15 '17 at 01:53
@Xenolion can you post an example of how this would be done? — The Gaming Hideout, Sep 15 '17 at 02:29

score 2 · Accepted Answer · answered Sep 15 '17 at 08:01

The code provided will lead to a view as shown in the picture. If it is what you want you can follow along or you can customize it to what you want!

First you need to make a bordering xml drawable. This will be used as a background to each part of your text. And around each letter or number in your text. Make a resource file inside drawable folder lets call it border.xml (full name res/drawable/border.xml).Copy and paste this inside it:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
      android:shape="rectangle" >
        <solid android:color="#00ffffff" />
        <stroke android:width="1dip" android:color="#4fa5d5"/>
        <padding android:left="4dp" android:right="4dp" 
                android:bottom="1dp" android:top="1dp"/>                   
    </shape>

This will bring a bordering effect on your text, You can also edit color and padding to fit your needs. The we need to create a layout with TextView as the root view. So in your layout folder make a file lets call it border_text_view.xml(full name res/layout/border_text_view.xml). Copy and Paste the code below in it:

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

Note: The background is set to the previous declared border.xml from the drawable folder.

Then in your layout where you plan to display the bordering text lets say its activity_main (it can be any layout you want to display the view).

Add this to that layout:

    .......
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/layout_border"/>
    .......

Then in your layout's Java Class(Activity or Fragment) get a reference to the Linear layout added above and call the method as follows:

    LinearLayout linearLayout=(LinearLayout)findViewById(R.id.layout_border);  
    addBorderedView(this, linearLayout, "8000LP");

Now make the method addBorderedView as follows:

    private void addBorderedView(Context context, LinearLayout layout, String string_to_display) {
    String[] array = string_to_display.split("");
    for (int i = 1; i < array.length; i++) {
        TextView borderedTextView = (TextView) LayoutInflater.from(context).inflate(R.layout.border_text_view, null);
        borderedTextView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        borderedTextView.setGravity(Gravity.CENTER);
        borderedTextView.setText(array[i]);
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) borderedTextView.getLayoutParams();
        params.setMargins(2, 0, 2, 0); //substitute parameters for left, top, right, bottom
        borderedTextView.setLayoutParams(params);
        layout.addView(borderedTextView);
    }
}

To improve performance you may need to make a view holder if you plan to display large sentences this way, if you are not then you are good to go!

Ill try it out. For now, for the detailed explanation ill vote up. If it works in my mobile ide then ill acxept it as an answer! — The Gaming Hideout, Sep 15 '17 at 12:06
`addBorderedView(this, linearLayout, "8000LP"); ` is giving me 3 "unexpected end of declaration" errors — The Gaming Hideout, Sep 15 '17 at 12:39
I dont know what is going on, but it works fine in my android studio project! Try using context ActivityName.this like `MainActivity.this` also call the method in your activity methods like `onCreate()`. Also check if the brackets are well organised. Apart from that the code works fine, also context in a fragment is `getActivity()` — Xenolion, Sep 15 '17 at 14:58
I got it to work. Thank you. But is there a way to make the background of the text a certain color while having the square borders? — The Gaming Hideout, Sep 15 '17 at 16:18
Good!. See this line in `(border.xml)``` The two zeros 00 makes the colour transparent although ffffff is white change it to the colour of your choice. Then each letter will change its own background colour. But if your you want all the `"8000LP"` having a common colour while ignoring the borders. The go to the LinearLayout you added in your layout and add this attributes `android:background="#ffbbaa"` where by `ffbbaa` can be any colour of your choice.But I think you need the first option! — Xenolion, Sep 15 '17 at 16:25
Remember to remove the two zeros 00, else any colour will be completely transparent! — Xenolion, Sep 15 '17 at 16:27

Android textview - possible to border each letter (like a table border)

Current Layout

1 Answers1