Motionlayout with recyclerView is Shaky - android-motionlayout

I used a recycler view in my motion-layout with a handle which is an ImageView.But the first time you want to swipe it up it shakes and goes down and up and doesn't come up.
I tried to play with the attributes but nothing worked.
layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="#+id/root">
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="#+id/motionLayout"
app:layoutDescription="#xml/scene3"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:showPaths="true">
<ImageView
android:id="#+id/image"
android:src="#drawable/ic_launcher_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/testId" />
<RelativeLayout
android:id="#+id/testId"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_media_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/media_send_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:onClick="sendTheMessages"
app:fabSize="normal" />
</RelativeLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
</RelativeLayout>
scene3.xml:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#+id/start"
motion:duration="300"
motion:interpolator="linear">
<OnSwipe
motion:touchAnchorId="#+id/image"
motion:touchAnchorSide="bottom"
motion:dragDirection="dragUp"
motion:dragScale="5"
motion:maxVelocity="5000"
motion:moveWhenScrollAtTop="true" />
</Transition>
<ConstraintSet android:id="#+id/start">
<Constraint
android:id="#+id/testId"
android:layout_width="match_parent"
android:layout_height="0dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintTop_toBottomOf="parent"
motion:layout_constraintVertical_chainStyle="spread">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint
android:id="#+id/testId"
android:layout_width="match_parent"
android:layout_height="0dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintTop_toTopOf="parent"
motion:layout_constraintVertical_chainStyle="spread">
</Constraint>
</ConstraintSet>
</MotionScene>
Using the following files you can regenerate the problem.Thanks for reading.Any help would be appreciated.

finally fixed this bug at androidx.constraintlayout:constraintlayout 2.0.0-beta4

I was facing a similar issue while using MotionLayout to collapse the header. The swipe performance was terrible. So I read #8KCreativeCommons comment saying that this may be caused by the change in the recyclerview size.
Setting a fixed recyclerview height instead of the 0dp(match constraint) improved the swipe performance:
private void setRecyclerViewHeight() {
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int height = displayMetrics.heightPixels;
mRecyclerView.getLayoutParams().height = height;
}
In your case, you would have to set a fixed size to your relative layout #+id/testId.
It would also be necessary to remove the layout_constraintBottom_toBottomOf="parent"

Related

How to position ViewPager above RecyclerView?

This xml layout has been populated by ViewPager and RecyclerView via an activity class, I want to position ViewPager on top and RecyclerView at the bottom, I tired to use android:layout_below="#+id/awesomepager" in the LinearLayout of RecyclerView but it doesn't work (it stays on top behind the toolbar[Deep blue color in the picture]), I also used android:layout_alignBottom="#+id/awesomepager" but that puts it inside the ViewPager at the bottom.
I basically want ViewPager and RecyclerView to be siblings , like this picture , black area to be ViewPager at the top and the green area to be RecyclerView at the bottom.
what is correct way to do this?
viewpager_with_toolbar_overlay.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</RelativeLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>
Update:
If I define the hight of ViewPager the problem will be resolved , but when screen size changes lower part of the screen will be blank
I searched a lot and finally came up with a solution, first I changed RelativeLayout to LinearLayout and added android:orientation="vertical" to it, then added android:layout_weight="1" to ViewPager.
Final version
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</LinearLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>

BottomSheet move to top of screen when changing visibility of its component

I have a bottom sheet with a NestedScrollView inside (see below). When I press on a FAB button, I want to make some parts in this NestedScrollView invisible. But when I change some linearlayouts visibilities to GONE, bottomsheet fly aways from the top.
My XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/messageOptionBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/back_miscellaneous"
android:gravity="center"
android:orientation="vertical"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/textSecondary" />
<LinearLayout
android:id="#+id/layoutDeleteMessage"
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_margin="#dimen/_10sdp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:animateLayoutChanges="true"
tools:ignore="UseCompoundDrawables">
<ImageView
android:layout_width="#dimen/_22sdp"
android:layout_height="#dimen/_22sdp"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_remove" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:includeFontPadding="false"
android:text="#string/delete_message"
android:textColor="#color/textSecondary"
android:textSize="#dimen/_12ssp" />
<TextView
android:id="#+id/textConfirmDelete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:gravity="end"
android:includeFontPadding="false"
android:text="#string/confirm"
android:textColor="#color/red"
android:textSize="#dimen/_12ssp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Your bottom sheet is moving top because you are using
android:animateLayoutChanges="true"
remove this line from your layoutDeleteMessage (Linear layout)
Hope this solve your problem

