Learn about barriers, match constraint, ratios for views using match constraint. These features manipulate how the app is presented and displayed.
What Are Barriers?
Barriers are an advanced feature of Android Studios that changes the layout of the app depending on the localization.
How to use Barriers
Step 1: Add a button, textView, or a source under “Common”
Step 2: Right click on the source and drag your mouse to “helpers” them to vertical or horizontal barrier.
Step 3: Set the barrier direction to left, right, top, bottom, start, or end. Then, add a button or another source, then drag that into the barrier label.
Step 4: The button now has a barrier in the direction you set it as. To put the barrier to use, add the constraint of the TextView to the barrier.
Now, the TextView will be relative to the Button to the barrierDirection you set the barrier as and will shift according to the position to the Button.
Barriers can also be used with multiple textViews. This is useful because overlapping of the textViews can be prevented, despite the change in the size of the textView.
<?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"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="hello"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.263"
app:layout_constraintStart_toEndOf="@+id/barrier"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.276" />
<TextView
android:id="@+id/textView"
android:layout_width="199dp"
android:layout_height="160dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:text="njfdnjkjnjdfnjfnjnfjnfjgnjgfnjgnjgnfsgngjkdgnjnfjknjfdnjkjnjdfnjfnjnfjnfjgnjgfnjgnjgnfgjsgngjkdgnjnfjknjfdnjkjnjdfnjfnjnfjnfjgnjgfnjgnjgnfgjsgngjkdgnjnfjknjfdnjkjnjdfnjfnjnfjnfjgnjgfnjgnjgnfgjsgngjkdgnjnfjknjfdnjkjnjdfnjfnjnfjnfjgnjgfnjgnjgnfgjsgngjkdgnjnfjknjfdnjkjnjdfnjfnjnfjnfjgnjgfnjgnjgnfgjsgngjkdgnjnfjknjfdnjkjnjdfnjfnjnfjnfjgnjgfnjgnjgnfgjsgngjkdgnjnfjknjfdnjkjnjdfgjgj"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/barrier"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="0dp"
android:layout_height="0dp"
app:barrierDirection="left"
app:constraint_referenced_ids="textView,textView2"
tools:layout_editor_absoluteX="384dp" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="180dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="GoodBye"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/barrier"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.336" />
</android.support.constraint.ConstraintLayout>Match Constraint
Match Constraint is a feature typically used for TextView and Buttons to set the size to literally, match the constraint. Rather than having numerical values for the size of the element, the match constraint feature allows for it to fit the size of the constraint. This can be used vertically and/or horizontally.
In addition, this feature can also be used along with barriers. Then the constraint will depend on the location of the barrier.
Step 1: First make sure to add constraints to all four sides, then click the layout_width and/or layout_height. Change it from wrap_content to match_contraint.
<?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"
tools:context=".MainActivity">
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>Ratios for Views
This feature also does as its name suggests, which is changing the views according to the ratio. The element’s size can be changed, but the ratio of it will be kept constant with the ratio for views.
Step 1: Add an image into the “drawable” folder under “res” (you can directly copy and paste the image, or you can find your image in the finder and add the image from the downloads folder.
Step 2: Place the element on to the screen and set the constraints to all four sides of the screen. (To do this, you drag the “imageView” under “Common” and select your preferred image from under Drawable Project.)
Step 3: Set your layout_width from wrap_content to match_constraint.
Step 4: After Step 3, a triangle will appear on the corner of the ID of the imageView. When clicked on, the ratio box will appear, and you will be able to change the ratio of the image to your preference.
<?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"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="w,1:1" //ratio
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/penguin" />
</android.support.constraint.ConstraintLayout>Great job, have fun with Android Studio! :)
