CODEWITHSUNDEEP
androidandroid-layouttextviewandroid-button
ghost deathrider
ghost deathrider

Reputation: 151

How to align buttons and text views automatically for all different screen sizes?

enter image description hereI have built a BMI Calculator app. My text views, edit text, and buttons align differently in different screen sizes. How to align it so that it fits all screens?

I've already tried the previous answers in StackOverflow but so of the properties are removed in a new version of the android studio and also read google documentation but couldn't understand...Sorry!

My XML layout file

<?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"
    android:background="#5864"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="162dp"
        android:layout_marginLeft="162dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="161dp"
        android:layout_marginRight="161dp"
        android:text="@string/bmi_calculator"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.436"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/userHeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="63dp"
        android:ems="10"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        tools:layout_editor_absoluteX="107dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:importantForAutofill="no"
        android:hint="@string/enter_height"
        android:gravity="center"
        android:inputType="numberDecimal"/>

    <EditText
        android:id="@+id/userWeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="66dp"
        android:ems="10"
        android:inputType="numberDecimal"
        app:layout_constraintTop_toBottomOf="@+id/userHeight"
        tools:layout_editor_absoluteX="106dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:importantForAutofill="no"
        android:hint="@string/enter_weight"
        android:gravity="center"/>

    <TextView
        android:id="@+id/userBMI"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:hint="@string/your_bmi_will_be_displayed_here"
        app:layout_constraintTop_toBottomOf="@+id/userWeight"
        tools:layout_editor_absoluteX="107dp"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:gravity="center_horizontal"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:onClick="buttonClicked"
        android:text="@string/calculate_bmi"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/userBMI"
        android:layout_alignParentBottom="true"
        android:textSize="20sp"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

I'm learning android on my own, a little help, please. I've added the images showing how my app looks in two different screen size.

enter image description here

Upvotes: 1

Views: 1033

Answers (1)

SebastienRieu
SebastienRieu

Reputation: 1512

you have to create "chain" --> constraint all bottoms of your component to the top of the element at it bottom using app:layout_constraintBottom_toTopOf

<?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"
    android:background="#5864">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bmi_calculator"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/userHeight"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/userHeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:gravity="center"
        android:hint="@string/enter_height"
        android:importantForAutofill="no"
        android:inputType="numberDecimal"
        app:layout_constraintBottom_toTopOf="@+id/userWeight"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/userWeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:gravity="center"
        android:hint="@string/enter_weight"
        android:importantForAutofill="no"
        android:inputType="numberDecimal"
        app:layout_constraintBottom_toTopOf="@+id/userBMI"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/userHeight" />

    <TextView
        android:id="@+id/userBMI"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:hint="@string/your_bmi_will_be_displayed_here"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/userWeight" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:onClick="buttonClicked"
        android:text="@string/calculate_bmi"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/userBMI" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

Related Questions