Android Constraint Layout result differs when using guideline - android-constraintlayout

The result for a Constraint Layout differs when I use a Guideline in my Constraint Layout.
Guideline:
<?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"
android:id="#+id/constraintScroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_scroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<TextView
android:id="#+id/textView_1"
style="#style/Numbers"
android:text="1"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/iV_pins_0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<ImageView
android:id="#+id/iV_pins_0"
style="#style/Pins"
app:layout_constraintBottom_toBottomOf="#+id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/guideline_scroll"
app:layout_constraintStart_toEndOf="#+id/textView_1"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<ImageButton
android:id="#+id/iB_scroll_00"
style="#style/Scroll"
android:layout_marginTop="8dp"
android:background="#null"
android:onClick="onClickScroll"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_01"
app:layout_constraintStart_toEndOf="#id/guideline_scroll"
app:layout_constraintTop_toBottomOf="#id/iB_scroll_10" />
<ImageButton
android:id="#+id/iB_scroll_01"
style="#style/Scroll"
android:background="#null"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_02"
app:layout_constraintStart_toEndOf="#id/iB_scroll_00"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<ImageButton
android:id="#+id/iB_scroll_02"
style="#style/Scroll"
android:background="#null"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_00"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iB_scroll_01"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<TextView
android:id="#+id/textView_2"
style="#style/Numbers"
android:text="2"
app:layout_constraintBottom_toTopOf="#+id/textView_1"
app:layout_constraintEnd_toStartOf="#id/iV_pins_1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/iV_pins_1"
style="#style/Pins"
app:layout_constraintBottom_toBottomOf="#+id/iB_scroll_10"
app:layout_constraintEnd_toStartOf="#id/guideline_scroll"
app:layout_constraintStart_toEndOf="#+id/textView_2"
app:layout_constraintTop_toTopOf="#id/iB_scroll_10" />
<ImageButton
android:id="#+id/iB_scroll_10"
style="#style/Scroll"
android:background="#null"
android:clickable="false"
android:onClick="onClickScroll"
app:layout_constraintBottom_toTopOf="#id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_11"
app:layout_constraintStart_toEndOf="#id/guideline_scroll"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/iB_scroll_11"
style="#style/Scroll"
android:background="#null"
android:clickable="false"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_10"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_12"
app:layout_constraintStart_toEndOf="#id/iB_scroll_10"
app:layout_constraintTop_toTopOf="#id/iB_scroll_10" />
<ImageButton
android:id="#+id/iB_scroll_12"
style="#style/Scroll"
android:background="#null"
android:clickable="false"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iB_scroll_11"
app:layout_constraintTop_toTopOf="#id/iB_scroll_10" />
</androidx.constraintlayout.widget.ConstraintLayout>
Guideline
No Guideline:
<?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"
android:id="#+id/constraintScroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView_1"
style="#style/Numbers"
android:text="1"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/iV_pins_0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<ImageView
android:id="#+id/iV_pins_0"
style="#style/Pins"
app:layout_constraintBottom_toBottomOf="#+id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_00"
app:layout_constraintStart_toEndOf="#+id/textView_1"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<ImageButton
android:id="#+id/iB_scroll_00"
style="#style/Scroll"
android:layout_marginTop="8dp"
android:background="#null"
android:onClick="onClickScroll"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_01"
app:layout_constraintStart_toEndOf="#id/iV_pins_0"
app:layout_constraintTop_toBottomOf="#id/iB_scroll_10" />
<ImageButton
android:id="#+id/iB_scroll_01"
style="#style/Scroll"
android:background="#null"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_02"
app:layout_constraintStart_toEndOf="#id/iB_scroll_00"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<ImageButton
android:id="#+id/iB_scroll_02"
style="#style/Scroll"
android:background="#null"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_00"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iB_scroll_01"
app:layout_constraintTop_toTopOf="#id/iB_scroll_00" />
<TextView
android:id="#+id/textView_2"
style="#style/Numbers"
android:text="2"
app:layout_constraintBottom_toTopOf="#+id/textView_1"
app:layout_constraintEnd_toStartOf="#id/iV_pins_1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/iV_pins_1"
style="#style/Pins"
app:layout_constraintBottom_toBottomOf="#+id/iB_scroll_10"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_10"
app:layout_constraintStart_toEndOf="#+id/textView_2"
app:layout_constraintTop_toTopOf="#id/iB_scroll_10" />
<ImageButton
android:id="#+id/iB_scroll_10"
style="#style/Scroll"
android:background="#null"
android:clickable="false"
android:onClick="onClickScroll"
app:layout_constraintBottom_toTopOf="#id/iB_scroll_00"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_11"
app:layout_constraintStart_toEndOf="#id/iV_pins_1"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/iB_scroll_11"
style="#style/Scroll"
android:background="#null"
android:clickable="false"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_10"
app:layout_constraintEnd_toStartOf="#id/iB_scroll_12"
app:layout_constraintStart_toEndOf="#id/iB_scroll_10"
app:layout_constraintTop_toTopOf="#id/iB_scroll_10" />
<ImageButton
android:id="#+id/iB_scroll_12"
style="#style/Scroll"
android:background="#null"
android:clickable="false"
android:onClick="onClickScroll"
app:layout_constraintBottom_toBottomOf="#id/iB_scroll_10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iB_scroll_11"
app:layout_constraintTop_toTopOf="#id/iB_scroll_10" />
</androidx.constraintlayout.widget.ConstraintLayout>
No Guideline
Styles.xml:
<resources>
<style name="Scroll" parent="#style/Widget.AppCompat.ImageButton">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:scaleType">fitCenter</item>
<item name="layout_constraintDimensionRatio">1</item>
<item name="layout_constraintHorizontal_weight">1.5</item>
<item name="layout_constraintWidth_max">90dp</item>
<item name="android:layout_marginStart">4dp</item>
<item name="srcCompat">#drawable/ic_empty</item>
</style>
<style name="Pins">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:scaleType">fitCenter</item>
<item name="layout_constraintDimensionRatio">1</item>
<item name="layout_constraintHorizontal_weight">1.2</item>
<item name="layout_constraintWidth_max">60dp</item>
<item name="srcCompat">#drawable/pins_6</item>
<item name="android:layout_marginStart">4dp</item>
</style>
<style name="Numbers">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="autoSizeMaxTextSize">60sp</item>
<item name="autoSizeMinTextSize">8sp</item>
<item name="autoSizeStepGranularity">1sp</item>
<item name="autoSizeTextType">uniform</item>
<item name="layout_constraintHorizontal_weight">0.7</item>
<item name="android:gravity">center</item>
</style>
</resources>
The Image Buttons should be so big as they are when I use no guideline. But I need a guideline, because I have another layout where I want that the views start at the same position and so are vertically aligned to the Image Buttons here (fixed header of ScrollLayout). I tried to achieve this via a guideline, but the result for the Constraint Layout above is not as expected...


