How to use ViewPager2 with CollapsibleToolbar layout - android

I am trying to achieve something with collapsible toolbar layout and I have 2 tabs with a viewPager2
Below are two images for example for the case of expanded screenshot and collapsed screenshot.
Below is the code I have in XML not sure where it is going wrong... my scroll is not working proper in this case. I want the toolbar to be stick on top when collapsed
I tried adding toolbar inside AppbarLayout but that didn't worked.
Also tried below links
somehow not working for me Link1 Link2
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_dark_blue">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white_cream_darkest_blue"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:windowSoftInputMode="adjustResize">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_cream_darkest_blue"
app:collapsedTitleTextAppearance="#color/text_color"
app:contentScrim="#color/white_cream_darkest_blue"
app:expandedTitleTextAppearance="#color/text_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/white_cream_darkest_blue">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginTop="40dp"
android:layout_marginEnd="#dimen/margin_end"
android:orientation="vertical">
<TextView
android:id="#+id/textViewTitle"
style="#style/screen_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:text="Mailing\nAddress"
android:textColor="#color/text_color" />
<TextView
android:id="#+id/textViewSubTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto_light"
android:text="We'll send your bill to this address."
android:textAlignment="center"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="30dp" />
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
android:windowSoftInputMode="adjustResize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/text_service"
app:title="">
<TextView
android:id="#+id/menuOption"
style="#style/screen_sub_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_medium"
android:text="Mailing Address"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:clipToPadding="false"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayoutMailingAddress"
style="#style/tabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
app:layout_constraintTop_toTopOf="parent"
app:tabInlineLabel="true"
app:tabTextAppearance="#style/MyCustomTextAppearance" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPagerMailingAddress"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent="1.2"
app:layout_constraintTop_toBottomOf="#+id/tabLayoutMailingAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

ViewPager2 won't work well inside NestedScrollView as its inner RecyclerView enables the nested scrolling by default.
To fix the misbehavior, you need to disable this nested scrolling of the ViewPager2 RecyclerView programmatically as it's not accessible in layout:
Kotlin:
viewPager.children.find { it is RecyclerView }?.let {
(it as RecyclerView).isNestedScrollingEnabled = false
}
Java:
for (int i = 0; i < viewPager.getChildCount(); i++) {
View child = viewPager.getChildAt(i);
if (child instanceof RecyclerView) {
((RecyclerView) child).setNestedScrollingEnabled(false);
break;
}
}

Related

Coordinator layout - collapsing content interaction with recycler view

