UI of the app is distorted when using app on some devices

Question

After generating a signed apk, and testing the app out on a couple of phones I noticed that the UI is distorted on some. The phones I've tested it out on are

1) Xiaomi Note 5 Pro [ Android 9 ]  [ works fine ] [ my phone ]  
2) Xiaomi Note 5 Pro [ Android 9 ]  [ distorted ]  
3) Xiaomi Note 5 Pro [ Android 9 ]  [ works fine ]
3) Lenovo k8 plus    [ Android 8 ]  [ works fine ] 
4) Xiaomi Note 7 Pro [ Android 10 ] [ distorted ] 
5) Samsung Galaxy    [ Android 11 ] [ distorted ]
   Fold 
6) Xiaomi Note 9     [ Android 9 ]  [ works fine ]
7) Poco X2           [ Android 10 ] [ distorted ]
9) Nokia 3           [ Android 9 ]  [ works fine ]

I Don't know why it distorts on some Android 9s but not all. While testing the app in the Studio, I used Android 9 & 11 as the virtual devices. I've included images below, the left being the distorted one and the right is How it's supposed to be.

[1]: Distorted : https://i.stack.imgur.com/1Xe6s.jpg [2]: Normal View : https://i.stack.imgur.com/YbyfR.jpg

Code from MainActivity

package com.example.kaish;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import android.content.Intent;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity  {
    Button Sad;
    Button Happy;
    Button Angry;
    Button Tired;
    Button Irritated;
    Button Idk;
    Button FS;
    Button anime;
    Button other;
    ImageView path, rev, caustic, valk, bangalore, octane;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //for gradient background animation
        ConstraintLayout constraintLayout = findViewById(R.id.M_layout);
        AnimationDrawable animationDrawable = (AnimationDrawable) constraintLayout.getBackground();
        animationDrawable.setEnterFadeDuration(2000);
        animationDrawable.setExitFadeDuration(4000);
        animationDrawable.start();

        anime = findViewById(R.id.anime_List);
        anime.setOnClickListener(v -> openAnime());

        valk = findViewById(R.id.sad_valk);
        valk.setOnClickListener(v -> openSad());

        bangalore = findViewById(R.id.bangalore_idk);
        bangalore.setOnClickListener(v -> openIdk());

        octane = findViewById(R.id.tired_octane);
        octane.setOnClickListener(v -> openTired());

        caustic = findViewById(R.id.caus_irri);
        caustic.setOnClickListener(v -> openIrritated());

        rev = findViewById(R.id.angry_rev);
        rev.setOnClickListener(v -> openAngry());

        path = findViewById(R.id.happy_lifeline);
        path.setOnClickListener(v -> openHappy());

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

        other = findViewById(R.id.other);
        other.setOnClickListener(v -> openOther());

        FS = findViewById(R.id.FS);
        FS.setOnClickListener(v -> openFS());

        Sad = findViewById(R.id.sad);
        Sad.setOnClickListener(v -> openSad());

        Happy = findViewById(R.id.happy);
        Happy.setOnClickListener(v -> openHappy());

        Angry = findViewById(R.id.angry);
        Angry.setOnClickListener(v -> openAngry());

        Tired = findViewById(R.id.tired);
        Tired.setOnClickListener(v -> openTired());

        Irritated = findViewById(R.id.irritated);
        Irritated.setOnClickListener(v -> openIrritated());

        Idk = findViewById(R.id.idk);
        Idk.setOnClickListener(v -> openIdk());


    }

    public void openAnime()
    {
        Intent intent = new Intent(this, anime.class);
        startActivity(intent);
    }

    public void openFS()
    {
        Intent intent = new Intent(this, FS.class);
        startActivity(intent);
    }
    public void openOther()
    {
     Intent intent = new Intent(this, other.class);
     startActivity(intent);
    }

    public void openSad()
    {
        Intent intent = new Intent(this, Sad.class);
        startActivity(intent);
    }
    public void openHappy()
    {
        Intent intent = new Intent(this, happy.class);
        startActivity(intent);
    }
    public void openAngry()
    {
        Intent intent = new Intent(this, angry.class);
        startActivity(intent);
    }
    public void openTired()
    {
        Intent intent = new Intent(this, tired.class);
        startActivity(intent);
    }
    public void openIrritated()
    {
        Intent intent = new Intent(this, irritated.class);
        startActivity(intent);
    }
    public void openIdk()
    {
        Intent intent = new Intent(this, idk.class);
        startActivity(intent);
    }
}

I'd love some advice, any would be appreciated because I have no idea why this is happening.

xml for main activity