I solved it by removing the Constraint Dimension Ratio for style „pins“. I am not totally sure why this helps in the guideline case, but it solved it.

Related

android constraintLayout how to vertical attach to items above which may not visible

Having a few items above the last row, and they may all not visible or someone still visible.
Here is how they vertically aligned:
[content_part - 'Lorem ipsum...']
[media_image - RED BLOCK - has app:layout_constraintTop_toBottomOf="#+id/content_part"]
[quoted_view - IMG - has app:layout_constraintTop_toBottomOf="#+id/media_image"]
[comment - TEXTVIEW ROW - has app:layout_constraintTop_toBottomOf="#+id/quoted_view"]
when the quoted_view is visible, the comment button row is fine (both landscape and portrait):
but when the quoted_view is NOT visible in landscape the comment row is not displayed right
although in portrait mode it seems fine
How to vertically align to above items which may not visible?
<?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:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="?android:attr/selectableItemBackground"
android:paddingStart="10dp"
android:paddingEnd="10dp">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="52dp" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="3dp"
android:ellipsize="end"
android:maxLines="1"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="re-tweet werwer wer we rwe r wer " />
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="3dp"
android:scaleType="fitXY"
android:background="#mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
<!-- -->
<TextView
android:id="#+id/content_part"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:autoLink="web"
android:linksClickable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/title"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " />
<ImageView
android:id="#+id/media_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scaleType="matrix"
android:visibility="visible"
app:layout_constraintDimensionRatio="H,15:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/content_part"
app:layout_goneMarginBottom="8dp"
android:background="#ff0000" />
<androidx.cardview.widget.CardView
android:id="#+id/quoted_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/media_image"
app:layout_goneMarginBottom="8dp"
android:visibility="gone">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="30dp"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher_round" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/imageView"
android:gravity="center_horizontal"
android:padding="8dp"
android:text="#string/app_name"
android:textColor="#ffffff"
android:textSize="12sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- quoted -->
<TextView
android:id="#+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/quoted_view"
android:text="TextView" />
<TextView
android:id="#+id/response"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/like"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/comment"
android:text="TextView" />
<TextView
android:id="#+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/response"
android:text="TextView" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
update:
adding app:layout_constraintTop_toBottomOf="#+id/comment" to android:id="#+id/view" seems fixed it.
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/comment" />
But not really understand why it has to have this constrain, the android:id="#+id/comment" already has constrain app:layout_constraintBottom_toTopOf="#+id/view".
<TextView
android:id="#+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/quoted_view"
android:text="TextView" />

