When the font size is changed in the phone, text, buttons go out of the screen

Question

I came across a problem and I don't know where to look for information, in case you know how to resolve my problem, please lend me your help. I tried my app on another phone, it is the same type of phone with the same api. The thing is that one of the phones has the font size bigger and the icons/buttons leave the screen. Is there a way to set my app to open in a particular type of font size (ex: Tiny, extra small, etc)? Thanks in advance!

Later Edit:

Here's the code of my xml layout:

<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"
android:orientation="vertical"
android:layout_gravity="center"
tools:context="****"
android:focusableInTouchMode="true">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="10dp">

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/login_first_dialog"
        android:textColor="@color/textColorMainActivity"
        android:textSize="30dp"
        android:gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="@string/login_second_dialog"
        android:textColor="@color/textColorMainActivity"
        android:textSize="15dp"
        android:gravity="center"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        android:layout_gravity="center">

        <Button
            android:id="@+id/ButtonPhoneNumberID"
            android:drawableStart="@drawable/ic_phone_black_24dp"
            android:background="@drawable/login_button_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:text="@string/phone_button"
            android:textColor="@color/textColorMainActivity"/>
        <Button
            android:id="@+id/ButtonHelpLoginID"
            android:drawableStart="@drawable/ic_help_outline_black_24dp"
            android:background="@drawable/login_button_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:text="@string/complaints_button"
            android:textColor="@color/textColorMainActivity"/>
    </LinearLayout>
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginBottom="10dp">
    <EditText
        android:id="@+id/EditTextLogInEnterEmailID"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="@string/email_hint"
        android:drawableStart="@drawable/ic_email_black_24dp"
        android:drawablePadding="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginStart="5dp"/>
    <EditText
        android:id="@+id/EditTextLogInEnterPasswordID"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="@string/password_hint"
        android:drawableStart="@drawable/ic_lock_outline_black_24dp"
        android:drawablePadding="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginStart="5dp"/>
    <Button
        android:id="@+id/LogInButtonID"
        android:background="@drawable/login2_button_style"
        android:drawableEnd="@drawable/ic_send_black_24dp"
        android:drawablePadding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#808e85"
        android:layout_marginBottom="10dp"
        android:text="@string/log_in_button"/>

    <Button
        android:id="@+id/SignUpButtonID"
        android:background="@drawable/login2_button_style"
        android:layout_marginTop="10dp"
        android:drawableEnd="@drawable/ic_person_add_black_24dp"
        android:drawablePadding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sign_up_button"
        android:textColor="#808e85"
        android:layout_marginBottom="20dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark"
        android:orientation="vertical"
        android:gravity="center">
        <ProgressBar
            android:id="@+id/ProgressBarLogInID"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:visibility="gone"
            />
    </LinearLayout>

</LinearLayout>

You're setting fix sized width for your views.. even if you don't change the size on the same device you'll have problems on different devices.. try using `wrap_content` or `match_parent` — ColdFire, Mar 09 '18 at 13:39

score 0 · Answer 1 · answered Mar 08 '18 at 23:39

0

Looks like you are using sp units to indicate the font size on Button TextView and so on... Instead, use dp.

For example: You might have this in you layout xml file text_size="10sp" change that to 10dp

answered Mar 08 '18 at 23:39

Eddie

68
8

That's not the problem, even if I changed sp to dp (to be hoest I didn't tink it will change something) when I change the font size on my phone, the writing occupies to much of the screen and the buttons tend to "leave the screen". So, nothing changed – Dean Mar 09 '18 at 13:29
sp is scaled by the user’s font size preference, so changing sp to dp should make the text stay the same. Post screenshots, for us to have a more clear understating of what the problem is – Eddie Mar 09 '18 at 19:33

score 0 · Answer 2 · answered Mar 09 '18 at 22:29

0

Please, do not use "dp" for the attribute android:textSize in TextView.
Use instead "sp" for text size e.g. android:textSize="30sp"
You can use "dp" for any margin or padding related stuff.
Checkout this link for more explanation: What is the difference between "px", "dip", "dp" and "sp"?

answered Mar 09 '18 at 22:29

Fahri Can

431
3
13

I didn't use dp for text size the first time I made the layout, I changed them only because Eddie told me to try and see if it works. Originally I used sp for text size – Dean Mar 10 '18 at 03:17
Okay, by the way, did you tried to the ConstraintLayout? Because it could be negative for the performance of your app to have 4 nested LinearLayouts. – Fahri Can Mar 10 '18 at 18:48

When the font size is changed in the phone, text, buttons go out of the screen

2 Answers2