schema
As shown in the picture, I want my 2 views ( recycler view and collapsing content ) to be responding only to the middle grip bar ( it could be 50dp height constraint layout - for example )
Moving this bar should collapse the upper part - and make recyclerview change its height. The bar shouldn't be able to move lower than the upper part content. Recycler view should be able to scroll independently all the time.
How to make only restricted area respond to touch events?
How to make recyclerview height depend on grip position ?
Now in my case, the collapsing part is getting hidden just after i start scrolling recyclerview.
If there is not enough information, I'll add whatever required.
Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activityToDo"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.ToDoActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:hint="Note title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/noteTitle"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintEnd_toStartOf="#+id/guideline"
android:layout_marginEnd="10dp"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:inputType="text" app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:hint="Note priority"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/notePriority"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toStartOf="#+id/guideline"
android:layout_marginStart="10dp"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:inputType="number" app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.Guideline
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_begin="197dp"
android:id="#+id/guideline"/>
<EditText
android:hint="Note description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/noteDescription"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintTop_toBottomOf="#+id/notePriority"
android:layout_marginTop="20dp"
android:textSize="15sp"/>
<Button
android:text="Save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/saveButton"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintEnd_toStartOf="#+id/guideline" android:layout_marginEnd="10dp"
android:layout_marginBottom="20dp" app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="10dp" app:layout_constraintTop_toBottomOf="#+id/noteDescription"/>
<Button
android:text="Clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/clearButton"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="#+id/guideline"
android:layout_marginStart="10dp" android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/noteDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<TextView
android:text="All notes"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/allNotesRecyclerView"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="#id/collapsingToolbar"
android:layout_marginTop="16dp"
android:textSize="15sp"/>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
GitHub Repo
in my case like this :
add app:layout_behavior="#string/appbar_scrolling_view_behavior" on your recyclerview and look my CollapsingToolbarLayout and my Toolbar
<androidx.coordinatorlayout.widget.CoordinatorLayout 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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".myactivity.DetailWisataActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_detail"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?colorPrimary"
app:expandedTitleGravity="center_horizontal|bottom"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
<ImageView
android:id="#+id/img_bg_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:scaleType="centerCrop"
android:src="#drawable/bg_beach"
app:layout_collapseMode="pin"
tools:targetApi="m" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorTransparantBlackLow" />
<ProgressBar
android:id="#+id/progress_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_detail"
android:layout_width="match_parent"
android:layout_height="#dimen/actionBarSizeLow"
android:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:title="#string/info_wisata" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
............Your recyclerview here.......
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and remove your Linearlayout.
Fisrt remove your LinearLayout from parent of recyclerview and try this:
<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:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- HEADER -->
<RelativeLayout
...
app:layout_collapseMode="parallax">
.....
</RelativeLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
<!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="choose item" />
-->
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Same question answer: Link
With the newest version of Android Studio (4.0 Canary 9), you can use the new MotionLayout layout type to transition between different ConstraintLayouts. The simplest solution (below) wouldn't necessarily let you change the RecyclerView height to whatever you wanted, but you could smoothly transition between two different layouts when the user swipes up or down.
In short, you would do the following:
In your build.gradle (Module: app) file, add the following line:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'
Create a new ConstraintLayout layout file that determines how all of your views should be arranged at the beginning
Convert that ConstraintLayout to a MotionLayout using the right-click menu in the layout editor
In the MotionLayout editor, add constraints to each view in the "start" and "end" layouts
In the new MotionScene XML file that was added to the XML folder in your res folder, edit the tag to look like this:
<Transition
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#id/start"
>
<OnSwipe
app:touchAnchorSide="top"
motion:touchAnchorId="#id/YOUR_GRIP_VIEW"
motion:dragDirection="dragUp" />
<KeyFrameSet>
</KeyFrameSet>
</Transition>
* In the MotionLayout Codelab, it says to use app:touchAnchorID instead of motion:touchAnchorId but that didn't work for me *
Now, when you swipe your grip view up or down, the MotionLayout can transition between states.

Shared Content overlapping Bottom Navigation