When you specify app:layout_constraintDimensionRatio="H,15:3" for media_image with a 0dp height and 0dp width, ConstraintLayout will maximize the width of the view and constrain the height of the view such that the resulting aspect ratio is 15:3 (5 x as wide as the height.)
So, given a screen width of, say, 500dp the width of media_image will become 500dp and the height will be 100dp. So, what happens when the actual height of the screen is something less than 100dp plus the height of the TextViews? You will see your problem. (Screen sizes are for example and do not reflect actual screen dimensions that I am aware of.)
The question now depends upon what you want to happen with the layout when the dimensions don't quite work as you have things laid out now.

How to chain MotionLayout animation

My task is to animate the movement of a button from "off" the screen, first, to the center of the screen, then, up to the top (see the attached xml and screenshots). So basically, I have to "chain" 2 animations. My question is:
how can I do it using only 1 transition?
I implemented it using Transition.TransitionListener, using doOnEnd() ktx function. And it works fine, but the code can be complicated, since I am also planning to remove the listener in onDestroy() to prevent memory leaks.
Here is the layout by default:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
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"
android:paddingTop="?attr/actionBarSize">
<View
android:id="#+id/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/cardview_dark_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintStart_toEndOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
Here is the result of the 1st animation:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
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"
android:paddingTop="?attr/actionBarSize">
<View
android:id="#+id/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/cardview_dark_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
And here is the result of the 2nd animation:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
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"
android:paddingTop="?attr/actionBarSize">
<View
android:id="#+id/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/cardview_dark_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
The activity:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
Handler().postDelayed({
val transitionPhase1 = transitionPhase1()
transitionPhase1.doOnEnd {
TransitionManager.beginDelayedTransition(root, transitionPhase2())
}
TransitionManager.beginDelayedTransition(root, transitionPhase1)
}, 2000)
}
private fun transitionPhase1(): Transition {
val constraintSet = ConstraintSet()
constraintSet.clone(this, R.layout.activity_main_phase_1)
constraintSet.applyTo(root)
return AutoTransition()
}
private fun transitionPhase2(): Transition {
val constraintSet = ConstraintSet()
constraintSet.clone(this, R.layout.activity_main_phase_2)
constraintSet.applyTo(root)
return AutoTransition()
}
}
I expect to have only 1 TransitionManger.beginDelayedTransition() method call.

I would propose that you do not "chain two transitions" but use one transition with keyframes to solve the two motions. This is exactly what <KeyFrame> is made for.
For this I would recommend to create a scene.xml file to handle the constraintsets and the transition.
You would then only have start and end as constraintSet and the the inbetween state you set up as keyframe.
Let me know if you need examples on how to set this up.

