ConstraintLayout for Android

Question

This is how my app looks like in my IDE when I am designing the layout

However, this is what it looks like on my phone.

Is it better to set the constraint to the parent or to the nearest components?

Set it to the nearest component. You'll have to have atleast one component constrained to the parent. — Aditya Kurkure, May 18 '20 at 19:26
Can you please share the layout.xml file so that we could take a look into the code and help you? Thanks! — Reaz Murshed, May 18 '20 at 19:26

Shubh Saraswat · Answer 1 · 2020-05-18T19:33:29.160

0

Its better if you set constraint to the nearest element and I am no expert but in best practice I have seen people prefer Linear Layout for your kind of page designs.

If you attach your code I will be able to answer it better.

edited May 18 '20 at 19:33

answered May 18 '20 at 19:26

Shubh Saraswat

116
7

score 0 · Answer 2 · answered May 18 '20 at 19:41

Sorry I added my code in an answer because i wasn't able to edit my question "It looks like your post is mostly code; please add some more details"

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


<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="4dp"
    android:text="TextView"
    android:visibility="gone"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/name" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="4dp"
    android:text="TextView"
    android:visibility="gone"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/age" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="130dp"
    android:layout_height="130dp"
    android:layout_marginTop="32dp"
    android:background="@drawable/ic_launcher_background"
    android:src="@drawable/ic_launcher_foreground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintCircleRadius="600dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.16"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="pick img"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.255"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView" />

<TextView
    android:id="@+id/terms"
    android:layout_width="125dp"
    android:layout_height="170dp"
    android:layout_marginStart="36dp"
    android:layout_marginLeft="36dp"
    android:layout_marginTop="65dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.848"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.181"
    tools:text="@tools:sample/lorem/random" />

<EditText
    android:id="@+id/name"
    android:layout_width="173dp"
    android:layout_height="43dp"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="44dp"
    android:layout_marginEnd="194dp"
    android:layout_marginRight="194dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="Name"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.209" />

<EditText
    android:id="@+id/age"
    android:layout_width="172dp"
    android:layout_height="43dp"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="195dp"
    android:layout_marginRight="195dp"
    android:layout_marginBottom="422dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="age"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/name"
    app:layout_constraintVertical_bias="0.0" />

<EditText
    android:id="@+id/phone"
    android:layout_width="172dp"
    android:layout_height="37dp"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="195dp"
    android:layout_marginRight="195dp"
    android:layout_marginBottom="361dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="phone"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/age"
    app:layout_constraintVertical_bias="0.0" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="496dp"
    android:layout_marginEnd="317dp"
    android:layout_marginRight="317dp"
    android:layout_marginBottom="216dp"
    android:text="Country"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Spinner
    android:id="@+id/spinner"
    android:layout_width="169dp"
    android:layout_height="23dp"
    android:layout_marginStart="9dp"
    android:layout_marginLeft="9dp"
    android:layout_marginTop="496dp"
    android:entries="@array/items"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.54"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="106dp"
    android:layout_height="43dp"
    android:layout_marginStart="264dp"
    android:layout_marginLeft="264dp"
    android:layout_marginTop="9dp"
    android:layout_marginBottom="100dp"
    android:checked="true"
    android:text="Agree"
    app:layout_constraintBottom_toTopOf="@+id/spinner"
    app:layout_constraintEnd_toEndOf="@+id/terms"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/terms" />

<Button
    android:id="@+id/button2"
    android:layout_width="144dp"
    android:layout_height="53dp"
    android:layout_marginStart="160dp"
    android:layout_marginLeft="160dp"
    android:layout_marginTop="62dp"
    android:layout_marginEnd="160dp"
    android:layout_marginRight="160dp"
    android:text="REGister"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.471"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.79" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="12dp"
    android:layout_marginEnd="321dp"
    android:layout_marginRight="321dp"
    android:text="Gender"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.527"
    tools:ignore="MissingConstraints" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="44dp"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="24dp"
    android:text="TextView"
    android:visibility="gone"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

<RadioGroup
    android:layout_width="242dp"
    android:layout_height="58dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.538"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.616" >

    <RadioButton
        android:id="@+id/male"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="male" />

    <RadioButton
        android:id="@+id/female"
        android:layout_width="match_parent"
        android:layout_height="28dp"
        android:text="female" />
</RadioGroup>


</androidx.constraintlayout.widget.ConstraintLayout>

Just add constraints with respect to the nearest elements and you should get your desired output. Also if you want to design it specifically for your phone you should change the size of the display in android studio to one that is similar to your phone. If you want to support multiple screen-sizes check this post out.https://stackoverflow.com/questions/8255985/how-to-support-different-screen-size-in-android — Aditya Kurkure, May 18 '20 at 19:48

score 0 · Answer 3 · answered May 18 '20 at 20:13

I see that you are using a lot of hardcoded margins, which will inevitably lead to some undesired effects on different devices. Instead of fixing your code, I will provide you with ideas where to look into to learn about fully flexible layouts.

Text - you can set autotextsize to uniform, this will ONLY work while using match parent/constraint attributes, meaning if you keep wrap_content nothing will happen

General - width/height percentage, you can set the percentage of the whole screen (from 0 to 1) this ONLY takes effect if setting the width/height to match constraint (0dp). You can combine this with autotextsize to make a resizable textview according to the phone you are running it on

Guidelines - these do not appear in the app, they are only used for setting percentage values, meaning you can set it to for example 10% and constrain views to it. To make guidelines do the following: right-click on the layout editor - Helpers - guidelines (horizontal or vertical), then to change the value click on the icon at the start of the guideline that looks like a triangle twice (you'll see what it does): enter image description here

Barriers - they work in the case if you have multiple elements that generally don't have a static size. They basically prevent any of those elements to cross a line. This is a little advanced and is not necessary in most cases

Chains - select multiple elements (using shift and clicking), right click, chains, and choose vertical or horizontal. This will position the elements the same distance from each other, these are really useful and I recommend playing with and looking into them.

That is all that I can remember. It always has annoyed me that it's so difficult to achieve the same look on all devices. Now that I have learned it, it just takes some time, but in the end my XML file ends up with 350+ lines of code. (Mainly from adding so many guidelines).

If you have any questions I will gladly answer.

EDIT: I would suggest following this woman: https://www.youtube.com/watch?v=h1LHzObflwo

thank you very much, if you have helpful more tutorials please provide it to me. I'm struggling with the layouts. :" — rana moh, May 18 '20 at 21:46

ConstraintLayout for Android

3 Answers3