Ingenieurbüro Edelmann

Softwareentwicklung • Softwarearchitektur • Beratung

Android Studio - Constraint Layout, Guidelines und Percentage/Prozent

blog

Die neue Android Studio Version 2.2 (aktuell Preview 2.2.0.1) bietet mit dem neuen ContraintLayout einen neuen, interessanten Layout Manager an.

Via Support Library werden sogar SDK’s bis Version 9 unterstützt (Android 2.3 Gingerbread).

Ein interessantes neues Feature dabei, ist das Ausrichten an Hilfslinien (Guidelines). Um das mal auszuprobieren, wollte ich ein Label über vier Constraints an Hilfslinien ausrichten. Damit das Erscheinungsbild auf unterschiedlichen Displaygrößen gleich aussieht, wollte ich zusätzlich anstelle von fixen Pixelgrößen lieber Verhältnisse in Form von Prozentangaben einstellen.

Im neuen Layout Editor des Android Studios ist das zwar möglich, aber zumindest in der aktuellen Preview nicht unbedingt selbsterklärend.

Als erstes habe ich im Layout Editor eine neue horizontale Guideline (Hilfslinie) angelegt. Um die Größenangaben auf “Prozent” umstellen zu können, darf (in der aktuellen Preview) nur der Blueprint aktiv sein. Dazu oben in der Leiste mit den Buttons umstellen.

Android Studio Constraint Layout 1

Ist nur der Blueprint aktiv, kann durch klicken auf den Aufwärts-Pfeil im Bild auf “%” umgestellt werden.

Android Studio Constraint Layout 2

… und die Hilfslinie einfach auf 33% verschoben werden.

Android Studio Constraint Layout 3

Für eine zweite horizontale Hiflslinie bei 66 Prozent genauso verfahren.

Android Studio Constraint Layout 4

Als nächstes zwei vertikale Guidelines erzeugen.

Android Studio Constraint Layout 5

Jetzt ein TextView Widget per Drag&Drop in den Bereich der sich kreuzenden Guidelines ziehen. Das Widget “rastet” dann dort links und oben ein. (erkennbar an den roten Linien)

Android Studio Constraint Layout 6

Dann das Widget nach unten ..

Android Studio Constraint Layout 7

… und nach rechts einrasten.

Android Studio Constraint Layout 8

Und die Größe des TextViews von “wrap_content” auf “0dp” umstellen.

Android Studio Constraint Layout 9

Zum Schluss noch die Abstände, wie im Bild, auf 0dp setzen …

Android Studio Constraint Layout 10

… und den Vorschau Modus wieder aktivieren.

Android Studio Constraint Layout 11

FERTIG!

So leicht ist es, im neuen Layout Editor, Widgets an Hilfslinien auszurichten.

Entstanden ist dabei die folgenden XML Datei:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58


    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="de.ib_edelmann.constraintlayout.MainActivity">

    
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline1"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="173dp"
        app:relativePercent="34" />

    
        android:layout_width="wrap_content"
        android:id="@+id/guideline2"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="342dp"
        app:relativePercent="67" />

    
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline3"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="99dp"
        tools:layout_editor_absoluteY="0dp"
        app:relativePercent="26" />

    
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline4"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="291dp"
        tools:layout_editor_absoluteY="0dp"
        app:relativePercent="76" />

    
        android:layout_height="0dp"
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:text="Layout Constraints"
        android:textAppearance="@android:style/TextAppearance.Material.Large"
        android:textAlignment="center"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="@+id/guideline1"
        app:layout_constraintRight_toLeftOf="@+id/guideline4"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        android:background="#ff8000" />

Einfach oder?

Also bis jetzt beeindruckt mich die neue Android Studio Version ja schon. Mal sehen wie sich diese noch weiter entwickelt und ich diese produktiv einsetzen werde. ;)