How to enable or disable collapsing in CollapsibleToolbarLayout in android?

**Main Layout**:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/White">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/white"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<TextView
android:id="#+id/collapsing_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:adjustViewBounds="true"
android:text="Journal Name, Volume No, Issue"
android:textSize="40sp"
android:textStyle="bold"
android:textColor="#color/black"
android:padding="30dp"
android:layout_marginTop="?attr/actionBarSize"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/article_listing_content"/>
</android.support.design.widget.CoordinatorLayout>
**Layout**:article_listing_content
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:id="#+id/rv_container"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:longClickable="true"
android:elevation="50dp"
android:scrollbars="vertical"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/error_msg_container"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/error_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
I want to disable the collapsing of the title field (collapsing_title - TextView inside CollapsingToolbarLayout) if there is not enough data in the recycler view. ie Collapsing should only happen if there is more data / scrolling is required, else collapsing should be disabled.
You can "disable" this collapsing behavior by modifying your CollapsingToolbarLayout's app:layout_scrollFlags attribute.
As a layout_ attribute, this is part of the parent's LayoutParams (i.e. AppBarLayout.LayoutParams). As expected, this class exposes the method setScrollFlags().
To disable collapsing:
CollapsingToolbarLayout collapsing =
(CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
AppBarLayout.LayoutParams params =
(AppBarLayout.LayoutParams) collapsing.getLayoutParams();
params.setScrollFlags(0);
collapsing.setLayoutParams(params);
To re-enable collapsing, simply replace the setScrollFlags() call with one that passes in your original flags:
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED);

Textview width is not the fit the width of the parent

I couldn't make equal width of Textview and linearlayout. Although I set width match_parent in Textview it doesn't fit with the parent width.
I saw these posts :
Android textView width not increasing
Android TextView does not expand to match parent
TextView width match drawableTop width
How to adjust text font size to fit textview
How to adjust text font size to fit textview
But my problem isn't resolved
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:orientation="horizontal">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:src="#drawable/defaultpicpic" />
<TextView
android:id="#+id/title"
style="#style/textViewItemStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
</LinearLayout>
I resolved my problem by wrapping the views in a LinearLayout and followed by a small View beneath.
It is not clear why this worked.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/selectableItemBackground"
android:gravity="right|center_vertical"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="right|center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:src="#drawable/thumb" />
<TextView
android:id="#+id/title"
style="#style/textViewItemStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2px" />
</LinearLayout>

Replace Fragments

I have the following XML for my Activity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/home_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<br.com.digitalpages.shelves.view.TopBar
android:layout_width="match_parent"
android:layout_height="60px" />
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<fragment
android:id="#+id/fragment_categories"
android:layout_width="240px"
android:layout_height="match_parent"
android:name="br.com.digitalpages.shelves.fragment.TreeCategoryFragment" />
<fragment
android:id="#+id/fragment_library"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:name="br.com.digitalpages.shelves.fragment.LibraryFragment" />
</LinearLayout>
<fragment
android:id="#+id/fragment_bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="br.com.digitalpages.shelves.fragment.BottomBarFragment" />
</LinearLayout>
In a click on the Bottom_Bar I need to replace fragment_categories and fragment_library by another Fragment that span the space of the old fragments.
How can I do that?
I tried:
FragmentTransaction trans = getFragmentManager().beginTransaction();
trans.remove(categoryExplorerFragment);
trans.remove(libraryFragment);
trans.add(R.id.fragment_container, new LibraryFragment());
trans.commit();
But when I click, only the libraryFragment disappears and nothing more happens.
use the replace method instead;
FragmentTransaction trans = getFragmentManager().beginTransaction();
trans.replace(R.id.fragment_container, new LibraryFragment());
trans.commit();

Resources