My MainActivity's got a RecyclerView and a BottomNavigationView. Items in the RecyclerView are CardViews.
When I click an item that's halfway obscured by the BottomNavigationView (- will call it BNV), it "pops" over the BNV, then slides up to become the header in LaunchedActivity.
When backing out of LaunchedActivity, it slides down, over the BNV, then "snaps" back into place:
How can I either:
Have the shared content appear to slide from underneath the BNV,
or failing that,
Have the shared content start off invisible, and fade as it slides to the header
I've tried playing with the elevation of the BNV, I've tried setting sharedElementEnterTransition to Fade(), I've tried specifying excludeTarget with BottomNavigation; I can't seem to make things work how I'd like.
Here's the layout for MainActivity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Activity_launched is here:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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=".LaunchedActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_launched"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
And content_launched:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_launched"
tools:context=".LaunchedActivity">
<LinearLayout
android:id="#+id/launched_header"
android:transitionName="header" android:layout_width="0dp" android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
android:orientation="vertical" app:layout_constraintEnd_toEndOf="parent"
android:background="#android:color/holo_blue_bright"
android:layout_marginEnd="8dp">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/launched_title"/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/launched_text"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Items in the RecyclerView call MainActivity.onItemClicked:
fun onItemClicked(view: View, item: Item) {
val intent = Intent(applicationContext, LaunchedActivity::class.java)
intent.putExtra("ITEM", item)
val options = ActivityOptions.makeSceneTransitionAnimation(
this,
android.util.Pair<View, String>(view, "header")
)
startActivity(intent, options.toBundle())
}
This is the array that's in the recycler:
data class Item(val title: String, val text: String): Serializable
val itemList = listOf(Item("One", "1"), Item("Two", "2"),
Item("Three", "3"), Item("Four", "4"), Item("Five", "5"))
Lastly, this is from LaunchedActivity.onCreate:
with(window) {
requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
sharedElementEnterTransition = AutoTransition()
sharedElementExitTransition = AutoTransition()
}
LaunchedActivity.onCreate pulls the item out of the intent and sets launched_title and launched_text.
Add in recyclerView's item's CardView
app:cardMaxElevation="8dp"
and give your BNV
app:elevation="16dp"
give it a try, try with more difference in elevation as clicked cardview has more elevation than actual elevation
Have you heard of clipToPadding it can add padding to the bottom views so it does not obstruct the bottom views.
So try setting clipToPadding = "true" and check if it solves.
Android what does the clipToPadding Attribute do?
Also your layout activity file has <RecyclerView> set to 0dp.
Use a <RelativeLayout> outside and set layout_above="#bnv" in <RecyclerView> somewhat similar to this.
<?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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/navigation1"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.nxtoff.plzcome.commonutills.BottomNavigationViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_below="#+id/viewpager"
android:background="#999999" />
</RelativeLayout>
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/nav_item_colors"
app:itemTextColor="#drawable/nav_item_colors"
app:menu="#menu/navigation" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/xfb_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom|center_horizontal"
android:layout_margin="22dp"
android:layout_marginBottom="30dp"
android:background="#color/colorloader"
android:clickable="true"
android:src="#drawable/plus_fab"
android:tint="#color/colorviolet"
app:backgroundTint="#color/colorloader"
app:elevation="8dp"
app:fabSize="normal"
/>
</RelativeLayout>
EDIT 1:
Try out this code and let me know.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:layout_above="#id/bottomNavigationView"
android:layout_alignParentTop="true"
android:layout_marginBottom="8dp"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/navigation"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>

Collapsing Toolbar Layout and Constraint Layout

I am struggling to create collapsing image header alongside Constraint where my design looks like this
Currently the profile pic is a part of the ConstraintLayout because it needs Guideline constraints and unfortunately it is overlapped by the AppBarLayout
Any ideas how to achieve that?
Can't find any source regarding my combination of layouts.....
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/playerViewBg"
android:fitsSystemWindows="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/bgIV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/header_bg" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/playerIV"
android:layout_width="177dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="62dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/profilePic"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<!-- Other content -->
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.27" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.73" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Following is the snippet of my working layout:
Please make sure that you haven't make any childview height to match parent(0 dp) inside constrianlayout also for scroll view android:fillViewport="true". Ask me if any doubt Occur.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:fitsSystemWindows="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivImagec"
android:layout_width="wrap_content"
android:layout_height="#dimen/_90sdp"
android:contentDescription="#string/no_des"
android:scaleType="centerCrop"
app:srcCompat="#drawable/outdoorgames" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/_90sdp"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/cvLayout"
android:animateLayoutChanges="true">
....
</android.support.constraint.ConstraintLayout>
I've actually recently started thinking about this
And based on this talk here from two of the devs behind Android Studio :
https://www.youtube.com/watch?v=8lAXJ5NFXTM (at the 21 mins: 28 seconds mark)
It is definitely possible, they recommend replacing the CollapsingToolbarLayout completely with the ConstraintLayout.

NestedScrollView scroll down itself when content is fills

