CODEWITHSUNDEEP
androidkotlin
szakes1
szakes1

Reputation: 904

How to make TextView responsive on devices with higher screen ratio?

I'm writing a very simple coupon application for Android, but I'm struggling with a TextView.

For devices with 16:9 screens, the TextView displays just OK, but the problem starts with devices such as Samsung Note 9 I have, which has 18:9 screen. TextView isn't getting bigger to fill the blank space.

For 16:9 screen I use a Google Pixel 2 emulator whereas for 18:9 screen I use my own Samsung Note 9.

Does anybody have any clues how to make my TextView responsive, so it can occupy the blank space?

Photos for my devices:

Pixel 2 - https://i.sstatic.net/tUbJh.png Samsung Note 9 - https://i.sstatic.net/5zg0u.jpg

I tried to play with AutoSizing TextView, but I have no clue how to make it work for my problem.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activities.GeneratedCouponActivity" android:orientation="vertical" android:padding="16dp">
    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:layout_alignParentStart="true">
            <TextView
                    android:text="DATA WYDANIA:"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" android:id="@+id/textView" android:textSize="18sp"
                    android:textStyle="bold" android:textColor="@android:color/black"/>
            <TextView
                    android:text="25/06/2019"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" android:id="@+id/textView2" android:textSize="16sp"
                    android:textColor="@android:color/black"/>
        </LinearLayout>
        <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:layout_alignParentEnd="true">
            <TextView
                    android:text="UNIKALNY KOD:"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" android:id="@+id/textView3" android:textStyle="bold"
                    android:textSize="18sp" android:textColor="@android:color/black"/>
            <TextView
                    android:text="f-62-pT-6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" android:id="@+id/textView7"
                    android:textColor="@android:color/black" android:textSize="16sp"/>
        </LinearLayout>
    </RelativeLayout>
    <ImageView
            android:layout_width="match_parent"
            android:layout_height="140dp" app:srcCompat="@drawable/coupon_icecream" android:id="@+id/imageView"/>
    <TextView
            android:text="@string/generated_coupon_rules"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" android:id="@+id/textView8" app:autoSizeTextType="uniform"
    />
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent" android:gravity="bottom">
        <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="95dp" android:layout_marginBottom="10dp" app:cardBackgroundColor="#FFC300"/>
        <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="95dp" app:cardBackgroundColor="#FFC300"/>
    </LinearLayout>
</LinearLayout>

Upvotes: 3

Views: 4609

Answers (2)

Tamir Abutbul
Tamir Abutbul

Reputation: 7661

Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_height="140dp" for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

If you want to create one layout to support all screen sizes you can use ConstraintLayout with guidelines and Chains to support different screen sizes.

Here is an example using ConstraintLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">


<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/textView5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/textView5" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Time"
    app:layout_constraintBottom_toTopOf="@+id/imageView"
    app:layout_constraintStart_toStartOf="@+id/textView5"
    app:layout_constraintTop_toBottomOf="@+id/textView5" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view    I am some long text view     "
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline5" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="20dp"
    app:layout_constraintGuide_percent="0.7" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintTop_toTopOf="@+id/textView2" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toTopOf="@+id/guideline5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    tools:srcCompat="@tools:sample/avatars[1]" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="Date"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="#ff1"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView7"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline4" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="#ff1"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView6" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.7" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="560dp"
    app:layout_constraintGuide_percent="0.45" />

</androidx.constraintlayout.widget.ConstraintLayout>

Here is how it will look (I am attaching an image from the layout editor so you could see the constraints and guidelines):

enter image description here

Upvotes: 3

nimi0112
nimi0112

Reputation: 2133

Use auto-sizing TextView with these attributes in your TextView.

<TextView
app:autoSizeTextType="uniform"
app:autoSizeMinTextSize="16sp"
app:autoSizeMaxTextSize="100sp"
app:autoSizeStepGranularity="1sp" />

Note: It is advised to not use a layout_width or layout_height of "wrap_content" when using TextView auto-sizing, as this may lead to unexpected results. Using a fixed dimension or "match_parent" is fine (or a “0dp” match_constraint if you are using ConstraintLayout).

Read Making the most of TextView auto-sizing on Android to have a deeper understanding of this.

Upvotes: 3

Related Questions