Search code examples
javaandroidxmlaide-ide

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


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. duel link

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

layout


Solution

  • 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!

    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!