I have a list of items that can be swiped away using a MotionLayout. I wanted to implement an animation similar to the one in the Gmail android app, where when you swipe an email away, there is that colored background that gets revealed. So what I tried is to place an ImageView in the MotionLayoutunder the view that moves, so that when that view goes away it will reveal the ImageView beneath.
Here is the layout of the element:
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="#+id/reading_list_item_motion"
android:layout_width="match_parent"
android:layout_height="72dp"
app:layoutDescription="#xml/reading_list_item_scene">
<!-- The image under the element that moves -->
<ImageView
android:id="#+id/reading_list_item_back"
android:layout_width="match_parent"
android:layout_height="72dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/reading_list_item_layout"
android:layout_width="match_parent"
android:layout_height="72dp"
android:gravity="center"
android:paddingLeft="#dimen/search_result_padding"
android:paddingRight="#dimen/search_result_padding"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/reading_list_item_icon"
android:layout_width="#dimen/ic_search_result"
android:layout_height="#dimen/ic_search_result"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:contentDescription="Search result icon"
app:error="#{#drawable/ic_default_search_result}"
app:imageUrl="#{book.best_book.small_image_url}"
app:layout_constraintEnd_toStartOf="#id/reading_list_item_info_layout"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_default_search_result" />
<LinearLayout
android:id="#+id/reading_list_item_info_layout"
android:layout_width="316dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toEndOf="#+id/reading_list_item_icon"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6">
<TextView
android:id="#+id/reading_list_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:singleLine="false"
android:text="#{book.best_book.title}"
android:textColor="#color/textSecondary"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/reading_list_item_author"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text='#{"by " + book.best_book.author.name }'
android:textColor="#color/textSecondary" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
Even though in the Design editor the image appears to be there, and if I play the MotionLayout transition everything behaves as expected, when starting the app the ImageView is nowhere to be seen.
Another approach that I thought of would be to append the ImageView at the end of the view that moves, so that when it starts to go off-screen, the ImageView comes in view. I am not sure how could I implement this though since the ImageView should be as wide as the screen and match_parent obviously wouldn't work
Does anyone have any idea how can I implement this animation?
Thanks in advance!
Edit: Here is an image of how I'd like it to look. The more the item goes of screen, the more of the red background gets revealed.
Here is the MotionScene xml:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ConstraintSet android:id="#+id/start">
<Constraint
android:id="#+id/reading_list_item_layout"
android:layout_width="match_parent"
android:layout_height="72dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Constraint
app:layout_editor_absoluteY="1dp"
android:id="#+id/imageView" />
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint
android:id="#+id/reading_list_item_layout"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"
android:layout_height="72dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="parent" />
</ConstraintSet>
<Transition
app:constraintSetEnd="#id/end"
app:constraintSetStart="#+id/start">
<OnSwipe
app:dragDirection="dragRight"
app:touchAnchorId="#id/reading_list_item_layout"
app:touchAnchorSide="left" />
</Transition>
</MotionScene>
Related
I have a restaurants map-based app which when I click on a place marker, a fragment displaying the specific place is created with RecyclerView showing reviews about the place and a like button all inside a motion layout, when the fragment is created and the button is not liked (means the specific place showing is not in the user favorites) the recyclerview shows everything fine, and if I press the like button then an animation on the button is occurred replacing the button drawable from unfilled icon to red color filled icon and everything still working as expected.
When I enter the same fragment with the same specific place again, the like button is animated to be filled again since the place is already in the user favorites, the recyclerview does not show the reviews until I touch the view itself and onTouch is occurred..
I tried debugging and looking at the recyclerView visibility and it was visible, even the adapter size was not empty so it was supposed to be shown and work fine but it does not..
If I then dislike the place (the like button turns to be unfilled) -> exit the fragment -> open the fragment again with the same specific place -> everything again works fine.
so I am concerned the problem is somewhere around the animation of the like button and it is related to the motion layout..
Any ideas how to proceed with this issue ?
my fragment_detailed_place.xml:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/motion_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gmm_white"
app:layoutDescription="#xml/fragment_detailed_place_scene"
tools:context=".map.DetailedPlaceFragment">
<androidx.constraintlayout.utils.widget.ImageFilterButton
android:id="#+id/place_like_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/fui_transparent"
android:backgroundTint="#color/gmm_white"
android:src="#drawable/ic_favorite_empty_big"
app:altSrc="#drawable/ic_favorite_filled_big"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/place_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Place Name will be here"
android:textColor="#color/colorPrimary"
android:textSize="20sp"
android:transitionName="place_transition"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/place_like_button" />
<TextView
android:id="#+id/place_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="address will be here"
android:textColor="#color/quantum_grey"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/place_name" />
<TextView
android:id="#+id/place_favorites"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="favorites will be here"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/place_address"
app:layout_goneMarginTop="8dp" />
<TextView
android:id="#+id/place_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:text="Rating: 5.0"
app:layout_constraintBaseline_toBaselineOf="#id/place_distance"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/place_address" />
<TextView
android:id="#+id/place_distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_marginEnd="10dp"
android:text="Distance: 5.0 km"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/place_address" />
<TextView
android:id="#+id/recent_reviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Recent Reviews"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/place_distance" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/reviews_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
tools:listitem="#layout/review_list_item"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/recent_reviews" />
</androidx.constraintlayout.motion.widget.MotionLayout>
my motionlayout like button color filling animation scene:
`
<Transition
android:id="#+id/likeButtonTransition"
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#id/start"
motion:duration="250">
<OnClick motion:targetId="#+id/place_like_button" />
</Transition>
<ConstraintSet android:id="#+id/start">
<Constraint android:id="#+id/place_like_button">
<CustomAttribute
motion:attributeName="crossfade"
motion:customFloatValue="0" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint android:id="#+id/place_like_button">
<CustomAttribute
motion:attributeName="crossfade"
motion:customFloatValue="1" />
</Constraint>
</ConstraintSet>
`
my code in DetailedPlaceFragment which animates the button if the place is in favorites :
ioSCOPE.launch {
if (mapViewModel.getIfPlaceIsFavorite(place) != null) {
withContext(Dispatchers.Main) {
binding.motionLayout.transitionToEnd()
}
} else {
withContext(Dispatchers.Main) {
binding.motionLayout.transitionToStart()
}
}
}
Thanks !
I am new in using Motion Layout and I have used two Recycler views rv_horizontal and rv_vertical ,rv_horizontal is using LinearLayout Manger with horizontal orientation and rv_vertical is using GridLayout Manger. I have used both of them within Motion Layout. What I want is,when I scroll up the rv_vertical then rv_horizontal, along with the Text ViewtxtCategory, should disappear.
What I tried is following:
home.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Home"
android:background="#color/bgcolor"
app:layoutDescription="#xml/fragment_home_scene">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/txtCategory"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="#string/category"
android:textSize="8pt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/txtCategory"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/txtFamousPlaces"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="#string/famous_places"
android:textSize="8pt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/rv_horizontal" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_vertical"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/txtFamousPlaces"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.motion.widget.MotionLayout>
SceneFile of Home Fragment i.e., home_scene.xml :
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:motion="http://schemas.android.com/tools">
<ConstraintSet android:id="#+id/start">
<Constraint android:id="#+id/txtCategory"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/txtCategory"
android:id="#+id/rv_horizontal"
app:layout_constraintBottom_toTopOf="#+id/txtFamousPlaces" />
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint android:id="#id/txtCategory"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Constraint
android:layout_height="0dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/txtCategory"
android:id="#+id/rv_horizontal"
app:layout_constraintBottom_toTopOf="parent" />
</ConstraintSet>
<Transition
app:constraintSetEnd="#id/end"
app:constraintSetStart="#+id/start">
<OnSwipe
motion:onTouchUp="stop"
motion:dragDirection="dragUp"
motion:touchAnchorId="#+id/rv_vertical"
app:moveWhenScrollAtTop="true"/>
</Transition>
</MotionScene>
I am facing the following problems, if anyone knows please help me:
I am scrolling up the rv_vertical but nothing is happening , although I have set the attribute motion:touchAnchorId="#+id/rv_vertical" within OnSwipe attribute in home_scene.xml file. As you can see.
When I scroll up the FamousPlaces then scroll down it then recycler view rv_horizontal does not load completey. As following
I tell you again what I want is,when I scroll up the rv_vertical, rv_horizontal, along with the Text ViewtxtCategory, should disappear.And when I scroll down rv_vertical, rv_horizontal should loaded completely. If anybody knows please help me.
I am trying to move an ImageView according to the buttons pressed. For the moment I am trying to move the ImageView Up and Down, the Down thing works perfectly but the problem is when I try to make it go up. When the ImageView isn't at its initial position the ImageView goes up perfectly (until it reaches its initial position) but when it is at its initial position it just goes up one time and then when I press the up button again it goes down to its initial position.
(Just to let you know, the orientation of the screen is on landscape)
So, to move my ImageView up I just lower the value of translationY
imageView.translationY = imageView.translationY.absoluteValue - 25
I tried using ObjectAnimator.ofFloat() but the imageView goes back to its initial position after the animation.
In the layout I am just using a constraint layout and I constrain the ImageView at the centre of the screen.
Thanks for your help!
Hi I think constraint layout will be good for this case. I have created a sample project to check this out. This uses MotionLayout with MotionScene
The Idea is to create MotionLayout as your parent layout and then define the Childers to animate in your case its ImageView here is sample layout file. Use this file in some activity or some fragment to see in action
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_red_dark"
android:orientation="vertical"
app:layoutDescription="#xml/up_down_descriptor">
<ImageView
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_star_outline" />
<Button
android:id="#+id/btnUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:text="up"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/ivStar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:text="Down"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ivStar"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
and you define a layout description file up_down_descriptor in res/xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Transition
app:constraintSetEnd="#+id/down"
app:constraintSetStart="#+id/center"
app:duration="2000">
<OnClick
app:clickAction="toggle"
app:targetId="#id/btnDown" />
</Transition>
<Transition
app:constraintSetEnd="#+id/up"
app:constraintSetStart="#+id/center"
app:duration="2000">
<OnClick
app:clickAction="toggle"
app:targetId="#id/btnUp" />
</Transition>
<ConstraintSet android:id="#+id/center">
<Constraint
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="#+id/down">
<Constraint
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="#+id/up">
<Constraint
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>
MotionLayout will take care of the rest of the things.
I have a MotionLayout with a TransitionListener and progress seems to go from 0 to 1 for my MotionScene:
<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<Transition
app:constraintSetStart="#id/header_expanded"
app:constraintSetEnd="#id/header_condensed"
app:duration="2000">
<OnSwipe
app:touchAnchorId="#id/view_pager"
app:dragDirection="dragDown"
app:touchAnchorSide="top"/>
<KeyFrameSet>
<KeyAttribute
android:elevation="#dimen/header_elevation_expanded"
app:framePosition="0"
app:target="#id/header"/>
<KeyAttribute
android:elevation="#dimen/header_elevation_expanded"
app:framePosition="90"
app:target="#id/header"/>
<KeyAttribute
android:elevation="#dimen/header_elevation_collapsed"
app:framePosition="100"
app:target="#id/header" />
</KeyFrameSet>
</Transition>
<ConstraintSet android:id="#+id/header_expanded">
<Constraint
android:id="#+id/guideline_expanded_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
</ConstraintSet>
<ConstraintSet android:id="#+id/header_condensed">
<Constraint
android:id="#+id/guideline_expanded_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.18" />
</ConstraintSet>
</MotionScene>
If print the progress in the log it seems to jump from 0 to 1. I have tried changing the duration, or just changing the constraints for the header view to a different guideline but it doesn't seemt o affect the progress.
The only weird thing that I see in the logs is the fact that it cannot find the OnSwipe touchAnchorId view.
W/MotionLayout: WARNING could not find view id com.pitchero.ph:id/view_pager
The layout using this MotionScence is below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout android:id="#+id/container"
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"
android:background="#color/activity_background"
app:layoutDescription="#xml/motion_scene_team">
<com.github.florent37.shapeofview.shapes.DiagonalView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="0dp"
android:elevation="#dimen/menu_header_elevation_expanded"
app:layout_constraintBottom_toTopOf="#+id/guideline_expanded_state"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:shape_diagonal_angle="#dimen/header_angle"
app:shape_diagonal_direction="left"
app:shape_diagonal_position="bottom">
<View
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/redE64"/>
</com.github.florent37.shapeofview.shapes.DiagonalView>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
app:layout_collapseMode="pin">
<LinearLayout
android:id="#+id/toolbar_title_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="5dp"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="7dp"
android:visibility="gone"/>
<TextView
android:id="#+id/title"
style="#style/title.white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:gravity="center"
android:includeFontPadding="true"
android:maxLines="1"
tools:text="Help Center"/>
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs_bar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:elevation="2dp"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:tabBackground="#color/transparent"
app:tabIndicatorColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/white_50_percent"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tabs_bar"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_expanded_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
I don't really understand why this is happening in this particular case. I suspect it's because it cannot find the ViewPager but I don't see why that would happen.
Also, I'm using the following version of the ConstraintLayout libs:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha3'
implementation 'androidx.constraintlayout:constraintlayout-solver:2.0.0-alpha3'
Any help would be much appreciated, thank you!
You have implemented MotionLayout in a wrong way, first of all, you must not use Guideline to set animation, You can use ViewGroup containers or View for Animation.
Next thing, you must define all ContraintSet which are referencing another layout.
For ex.
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tabs_bar"/>
Here you are using app:layout_constraintTop_toBottomOf="#id/tabs_bar" as a reference, so if you are animating That viewpager, you will need to add ConstraintSet for both of them, Then only you can get rid of that warning. :)
I am new to motionlayout and been following various tutorials online like this to get an understanding of how it works. From a nutshell I have come to know it basically animates constraintSets, you have a start and end constraintSet which you can further customize with KeyFrameSets. I have this layout
I want to mimic Lyft's bottom sheet
With my layout the Where are you going button is suppose to slowly fade out as the search destination textInputs fade in. The recyclerview at the bottom is suppose to hold saved addresses, it will not be affected. I tried this implementation using a standard bottomsheet but had challenges with the animation, it had this weird flickering so I decided to use a MotionLayout with a normal view.
My bottomsheet layout is as follows
<com.google.android.material.card.MaterialCardView 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/cardChooseAddressBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
app:shapeAppearance="#style/ShapeAppearanceRoundedLargeTopCorners">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/bottomSheetConstraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/swipeUpHandle"
android:layout_width="50dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:background="#drawable/ic_swipe_up_handle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/hiThere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/medium_margin"
android:text="#string/hi_there"
android:textAppearance="#style/h6_headline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/swipeUpHandle"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSearch"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="#dimen/medium_margin"
android:gravity="start|center_vertical"
android:letterSpacing="0.0"
android:text="#string/where_are_you_going"
android:textAllCaps="false"
android:textAppearance="#style/subtitle1"
android:textColor="#android:color/darker_gray"
app:backgroundTint="#android:color/white"
app:icon="#drawable/ic_search"
app:iconTint="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/hiThere"
app:shapeAppearanceOverlay="#style/ShapeAppearanceRoundedMediumAllCorners" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/addressViews"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnSearch">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/inputOrigin"
style="#style/textInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/medium_margin"
android:hint="#string/search_destination"
android:textColorHint="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:textAppearance="#style/subtitle1"
android:textColor="#android:color/white" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/inputDestination"
style="#style/textInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/medium_margin"
android:hint="#string/search_destination"
android:textColorHint="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/inputOrigin">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtDestination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:textAppearance="#style/subtitle1"
android:textColor="#android:color/white" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/recyclerAddresses"
android:layout_marginTop="#dimen/medium_margin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/addressViews"
tools:listitem="#layout/recycler_view_item" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
And my parent layout where I include the bottomsheet is as follows
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/motionLayout"
app:layoutDescription="#xml/taxi_bottomsheet_scene"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
layout="#layout/choose_destination_bottom_sheet_layout"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
And finally my taxi_bottomsheet_scene motion scene is
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Transition
app:constraintSetEnd="#+id/expanded"
app:constraintSetStart="#+id/collapsed"
app:duration="1000">
<OnSwipe
app:touchAnchorId="#+id/btnSearch"
app:touchAnchorSide="top"
app:dragDirection="dragUp"/>
</Transition>
<ConstraintSet android:id="#+id/expanded">
<Constraint
android:id="#+id/cardChooseAddressBottomSheet"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="1"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<Constraint
android:id="#+id/addressViews"
app:layout_constraintHeight_percent="1"/>
<Constraint
android:id="#+id/btnSearch"
app:layout_constraintHeight_percent="0"/>
</ConstraintSet>
<ConstraintSet android:id="#+id/collapsed">
<Constraint
android:id="#+id/cardChooseAddressBottomSheet"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<Constraint
android:id="#+id/addressViews"
app:layout_constraintHeight_percent="0.0"/>
<Constraint
android:id="#+id/btnSearch"
app:layout_constraintHeight_percent="0.0"/>
</ConstraintSet>
</MotionScene>
When I launch this app I cannot get the bottomsheet to slide up, it simply does not respond in any way. One thing I noticed though is after adding the app:layoutDescription="#xml/taxi_bottomsheet_scene"attribute, the bottom sheet size changed to what I had specified in the constraintSetStart but the addressViews view did not.
So my layout looks like
So my question is, where I am going wrong for my bottomsheet not to respond to my swipes and addressViews to disappear in the initial state?
I finally managed to make it work, both with MotionLayout and CoordinatorLayout. I will only post the Coordinator solution as it is long and I do not have the time, if someone needs it, comment and I will post.
I created 3 layouts, 1. The main layout with the map, 2. Top bar with the to and from address EditTexts and 3. The bottom layout that slides up and reveals the top bar.
Solution 1 using CoordinatorLayout
The topbar
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:layout_marginBottom="#dimen/medium_margin"
app:layout_scrollFlags="noScroll">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topToolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/ic_arrow_back_black_24dp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/addressViews"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topToolBar">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imgOrigin"
android:layout_width="#dimen/activity_horizontal_margin"
android:layout_height="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/medium_margin"
android:layout_marginEnd="#dimen/medium_margin"
app:layout_constraintBottom_toBottomOf="#+id/inputOrigin"
app:layout_constraintEnd_toStartOf="#+id/inputOrigin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/inputOrigin"
app:srcCompat="#drawable/ic_origin"
app:tint="#color/colorAccent" />
<View
android:layout_width="2dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/xsmall_margin"
android:layout_marginBottom="#dimen/xsmall_margin"
android:background="#drawable/accent_to_color_primary_dark__negative_90_gradient"
app:layout_constraintBottom_toTopOf="#+id/imgDestination"
app:layout_constraintEnd_toEndOf="#+id/imgOrigin"
app:layout_constraintStart_toStartOf="#+id/imgOrigin"
app:layout_constraintTop_toBottomOf="#+id/imgOrigin" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/inputOrigin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/medium_margin"
android:hint="#string/pick_up_location"
android:marqueeRepeatLimit="marquee_forever"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imgOrigin"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:inputType="textPostalAddress"
android:singleLine="true"
android:textAppearance="#style/subtitle1" />
</com.google.android.material.textfield.TextInputLayout>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imgDestination"
android:layout_width="#dimen/activity_horizontal_margin"
android:layout_height="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/medium_margin"
android:layout_marginEnd="#dimen/medium_margin"
app:layout_constraintBottom_toBottomOf="#+id/inputDestination"
app:layout_constraintEnd_toStartOf="#+id/inputDestination"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/inputDestination"
app:srcCompat="#drawable/ic_destination"
app:tint="#color/colorPrimaryDark" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/inputDestination"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/medium_margin"
android:hint="#string/search_destination"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imgDestination"
app:layout_constraintTop_toBottomOf="#id/inputOrigin">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtDestination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:inputType="textPostalAddress"
android:singleLine="true"
android:textAppearance="#style/subtitle1" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
The bottom layout that acts like a bottom sheet
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardChooseAddressBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="#color/white"
app:behavior_hideable="false"
app:layout_behavior="#string/bottom_sheet_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/swipeUpHandle"
android:layout_width="35dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:background="#drawable/ic_swipe_up_handle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/hiThere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hi_there"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:textAppearance="#style/h6_headline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/swipeUpHandle" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSearch"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:gravity="start|center_vertical"
android:letterSpacing="0.0"
android:text="#string/where_are_you_going"
android:textAllCaps="false"
android:textAppearance="#style/subtitle1"
android:textColor="#android:color/darker_gray"
app:backgroundTint="#android:color/white"
app:icon="#drawable/ic_search"
app:iconSize="#dimen/medium_icon"
app:iconTint="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hiThere"
app:shapeAppearanceOverlay="#style/ShapeAppearanceRoundedMediumAllCorners" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerAddresses"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnSearch" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerSearchAddresses"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/white"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/btnSearch" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
And finally the two layouts included in my map layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:id="#+id/coordinator"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.67"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imgMapCenter"
android:layout_marginBottom="#dimen/xlarge_margin"
android:visibility="invisible"
android:tint="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#id/map"
app:layout_constraintEnd_toEndOf="#id/map"
app:layout_constraintStart_toStartOf="#id/map"
app:layout_constraintTop_toTopOf="#id/map"
app:srcCompat="#drawable/ic_destination" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fabMyLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
app:backgroundTint="#color/white"
app:fabSize="mini"
app:layout_anchor="#id/cardChooseAddressBottomSheet"
app:layout_anchorGravity="top|right"
app:srcCompat="#drawable/ic_origin"
app:tint="#color/colorAccent" />
<include layout="#layout/taxi_fragment_set_destination_top_bar" />
<include layout="#layout/taxi_fragment_bottom_sheet_addresses_layout" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And my fragment
final private BottomSheetBehavior.BottomSheetCallback addressBottomSheetCallBack = new BottomSheetBehavior.BottomSheetCallback() {
#Override
public void onStateChanged(#NonNull View bottomSheet, int newState) {
switch (newState) {
case BottomSheetBehavior.STATE_HIDDEN:
break;
case BottomSheetBehavior.STATE_SETTLING:
break;
case BottomSheetBehavior.STATE_EXPANDED:
if (!allPermissionsGranted())
requestForLocationPermissions();
topAddressBar.setVisibility(Visibility.VISIBLE);
fabMyLocation.hide();
break;
case BottomSheetBehavior.STATE_COLLAPSED:
if (!allPermissionsGranted())
requestForLocationPermissions();
topAddressBar.setVisibility(Visibility.INVISIBLE);
fabMyLocation.show();
break;
case BottomSheetBehavior.STATE_DRAGGING:
break;
case BottomSheetBehavior.STATE_HALF_EXPANDED:
break;
}
}
BottomSheetBehavior addressBottomSheetBehavior = BottomSheetBehavior.from(cardChooseAddressBottomSheet);
topAddressBar.post(() -> {
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) cardChooseAddressBottomSheet.getLayoutParams();
layoutParams.height = ((Resources.getSystem().getDisplayMetrics().heightPixels + (int) utils.percentageOf(62, btnSearch.getMeasuredHeight())) - topAddressBar.getMeasuredHeight());
});
addressBottomSheetBehavior.setPeekHeight((int) utils.percentageOf(29, Resources.getSystem().getDisplayMetrics().heightPixels), true);
addressBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
topToolBar.setNavigationOnClickListener(view12 -> {
if (addressBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
utopAddressBar.setVisibility(INVISIBLE);
addressBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else
Navigation.findNavController(view12).navigateUp();
});
addressBottomSheetBehavior.addBottomSheetCallback(addressBottomSheetCallBack);
Notice am using INVISIBLE instead of GONE on the topAddressBar? that is because everytime I called GONE the layout would ideally recalculate according to my assumption and the map would flicker, to stop that I had to use invisible as the layout does not shrink instead it still takes up the same space but just not visible.
Also notice I am adding padding cardChooseAddressBottomSheet.getLayoutParams() this is because I need the Sheet not to go too deep underneath the topAddressBar as not to hide my recyclerview content. The current padding makes sure the recyclerview is fully visible and everything else on top of it is underneath the topAddressBar