Android content does not show correctly

60 Views Asked by At

I'm developing an android app in Constraint layout that contains different fields such as ImageView,TextView,Buttons and EditText. It is diplaying well in design view of my android studio but it does not display full content on phones ? It also display them in an irregular script as I have set in my android studio.

this is how it appears on phone

This is my code

<?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/siba"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/text1"
        android:layout_width="106dp"
        android:layout_height="41dp"
        android:layout_marginEnd="68dp"
        android:layout_marginBottom="440dp"
        android:text="@string/ibiro"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/button4" />

    <EditText
        android:id="@+id/editTextNumber3"
        android:layout_width="155dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="236dp"
        android:layout_marginBottom="440dp"
        android:ems="10"
        android:hint="@string/kgs"
        android:importantForAutofill="no"
        android:inputType="number|text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="107dp"
        android:layout_height="36dp"
        android:layout_marginEnd="72dp"
        android:layout_marginBottom="380dp"
        android:text="@string/uburebure"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <EditText
        android:id="@+id/editTextNumber5"
        android:layout_width="162dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="232dp"
        android:layout_marginBottom="332dp"
        android:ems="10"
        android:hint="@string/m"
        android:importantForAutofill="no"
        android:inputType="number|text"
        app:layout_constraintBottom_toTopOf="@+id/button3"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/shaka"
        android:layout_width="88dp"
        android:layout_height="41dp"
        android:layout_marginEnd="104dp"
        android:layout_marginBottom="320dp"
        android:background="@color/green"
        android:text="@string/shaka"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="270dp"
        android:layout_height="218dp"
        android:layout_marginEnd="124dp"
        android:layout_marginBottom="80dp"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="65dp"
        android:layout_height="36dp"
        android:layout_marginTop="360dp"
        android:layout_marginEnd="24dp"
        android:text="@string/bmi"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="165dp"
        android:layout_height="38dp"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="4dp"
        android:text="@string/byinshi"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="37dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="4dp"
        android:text="Terms of use"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="96dp"
        android:layout_height="32dp"
        android:layout_marginEnd="124dp"
        android:layout_marginBottom="584dp"
        android:text="Languages"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="113dp"
        android:layout_height="74dp"
        android:src="@drawable/ic_launcher"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.06"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginEnd="24dp"


        android:layout_marginBottom="584dp"
        android:spinnerMode="dropdown"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>
1

There are 1 best solutions below

0
qki On

You have your constraints assigned to parent in most of your views

... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" />

so they will kinda overlap each other. You should constraint them logically to each other, not always the parent like in your case.

You should check this training before you try to work with ConstraintLayouts