CODEWITHSUNDEEP
xmlandroid-constraintlayout
Foobar
Foobar

Reputation: 8485

Android Constraint Layout - Make View Occupy Top Half of Screen

I am trying to make a textview occupy the top half of the screen, so I can familiarize myself with the new constraint layout system.

I tried using the following:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    app:layout_constraintVertical_weight="2"
    tools:context=".MainActivity">

    <TextView
        android:text="Test"
        android:background="@color/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="1" />

</android.support.constraint.ConstraintLayout>

But, it just results in this:

Screenshot Of Emulator

What am I doing wrong?

Upvotes: 1

Views: 2379

Answers (1)

Martin Marconcini
Martin Marconcini

Reputation: 27246

If you use Constraint Layout 1.1.0 (latest stable at the time of writing)… the best way is to just use percentages!

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/black"
        android:text="Test"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

This produces:

This

UPDATE:

  1. Why do you set layout_width to 0dp and use start/end instead of layout:width="match_parent”?

Good question. ConstraintLayout doesn’t support match_parent (a decision that now, over a year later, I think was ok, because it forces users to ask this question when they are corrected, but I think it should have been a warning and the layout should have done what was expected -pin each side to the parent and use 0dp behind the scenes-). In practice it doesn’t always do that and this is more confusing than the technical correctness of using 0dp (which, behind the scenes, corresponds to MATCH_CONSTRAINT, not MATCH_PARENT). I suggest you peek at the official Constraint Layout docs to find out about it.

For the “Causal I’m In a hurry” reader, I used 0dp because `match_parent_ doesn’t work on ConstraintLayout as you think it does (it may look ok but it doesn’t work). 0dp means match the constraints, your size will be ultimately determined by that.

Why Start/End? Because you shouldn’t use left/right if you target API 16+ and if you target API 16< then you should use BOTH, because in left to right this is fine, but Arabic, Hebrew and many of the Right To Left languages, will not correctly work if you don’t use start/end. (Left is right, right is left!). Trust me on that one, use start/end always, for everything.

  1. How can I check what version of the constraint library I am using?

Your libraries are imported via Gradle, so open your build.gradle and find the dependencies section. It will contain a line similar to this:

implementation "com.android.support.constraint:constraint-layout:1.1.0”

(for example). No mystery.

Upvotes: 4

Related Questions