Search code examples
androidxmlandroid-layout

How to style dynamic text in android with TextView


I am using XML design to show a text which is dynamically created in below format

Details
    1. ESN: 0-4638929
    2. HW Address: E4:EE:D8:25:44:A3
    3. Hardware Version: 1
    4. Manufacturing Date: Fri Apr 20 16:27:00 GMT+05:30 2018
    5. Application: 2.14.5
    6. UUID: 9499542

Current Device Details
    1. Manufacturer: motorola
    2. Model: motorola edge 20 fusion
    3. OS Version: 12
    4. Screen Dimensions: 1080x2275
    5. Screen Density: 400 dpi
    6. Device Locale: English (India)
    7. Network Type: Mobile Data
    8. App Version: 1.5.4 (1132)

Diagnostics
    1. DDM: 0

ASIC Bootloader
    1. Version: 3

Transmit Power
    1. Transmit Power: 232
    

i am using TextView to show the text

 <TextView
                            android:id="@+id/consoleTextView"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:fontFamily="@font/roboto_regular"
                            app:fontFamily="@font/roboto_regular"
                            android:gravity="start|top"
                            android:textSize="13sp"
                            android:text="@string/formatted_text"
                            android:layout_marginTop="10dp"
                            android:autoLink="web"
                            android:textColor="@color/secondary_text_color" />

I am trying to style the below text in such a way that headers of different types/colors/font sizes etc and its list items are of different colors. also, list item text should be wrapped in such a way that long text should not start before the numbering.

I have tried to define some hardcoded string to achieve this but not sure how to generate this dynamically as several headings and list items are not fixed and can extend to many.

  <string name="formatted_text">
    <b>Diagnostics</b>\n
      1. DDM: 0\n\n

    <b>ASIC Bootloader</b>\n
      1. Version: 3\n\n

    <b>Operational Temperature Limits</b>\n
      1. Temp Charge Low: 0\n
      2. Temp Charge High: 65\n
      3. Temp Discharge Low: -5\n
      4. Temp Discharge High: 70\n\n

    <b>Query Hardware Version</b>\n
      1. Device Code: 1\n
      2. Silicon Revision: 144\n
      3. CPU Revision: 98\n
      4. Radio Revision: 98\n

</string>


Solution

  • You can use Spans to achieve this during runtime.

    https://developer.android.com/develop/ui/views/text-and-emoji/spans#android-ktx

    If you are using Kotlin, there is androidx.core KTX package that would allow you to do something like this.

        val string = buildSpannedString {
          bold {
            append("Diagnostics")
          }
          appendLine()
          append("1. DDM: 0")
    
          bold {
            color(Color.BLUE) {
              append("ASIC Bootloader")
            }
          }
    
          // more code
        }
    

    Hope this helps.