You can chain the as I have done it below:
GitHub
<Transition
android:id="#+id/startToEnd_materialCardView_email"
app:constraintSetEnd="#+id/end_materialCardView_email"
app:constraintSetStart="#+id/start_materialCardView_email"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/start_materialCardView_email" />
</Transition>
<Transition
android:id="#+id/endToStart_materialCardView_email"
app:constraintSetEnd="#+id/start_materialCardView_email"
app:constraintSetStart="#+id/end_materialCardView_email"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/end_materialCardView_email" />
</Transition>
<Transition
android:id="#+id/startToEnd_materialCardView_password"
app:constraintSetEnd="#+id/end_materialCardView_password"
app:constraintSetStart="#+id/end_materialCardView_email"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/start_materialCardView_password" />
</Transition>
<Transition
android:id="#+id/endToStart_materialCardView_password"
app:constraintSetEnd="#+id/end_materialCardView_email"
app:constraintSetStart="#+id/end_materialCardView_password"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/end_materialCardView_password" />
</Transition>
<Transition
android:id="#+id/startToEnd_materialCardView_birthDate"
app:constraintSetEnd="#+id/end_materialCardView_birthDate"
app:constraintSetStart="#+id/end_materialCardView_password"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/start_materialCardView_birthDate" />
</Transition>
<Transition
android:id="#+id/endToStart_materialCardView_birthDate"
app:constraintSetEnd="#+id/end_materialCardView_password"
app:constraintSetStart="#+id/end_materialCardView_birthDate"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/end_materialCardView_birthDate" />
</Transition>
<Transition
android:id="#+id/startToEnd_materialCardView_phoneNumber"
app:constraintSetEnd="#+id/end_materialCardView_phoneNumber"
app:constraintSetStart="#+id/end_materialCardView_birthDate"
app:duration="1000">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/materialCardView_phoneNumber" />
</Transition>
Inspire Coding

Barrier doesn't set to referenceIds in constraint layout?

hey last few days I am exploring about the constraint layout.the concept of barrier I can understand but when i implement I can't get the correct output.
I want to set the barrier in the right direction to reference Id's. But barrier doesn't work.it should set for the views which are nameLabel and passionLabel. please help me. thank you in advance. This is the current output
<?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:id="#+id/activity_main_barriers"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/barriers"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="149dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
android:src="#drawable/arun"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Arun Pandian"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.032"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<!--#string/hobbies-->
<TextView
android:id="#+id/passionLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:labelFor="#+id/etPassion"
android:text="#string/passion"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etPassion"
app:layout_constraintStart_toStartOf="#+id/nameLabel" />
<TextView
android:id="#+id/nameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:fontFamily="#font/roboto_italic"
android:labelFor="#+id/cameraType"
android:text="#string/name"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_creator="1"
app:layout_constraintBaseline_toBaselineOf="#+id/etName"
app:layout_constraintLeft_creator="1"
app:layout_constraintStart_toStartOf="#+id/title"
app:layout_editor_absoluteX="16dp"
app:layout_editor_absoluteY="189dp"
tools:layout_constraintBaseline_creator="0"
tools:layout_constraintLeft_creator="0" />
<EditText
android:id="#+id/etPassion"
android:layout_width="217dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Developing softwares"
app:layout_constraintEnd_toEndOf="#+id/etName"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/etName"
app:layout_constraintTop_toBottomOf="#+id/etName"
app:layout_editor_absoluteX="73dp"
app:layout_editor_absoluteY="225dp"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="0" />
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="148dp"
android:inputType="textPersonName"
android:text="Arun Pandian"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvName"
app:layout_constraintTop_toBottomOf="#+id/title"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="0" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="nameLabel,passionLabel"
tools:layout_editor_absoluteX="411dp" />
</android.support.constraint.ConstraintLayout>

Try this:
you have to give both edittext start constraint to barrier.
Also when I see in My android studio xml my output is same as you post in your question image. check http://prntscr.com/mkdtgb
But when I see in device it's working
<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:id="#+id/activity_main_barriers"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="barriers"
android:textColor="#android:color/black"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="149dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Arun Pandian"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<!--#string/hobbies-->
<TextView
android:id="#+id/passionLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:labelFor="#+id/etPassion"
android:text="passios"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etPassion"
app:layout_constraintStart_toStartOf="#+id/nameLabel" />
<EditText
android:id="#+id/etPassion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="textPersonName"
android:layout_marginStart="16dp"
android:text="Developing softwares"
app:layout_constraintEnd_toEndOf="#+id/etName"
app:layout_constraintStart_toEndOf="#+id/barrier2"
app:layout_constraintTop_toBottomOf="#+id/etName" />
<TextView
android:id="#+id/nameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:labelFor="#+id/cameraType"
android:text="namegfhfgdfgdfgdfgdfgdfgdf"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etName"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:inputType="textPersonName"
android:text="Arun Pandian"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/barrier2"
app:layout_constraintTop_toBottomOf="#+id/title" />
<android.support.constraint.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="nameLabel,passionLabel" />
</android.support.constraint.ConstraintLayout>