I have xml, which consits of DrawerLayout, CoordinatorLayout with custom views, AppBarLayout, NestedScrollView.
Problem: When content in NestedtScrollView fills, NestedtScrollView scrolls down itself.
All researches like scrollView.setScrollY(0) or custom class for layout_behavior = FixedScrollingViewBehavior didn't help me.
How do i prevent this scrolling
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#color/semitransparet_color_primary">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/actionbar_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:elevation="4dp"/>
</android.support.design.widget.AppBarLayout>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<android.support.v4.widget.NestedScrollView
android:id="#+id/product_scroll_wrpr"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
// my content is here
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/buttons_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:background="#01579B"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:padding="8dp"
android:gravity="center_vertical">
// here are my buttons
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navi"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#android:color/white"
app:headerLayout="#layout/drawer_header_left"
app:menu="#menu/nav_drawer_menu"/>
my build.gradle consits
compile 'com.android.support:support-v4:23.1.0'
compile 'com.android.support:design:23.0.1'
Try to set android:descendantFocusability="blocksDescendants" to the LinearLayout inside NestedScrollView. It works for me.
UPD: beware of using into the layout descendant elements like EditText, which should take a focus: that elements will not take a focus. If you know how to solve this, please let us to know.
An alternative to blocking the focus, is to add a new View that will steal the focus. Put it anywhere above the NestedScrollView, and it should work:
<!--focusStealer, to avoid NestedScrollingView to scroll due to dynamically created views that take the focus-->
<View
android:layout_width="0px" android:layout_height="0px" android:focusable="true"
android:focusableInTouchMode="true"/>
This working for me:
mNestedScrollViewChat.post(new Runnable(){
#Override
public void run(){
mNestedScrollViewChat.fullScroll(View.FOCUS_DOWN);
}
});
This worked for me in Kotlin
nestedScrollView.post { nestedScrollView.fullScroll(View.FOCUS_DOWN) }
add android:descendantFocusability="beforeDescendants" and add and android:focusableInTouchMode="true"android:focusableInTouchMode="true"' in children view of Nested ScrollView
becase nestedScrollView need focus a view before scroll. i try focus a Edittext from children of view to get focus
<EditText
android:id="#+id/edtAddressAccount"
style="#style/StyleEditText"
android:autofillHints=""
android:ems="10"
android:inputType="textPersonName"
android:singleLine="true"
android:nextFocusUp="#+id/edtAddressAccount"
android:nextFocusLeft="#id/edtAddressAccount"
app:layout_constraintEnd_toEndOf="#+id/edtDistrict"
app:layout_constraintStart_toStartOf="#+id/textView13"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
full code here
<androidx.core.widget.NestedScrollView 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/white"
android:orientation="vertical"
android:id="#+id/nestedAccount"
android:layout_weight="1"
tools:context="jp.co.ramen.ui.auth.account.AccountFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:descendantFocusability="beforeDescendants"
>
<jp.co.ramen.utils.customview.DropDown
android:id="#+id/spGenderAccount"
style="#style/StyleSpinner"
app:layout_constraintEnd_toEndOf="#+id/edtAddressAccount"
app:layout_constraintStart_toStartOf="#+id/textView14"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<include
android:id="#+id/textView14"
layout="#layout/include_text_require"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_12sdp"
app:layout_constraintStart_toStartOf="#+id/edtAddressAccount"
app:layout_constraintTop_toBottomOf="#+id/edtAddressAccount" />
<EditText
android:id="#+id/edtDistrict"
style="#style/StyleEditText"
android:autofillHints=""
android:ems="10"
android:inputType="textPersonName"
android:singleLine="true"
android:nextFocusUp="#+id/edtAddressAccount"
android:nextFocusLeft="#id/edtAddressAccount"
app:layout_constraintEnd_toEndOf="#+id/liner2"
app:layout_constraintStart_toStartOf="#+id/textView12"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
...more view
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

How to stick tabs from content to top of screen while scrolling in android

