1

I am trying to design my app so it should look the same on all devices big or small, is this possible.

This is a sample I am playing with to attempt it:

<?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">

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintBottom_toBottomOf="@+id/textView3"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="@+id/textView3"
        app:layout_constraintVertical_bias="0.517" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Group1"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/top_guideline"
        app:layout_constraintVertical_bias="0.03" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintBottom_toBottomOf="@+id/textView3"
        app:layout_constraintEnd_toStartOf="@+id/textView3"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="@+id/textView3"
        app:layout_constraintVertical_bias="0.517" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Group1"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="0.034" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Group2"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.292" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintEnd_toStartOf="@+id/textView5"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="@+id/textView5"
        app:layout_constraintVertical_bias="0.551" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Group2"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/textView4"
        app:layout_constraintVertical_bias="0.051" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/textView5"
        app:layout_constraintVertical_bias="0.551" />

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

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

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/left_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.0" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/right_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="1.0" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="group3"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintHorizontal_bias="0.507"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.538" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="group3"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintHorizontal_bias="0.507"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toBottomOf="@+id/textView6"
        app:layout_constraintVertical_bias="0.074" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        app:layout_constraintBottom_toBottomOf="@+id/textView7"
        app:layout_constraintEnd_toStartOf="@+id/textView7"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="@+id/textView7"
        app:layout_constraintVertical_bias="0.482" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        app:layout_constraintBottom_toBottomOf="@+id/textView7"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:layout_constraintTop_toTopOf="@+id/textView7"
        app:layout_constraintVertical_bias="0.482" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.954" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Group4"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.849" />
</androidx.constraintlayout.widget.ConstraintLayout>

I am getting close I think however I would like the textview's text and buttons to get larger with larger screens and smaller with smaller screens but cannot figure it out.

Basically I would like the app to scale to look the same on any device(like it was an image and I just changed the scale), is this possible?

Thanks

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
Pearl
  • 392
  • 2
  • 12

1 Answers1

0

You can use those attributes:

app:layout_constraintHeight_percent="0.x"
app:layout_constraintWidth_percent="0.y"

To make your layout scale according to the screen size (I used a project with the support library for this but it will work on android as well):

<android.support.constraint.ConstraintLayout 
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:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">


<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.2"
    android:text="Button1"
    app:layout_constraintBottom_toBottomOf="@+id/textView3"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toEndOf="@+id/textView3"
    app:layout_constraintTop_toTopOf="@+id/textView3"
    app:layout_constraintVertical_bias="0.517" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.15"
    android:text="Group1"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/top_guideline"
    app:layout_constraintVertical_bias="0.03" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.2"
    android:text="Button1"
    app:layout_constraintBottom_toBottomOf="@+id/textView3"
    app:layout_constraintEnd_toStartOf="@+id/textView3"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toTopOf="@+id/textView3"
    app:layout_constraintVertical_bias="0.517" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.15"
    android:text="Group1"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    app:layout_constraintVertical_bias="0.034" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.15"
    android:text="Group2"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.292" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.2"
    android:text="Button2"
    app:layout_constraintBottom_toBottomOf="@+id/textView5"
    app:layout_constraintEnd_toStartOf="@+id/textView5"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toTopOf="@+id/textView5"
    app:layout_constraintVertical_bias="0.551" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.15"
    android:text="Group2"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toBottomOf="@+id/textView4"
    app:layout_constraintVertical_bias="0.051" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.2"
    android:text="Button2"
    app:layout_constraintBottom_toBottomOf="@+id/textView5"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toEndOf="@+id/textView5"
    app:layout_constraintTop_toTopOf="@+id/textView5"
    app:layout_constraintVertical_bias="0.551" />

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

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

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/left_guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="0dp" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/right_guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="1.0" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.15"
    android:text="group3"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintHorizontal_bias="0.507"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.538" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.15"
    android:text="group3"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintHorizontal_bias="0.507"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toBottomOf="@+id/textView6"
    app:layout_constraintVertical_bias="0.074" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.2"
    android:text="Button3"
    app:layout_constraintBottom_toBottomOf="@+id/textView7"
    app:layout_constraintEnd_toStartOf="@+id/textView7"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toTopOf="@+id/textView7"
    app:layout_constraintVertical_bias="0.482" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.2"
    android:text="Button3"
    app:layout_constraintBottom_toBottomOf="@+id/textView7"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toEndOf="@+id/textView7"
    app:layout_constraintTop_toTopOf="@+id/textView7"
    app:layout_constraintVertical_bias="0.482" />

<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.05"
    app:layout_constraintWidth_percent="0.2"
    android:text="Button4"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.954" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintWidth_percent="0.4"
    android:text="Group4"
    android:textSize="36sp"
    app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
    app:layout_constraintEnd_toStartOf="@+id/right_guideline"
    app:layout_constraintStart_toStartOf="@+id/left_guideline"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.849" />
</android.support.constraint.ConstraintLayout>

And it will look like this on all your screen sizes:

enter image description here

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
  • Unfortunately I cannot get this working. On different phone sizes it just makes the button height skinner making the text in the button hidden as the whitespace between stays roughly the same where on mine it shrinks the white space but will not resize the buttons. – Pearl May 29 '20 at 12:56
  • *making the text in the button hidden*, try to use [ssp](https://github.com/intuit/ssp) library or [Autosizing TextViews](https://developer.android.com/guide/topics/ui/look-and-feel/autosizing-textview) – Tamir Abutbul May 29 '20 at 16:09