I resolved this issue by updating the ConstraintLayout library
From
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
To this
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha3'

I had a similar issue when using
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
The same code was working in one project but not in another, both using the same version of the constraint-layout
If it works on device and but not in the layout editor, then try to force refresh the layout in the editor

This seems to be a rendering bug in the Preview in Android Studio 3.3.
The barrier will works at runtime on the emulator.

how to style radio button that is on the right hand side of text

I have a radio group with three radio buttons
I put the text on the left hand side of radio button with below command
android:drawableRight="#drawable/abc_btn_radio_material"
but the default button color is black and I can't change its color using android:theme command, does anyone know how can I change the default color?
my full radio group code:
<RadioGroup
android:id="#+id/main_loading_radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="6dp"
android:layout_marginTop="6dp"
android:checkedButton="#+id/main_wall_load"
android:orientation="vertical">
<RadioButton
android:id="#+id/main_wall_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:drawableRight="#drawable/abc_btn_radio_material"
android:theme="#style/MyRadioButton"
android:layout_gravity="right"
android:text="A"
android:textColor="#000000"
android:textSize="12sp"/>
<RadioButton
android:id="#+id/main_roof_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:layout_gravity="right"
android:drawableRight="#drawable/abc_btn_radio_material"
android:text="AA"
android:textSize="12sp"/>
<RadioButton
android:id="#+id/main_stairCase_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:layout_gravity="right"
android:drawableRight="#drawable/abc_btn_radio_material"
android:text="AAA"
android:textColor="#000000"
android:textSize="12sp"/>
</RadioGroup>

Try This code,
Make this file in your res/drawable
radiobutton_drawable.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_uncheck" android:state_checked="false" android:state_focused="true" />
<item android:drawable="#drawable/radio_uncheck" android:state_checked="false" android:state_focused="false" />
<item android:drawable="#drawable/radio_check" android:state_checked="true" android:state_focused="true" />
<item android:drawable="#drawable/radio_check" android:state_checked="true" android:state_focused="false" />
</selector>
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/activity_vertical_margin">
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_loading_radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="vertical">
<RadioButton
android:id="#+id/main_wall_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#android:color/transparent"
android:checked="true"
android:drawablePadding="30dp"
android:drawableRight="#drawable/radiobutton_drawable"
android:text="A"
android:textColor="#000000"
android:textSize="12sp" />
<RadioButton
android:id="#+id/main_roof_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#android:color/transparent"
android:drawablePadding="24dp"
android:drawableRight="#drawable/radiobutton_drawable"
android:text="AA"
android:textSize="12sp" />
<RadioButton
android:id="#+id/main_stairCase_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#android:color/transparent"
android:drawablePadding="18dp"
android:drawableRight="#drawable/radiobutton_drawable"
android:text="AAA"
android:textColor="#000000"
android:textSize="12sp" />
</RadioGroup>
</RelativeLayout>
These are the drawables which i have used for checked and unchecked state of radio button,
Hereby, i am attaching screenshot,
Hope it will help you!!!

using android:layout_gravity

i am new to android development. I want to know how to use the attribute android:layout_gravity and can i use this option to position a view at center of the screen width.??
I tried the following but it's aligning at top
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Table Layout" />
<TableRow>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:text="Username"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:hint="username" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:text="Password"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:hint="password"
android:inputType="textPassword" />
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="SAVE" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="CANCLE" />
</TableRow>
</TableLayout>
and my output is :

In Android there is
android:gravity and android:layout_gravity
android:gravity - Is used to move the content of the View or Layout to which this property is set.
android:layout_gravity - Is used to move the View or Layout itself to any position.
Here is a nice demo and explanation of how it works.
gravity and layout_gravity

<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="CANCEL"
android:gravity="LEFT"
android:orientation="horizontal"
/>