CODEWITHSUNDEEP
androidandroid-layout
Martin
Martin

Reputation: 2914

How to make universal text size for display in Android?

I want to use TextViews in horizontal position (3 column GridLayout). Text sharing same width space (similar to layout_weight in LinearLayout). Each TextView has size 14sp. Problem is that on Huawei P20 and Xiami Mi, text doesn`t fit to display width(3 dots at the end of line or last word is missing entirely). Some texts are locked to 2 lines but on these phones they need 3 lines to fit. I thought that sp is universal metric and it should look the same on each display and resize text properly based on display density.

Why is it not working on those phones?

GridLayout(2x3) example: 

<GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:rowCount="2"
        android:columnCount="3">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_marginStart="@dimen/padding_small"
            android:layout_marginEnd="@dimen/padding_small"
            android:singleLine="true"
            android:textSize="14sp"
            android:textStyle="normal"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:textColor="@color/colorDark"
            android:text="@string/text1"/>

        <TextView
            android:id="@+id/changeableText1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_marginStart="@dimen/padding_small"
            android:layout_marginEnd="@dimen/padding_small"
            android:singleLine="true"
            android:textSize="14sp"
            android:textStyle="normal"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:textColor="@color/colorDark"
            android:text="--"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_marginStart="@dimen/padding_small"
            android:layout_marginEnd="@dimen/padding_small"
            android:singleLine="true"
            android:textSize="14sp"
            android:textStyle="normal"
            android:layout_row="0"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:textColor="@color/colorDark"
            android:text="@string/text2"/>

        <TextView
            android:id="@+id/changeableText2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_marginStart="@dimen/padding_small"
            android:layout_marginEnd="@dimen/padding_small"
            android:singleLine="true"
            android:textSize="14sp"
            android:textStyle="normal"
            android:layout_row="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:textColor="@color/colorDark"
            android:text="--"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_marginStart="@dimen/padding_small"
            android:layout_marginEnd="@dimen/padding_small"
            android:singleLine="true"
            android:textSize="14sp"
            android:textStyle="normal"
            android:layout_row="0"
            android:layout_column="2"
            android:layout_columnWeight="1"
            android:textColor="@color/colorDark"
            android:text="@string/text3"/>

        <TextView
            android:id="@+id/changeableText3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_marginStart="@dimen/padding_small"
            android:layout_marginEnd="@dimen/padding_small"
            android:textSize="14sp"
            android:singleLine="false"
            android:lines="2"
            android:textStyle="normal"
            android:layout_row="1"
            android:layout_column="2"
            android:layout_columnWeight="1"
            android:textColor="@color/colorDark"
            android:text="--"/>

    </GridLayout>

Upvotes: 0

Views: 190

Answers (2)

Natig Babayev
Natig Babayev

Reputation: 3305

You can try setting autoSizeTextType to uniform. Using app:autoSizeTextType="uniform" lets you to set fixed width or height for your TextView. Here is sample:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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">

  <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:autoSizeTextType="uniform" />

</LinearLayout>

You can read more here.

Upvotes: 2

Tamir Abutbul
Tamir Abutbul

Reputation: 7661

Sounds like you are looking for scalable size unit for texts, if that's the case you could use ssp

An android SDK that provides a new size unit - ssp (scalable sp). This size unit scales with the screen size based on the sp size unit (for texts). It can help Android developers with supporting multiple screens.

This is the sibling of the sdp size unit that should be used for non text views.

Its really simple to use, just add the dependency to the gradle:

implementation 'com.intuit.ssp:ssp-android:1.0.6'

And add this attribute (for example) to your textViews:

android:textSize="@dimen/_22ssp"

You can also check ssp_example.xml

Upvotes: 0

Related Questions