<?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:id="@+id/M_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient_background_list"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/angry"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Angry"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.237"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.545" />

    <ImageView
        android:id="@+id/happy_lifeline"
        android:layout_width="102dp"
        android:layout_height="124dp"
        android:src="@drawable/lifeline_happy"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.239"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.186" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/cairo_semibold"
        android:text="Hello kai !!"
        android:textColor="#ffffff"
        android:textSize="23sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/textView4"
        app:layout_constraintHorizontal_bias="0.496"
        app:layout_constraintStart_toStartOf="@+id/textView4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.037" />

    <ImageView
        android:id="@+id/caus_irri"
        android:layout_width="105dp"
        android:layout_height="131dp"

        android:src="@drawable/caus_irri"
        app:layout_constraintBottom_toTopOf="@+id/irritated"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.232"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.996" />


    <Button
        android:id="@+id/anime_List"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Anime List"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.578"
        app:layout_constraintStart_toEndOf="@+id/FS"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.873" />

    <Button
        android:id="@+id/other"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Other"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/FS"
        app:layout_constraintHorizontal_bias="0.421"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.876" />

    <Button
        android:id="@+id/FS"
        android:layout_width="135dp"
        android:layout_height="33dp"
        android:layout_weight="1"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Favorite Song"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.876" />

    <Button
        android:id="@+id/idk"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Idk"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.781"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.774" />

    <Button
        android:id="@+id/sad"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Sad"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.781"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.317" />

    <ImageView
        android:id="@+id/tired_octane"
        android:layout_width="94dp"
        android:layout_height="124dp"
        android:src="@drawable/octane_tired"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.766"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.444" />

    <Button
        android:id="@+id/happy"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Happy"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.237"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.317" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/cairo_semibold"
        android:text="How do you feel today?"
        android:textColor="#ffffff"
        android:textSize="23sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3"
        app:layout_constraintVertical_bias="0.014" />

    <Button
        android:id="@+id/irritated"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Irritated"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.237"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.774" />

    <ImageView
        android:id="@+id/bangalore_idk"
        android:layout_width="102dp"
        android:layout_height="133dp"
        android:layout_marginTop="496dp"
        android:layout_marginBottom="2dp"
        android:src="@drawable/bangalore_idk"
        app:layout_constraintBottom_toTopOf="@+id/idk"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.786"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

    <ImageView
        android:id="@+id/angry_rev"
        android:layout_width="105dp"
        android:layout_height="131dp"
        android:src="@drawable/rev_angry"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.232"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.448" />

    <Button
        android:id="@+id/tired"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@drawable/buttonsad_background"
        android:fontFamily="@font/cairo_semibold"
        android:text="Tired"
        android:textAllCaps="false"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.781"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.545" />

    <ImageView
        android:id="@+id/sad_valk"
        android:layout_width="114dp"
        android:layout_height="141dp"
        android:src="@drawable/valk_sad"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.81"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.179" />






</androidx.constraintlayout.widget.ConstraintLayout>

and manifest, not sure if this is relevant but might as well.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.kaish">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/newnewicon"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/newnewicon_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Kaish">
        <activity android:name=".anime_4"></activity>
        <activity
            android:name=".anime_3"
            android:launchMode="singleTask"
            android:screenOrientation="portrait" />
        <activity
            android:name=".anime_2"
            android:launchMode="singleTask"
            android:screenOrientation="portrait" />
        <activity
            android:name=".anime"
            android:launchMode="singleTask"
            android:screenOrientation="portrait" />
        <activity
            android:name=".nsfw"
            android:screenOrientation="portrait" />
        <activity
            android:name=".other"
            android:screenOrientation="portrait" />
        <activity
            android:name=".Secret_activity"
            android:screenOrientation="portrait" />
        <activity
            android:name=".FS"
            android:screenOrientation="portrait" />
        <activity
            android:name=".idk"
            android:screenOrientation="portrait" />
        <activity
            android:name=".irritated"
            android:screenOrientation="portrait" />
        <activity
            android:name=".tired"
            android:screenOrientation="portrait" />
        <activity
            android:name=".angry"
            android:screenOrientation="portrait" />
        <activity
            android:name=".happy"
            android:screenOrientation="portrait" />
        <activity
            android:name=".Sad"
            android:screenOrientation="portrait" />
        <activity
            android:name=".MainActivity"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

EDIT: I also decided to include the xml of the themes, because I feel this contributes to the error.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Kaish" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">#04F2FE</item>
        <item name="colorPrimaryVariant">#04F2FE</item>
        <item name="colorOnPrimary">#4481EB</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <item name="android:navigationBarColor">#427EE8</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>

</resources>

The xml in this case is more relevant than what you've posted — javdromero, Jul 21 '21 at 19:25

score 0 · Answer 1 · answered Jul 21 '21 at 21:21

0

I suggest reading more about Constraint Layout and dimensions, you are not using them right specially the constraints. Also remember that dp are not like px.

In every Button and ImageView, you specify a fixed value on your width and height, like

android:layout_width="100dp"
android:layout_height="30dp"

Which is not entirely wrong but keep in mind that those values doesn't mean that the text is visible, wrap_content is the solution in that case

This is that xml blueprint:

See how the images overlap the buttons and the button text is not always visible

Using wrap_content on buttons:

android:layout_width="wrap_content"
android:layout_height="wrap_content"

As I said in the beginning, the constraints are also wrong.

answered Jul 21 '21 at 21:21

javdromero

1,850
2
11
19

Hmm I see, ill read up on them a bit, and try to constraint them better. Thank you so much for your time and effort for recreating this. – Exquisitive Jul 21 '21 at 21:24
but does is this also the cause of the black bar with the project name on top? – Exquisitive Jul 21 '21 at 22:02
No, this has nothing to do with that – javdromero Jul 21 '21 at 23:51
Well you are right that I'm using the constraints incorrectly causing them to overlap, but the app ran fine on the lenovo K8 plus which had a screen resolution of 720x1280, so I don't think this is the root problem; Lenovo K8 plus https://imgur.com/a/u3Pa74K – Exquisitive Jul 22 '21 at 11:00
Even in that image, the views are overlapping, You need to read and practice more about android development. – javdromero Jul 22 '21 at 14:07
I understand, I will work on that, but do you have any idea why the buttons turn purple and the black action bar appears – Exquisitive Jul 22 '21 at 15:13
1

jav, thank you for telling me that I need to work on my constraints, that was really insightful and thank you so much for your time. I Figured out why the things that happened were happening and have posted an answer. – Exquisitive Jul 22 '21 at 16:59

score 0 · Answer 2 · answered Jul 22 '21 at 16:58

0

The problem has to do with the themes (night), and with the dark mode setting, if enabled, on each phone, so if anyone else ever experiences this, make sure to add an exception for dark mode. dark mode disable

answered Jul 22 '21 at 16:58

Exquisitive

13
2

UI of the app is distorted when using app on some devices

2 Answers2