I have Working on a layout in which my TabLayout is between some content and should be sticked to top ( below Toolbar) on reaching top while scrolling.
Following is my layout xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<com.sample.retail.ui.view.StickyScrollView
android:id="#+id/sticky_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:stuckShadowDrawable="#drawable/sticky_shadow_default">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/home_activity_views_elevation"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/home_top_banner_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_banner_layout_height">
<com.sample.retail.ui.view.viewPager.ScrollerViewPager
android:id="#+id/home_banner_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="#dimen/home_activity_views_elevation" />
<com.Sample.retail.ui.view.viewPager.SpringTabIndicator
android:id="#+id/home_banner_indicator"
android:layout_width="#dimen/home_banner_indicator_width"
android:layout_height="#dimen/home_banner_indicator_height"
android:layout_alignBottom="#id/home_banner_view_pager"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:elevation="12dp"
app:stiIndicatorColor="#color/theme_primary"
app:stiIndicatorColors="#array/spring_indicator_colors"
app:stiRadiusMax="4dp"/>
</RelativeLayout>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="#dimen/home_activity_views_elevation">
<LinearLayout
android:id="#+id/home_category_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_category_layout_height"
android:orientation="horizontal">
<TextView
android:id="#+id/cat_textView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_wallet_giftcard"
android:gravity="center"
android:text="Fashion" />
<TextView
android:id="#+id/cat_textView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_phone"
android:gravity="center"
android:text="Electronics" />
<TextView
android:id="#+id/cat_textView3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_phone"
android:gravity="center"
android:text="Sports" />
<TextView
android:id="#+id/cat_textView4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_list_2"
android:gravity="center"
android:text="Categories" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_marginBottom="4dp"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="#dimen/home_activity_views_elevation">
<LinearLayout
android:id="#+id/home_lower_banner_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_lower_banner_height"
android:orientation="horizontal">
<ImageView
android:id="#+id/lower_banner_firstImageView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:background="#drawable/shape_bg_strike_thru"
android:scaleType="fitXY"
android:src="#drawable/banner3" />
<ImageView
android:id="#+id/lower_banner_secondImageView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:background="#drawable/shape_bg_strike_thru"
android:scaleType="fitXY"
android:src="#drawable/banner4" />
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:id="#+id/recently_viewed_text_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_view_headertext_layout_height"
android:layout_marginBottom="4dp"
android:background="#66000000"
android:elevation="#dimen/home_activity_views_elevation"
android:gravity="center">
<TextView
android:id="#+id/recently_viewed_item_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/recently_viewed"
android:textColor="#color/white"
android:textSize="#dimen/home_section_header_textSize"
android:textStyle="bold" />
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/categoryTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/theme_primary"
android:tag="sticky"
app:tabMode="scrollable"
app:theme="#style/AppTabTheme" />
<android.support.v4.view.ViewPager
android:id="#+id/product_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</com.sample.retail.ui.view.StickyScrollView>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/menu_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I have also tried StickyItemView https://github.com/emilsjolander/StickyScrollViewItems/issues/27 Library as above but its not gonna work for me as Its pretty hard for me to redirects touch and motion Events between stickked views like TabLayout. I Will use Recycler view in ViewPager below Tabs.How do I achieve this on scroll sticking things of TabLayout? Any help would be appreciated.
I have found a answer by working around it a bit more. Following is my trick working for me.
<Coodinatorlayout
<Appbarlaout -- with marginTop=height of toobar
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
.....
....
<View> --with android:layout_scrollFlags = "scroll"
<TabLayout>--with android:layout_scrollFlags = "scroll|exitUnitlCollapsed|"
</Appbarlayout>
<Viewpager> --with app:layout_behavior="#string/appbar_scrolling_view_behavior"
<Toobar> --with gravity top //this is the main trick part. Put a separate toolbar in parent coordinate layout instead of putting it in AppbarLayout. and set this as support Action bar
</Coordinatorlayout>
So if I understand what you are trying to do is have at the top some static tabs and at the bottom of it some recyclerview? Then you don't need to encapsulate the recyclerview with a scrollview since recyclerview comes with its own scrolling. Can you post an image of what you're trying to achieve?

Categories

Resources