Android development tips: Constraint Layout helpers II. part

In the first part of the introduction to Constraint Layout Helpers, I introduced Group, Guidline, Layer and Barrier. If you haven't seen them yet, don't forget to visit the first part!

Placeholder

Placeholder is helper which can help to position another views (that's where it's name comes from - it's "holding place" for view). When you call setContentId() method on placeholder object somewhere in your code, placeholder objects become the content view. If content view exists on the screen already, it will be treated as gone on its original location after setContentId() call.

E.g. when some of the upper circles is clicked, placeholder.setContentId() is called, placeholder becomes the clicked view (clicked view moves to placeholder's position, inherits placeholder's constraints).

 

val onClickListener = View.OnClickListener { view -> TransitionManager.beginDelayedTransition(content) //For animation effect placeholder.setContentId(view.id) //Set view to placeholder } image1.setOnClickListener(onClickListener) image2.setOnClickListener(onClickListener) image3.setOnClickListener(onClickListener)<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/content" android:paddingTop="16dp"> <ImageView android:id="@+id/image1" android:layout_width="64dp" android:layout_height="64dp" android:src="@drawable/background_badge_green" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toStartOf="@id/image2"/> <ImageView android:id="@+id/image2" android:layout_width="64dp" android:layout_height="64dp" android:src="@drawable/background_badge_red" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toEndOf="@id/image1" app:layout_constraintEnd_toStartOf="@id/image3"/> <ImageView android:id="@+id/image3" android:layout_width="64dp" android:layout_height="64dp" android:src="@drawable/background_badge_black" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toEndOf="@id/image2" app:layout_constraintEnd_toEndOf="parent"/> <androidx.constraintlayout.widget.Placeholder android:id="@+id/placeholder" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>

Don't miss my #goodroidtips I. or II. ,articles about useful tips and tricks for Android developers.

Flow

Similar to Group, Flow takes views ids into constraint_referenced_ids attribute and automatically creates Chain behavior between them. Chain behavior (way how views overflow the Flow) is determined by wrapMode attribute of Flow.

//Default behavior of Flow, just creates chain between referenced views //If views do not fit into Flow, they will overflow the Flow app:flow_wrapMode="none" OR //If views do not fit into Flow, they jump on another line and take place evenly app:flow_wrapMode="chain" OR //If views do not fit into Flow, they jump on another line and align to create rows and columns app:flow_wrapMode="aligned"

As we said, Flow automatically creates chain between it's elements. Chain style can be configured by flow_horizontalStyle or flow_verticalStyle attribute based on Flow's orientation. Behavior of chain style is basically the same as for chains.

For horizontal Flow app:flow_horizontalStyle="spread" //Default OR app:flow_horizontalStyle="packed" OR app:flow_horizontalStyle="spread_inside"

‍
 

First and last chain in the Flow can have different style attributes  as others e.g. for the first chain we define flow_firstHorizontalStyle="spread_inside" for the last chain we define flow_lastHorizontalStyle="packed". All the others chains in the middle took default flow_horizontalStyle="spread" because we did not defined anything.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.constraintlayout.helper.widget.Flow android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" app:flow_wrapMode="chain" app:flow_maxElementsWrap="2" app:flow_firstHorizontalStyle="spread_inside" app:flow_lastHorizontalStyle="packed" app:constraint_referenced_ids="circle1, ..., circle9"/> //Include 9 circles <include android:id="@+id/circle1" layout="@layout/circle"/> </androidx.constraintlayout.widget.ConstraintLayout>

 

Flow can be customized by many other attributes e.g.

//Orientation of Flow, can be vertical or horizontal android:orientation="vertical" //Maximum number of elements in one row or column app:flow_maxElementsWrap="3" //Vertical or horizontal gap between referenced views app:flow_horizontalGap="20dp" app:flow_verticalGap="20dp"

Bonus

Circular positioning

Circular positioning attributes allows you to constraint view to another view at specified angle and distance. Important attributes when we want to circularly position views are

app:layout_constraintCircle="@id/baseImage" //Constrained base view app:layout_constraintCircleRadius="90dp" //Radius of the circle app:layout_constraintCircleAngle="45" //Degree of the circle on which we display the view

E.g. positioning image1, image2 and image 3 around baseImage in 0, 45 and 90 degree.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/image1" android:layout_width="32dp" android:layout_height="32dp" android:src="@drawable/background_badge_green" app:layout_constraintCircle="@id/baseImage" app:layout_constraintCircleRadius="90dp" app:layout_constraintCircleAngle="0"/> <ImageView android:id="@+id/image2" android:layout_width="32dp" android:layout_height="32dp" android:src="@drawable/background_badge_green" app:layout_constraintCircle="@id/baseImage" app:layout_constraintCircleRadius="90dp" app:layout_constraintCircleAngle="45"/> <ImageView android:id="@+id/image3" android:layout_width="32dp" android:layout_height="32dp" android:src="@drawable/background_badge_green" app:layout_constraintCircle="@id/baseImage" app:layout_constraintCircleRadius="90dp" app:layout_constraintCircleAngle="90"/> <ImageView android:id="@+id/baseImage" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" android:src="@drawable/background_badge_black" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>

Resources: https://developer.android.com/reference