I am trying to animate a ViewPager2. When the user changes the page to a page of a different height, I want the view to smoothly grow or shrink to the new height. This works fine on phones, but when I try this on a tablet, the animation stutters. How could I fix this?
Animation code:
private fun animateHeightChange(view: ConstraintLayout, viewPager: ViewPager2) {
val viewPagerAnimator = ValueAnimator.ofInt(viewPager.height, view.measuredHeight).apply {
interpolator = LinearInterpolator()
addUpdateListener {
val animatedValue = it.animatedValue as Int
viewPager.layoutParams = viewPager.layoutParams.apply { height = animatedValue }
}
}
AnimatorSet().run {
doOnStart { viewPager.setLayerType(View.LAYER_TYPE_HARDWARE, null) }
doOnEnd {
baseActionSheetBinding.root.setLayerType(View.LAYER_TYPE_NONE, null)
viewPager.setLayerType(View.LAYER_TYPE_NONE, null)
}
play(viewPagerAnimator)
start()
}
}
View:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/view_pager_indicator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/view_pager_indicator"
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_marginBottom="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager"
app:tabBackground="#drawable/view_pager_indicator"
app:tabGravity="center"
app:tabIndicatorHeight="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I have Recyclerview multiple view types and have Recyclerview in Recyclerview when scroll lag first time I do not know why scroll lag first time
here my layout fragment
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".presentation.LottoFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/teal_700"
android:padding="20dp">
<LinearLayout
android:id="#+id/searchLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/menuTextInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:id="#+id/contentLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_peekHeight="56dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ic_list_header_background"
android:clickable="true"
android:elevation="4dp"
android:orientation="horizontal"
android:padding="20dp">
<TextView
android:id="#+id/lotto_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/kanit_light"
android:text="0 items(s)" />
<ImageView
android:id="#+id/filterIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:src="#android:drawable/arrow_up_float"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:id="#+id/front_layer_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/lotto_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="64dp"
tools:itemCount="3"
tools:listitem="#layout/item_lotto_prizes_one" />
</LinearLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
here my fragment
lottoRecyclerView.apply {
layoutManager = LinearLayoutManager(context)
adapter = lottoLatestAdapter
}
here my Adapter:
class LottoLatestAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
companion object {
private const val VIEW_TYPE_LOTTO_PRIZE_ONE = 1
private const val VIEW_TYPE_LOTTO_PRIZE_RUNNING_NUMBER = 2
private const val VIEW_TYPE_LOTTO_PRIZE_ONE_NEAR = 3
private const val VIEW_TYPE_LOTTO_PRIZE_OTHER = 4
}
var latestList: MutableList<LottoPrizesLatestModel> = mutableListOf()
set(value) {
field = value
notifyDataSetChanged()
}
private val viewPool : RecycledViewPool = RecycledViewPool()
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val inflater = LayoutInflater.from(parent.context)
return when (viewType) {
VIEW_TYPE_LOTTO_PRIZE_ONE -> {
LottoPrizeOneHolder(ItemLottoPrizesOneBinding.inflate(inflater, parent, false))
}
VIEW_TYPE_LOTTO_PRIZE_RUNNING_NUMBER -> {
LottoPrizeRunningNumberHolder(
ItemLottoRunningNumbersBinding.inflate(
inflater,
parent,
false
)
)
}
VIEW_TYPE_LOTTO_PRIZE_ONE_NEAR -> {
LottoPrizeOneNearHolder(
ItemLottoPrizesOneNearBinding.inflate(
inflater,
parent,
false
)
)
}
VIEW_TYPE_LOTTO_PRIZE_OTHER -> {
LottoPrizeOtherListHolder(
ItemLottoPrizesOtherListBinding.inflate(
inflater,
parent,
false
),
LottoLatestPrizeOtherAdapter()
)
}
else -> throw NullPointerException("Not have view Type")
}
}
override fun getItemViewType(position: Int): Int {
return when (latestList[position]) {
is LottoPrizesLatestModel.LottoLatestPrizeOne -> VIEW_TYPE_LOTTO_PRIZE_ONE
is LottoPrizesLatestModel.LottoLatestRunningNumbers -> VIEW_TYPE_LOTTO_PRIZE_RUNNING_NUMBER
is LottoPrizesLatestModel.LottoLatestPrizeFirstNear -> VIEW_TYPE_LOTTO_PRIZE_ONE_NEAR
is LottoPrizesLatestModel.LottoLatestPrizeOther -> VIEW_TYPE_LOTTO_PRIZE_OTHER
}
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
when (holder) {
is LottoPrizeOneHolder -> holder.bind(latestList[position] as LottoPrizesLatestModel.LottoLatestPrizeOne)
is LottoPrizeRunningNumberHolder -> holder.bind(latestList[position] as LottoPrizesLatestModel.LottoLatestRunningNumbers)
is LottoPrizeOneNearHolder -> holder.bind(latestList[position] as LottoPrizesLatestModel.LottoLatestPrizeFirstNear)
is LottoPrizeOtherListHolder -> {
viewPool.putRecycledView(holder)
holder.bind(latestList[position] as LottoPrizesLatestModel.LottoLatestPrizeOther, viewPool)
}
}
}
override fun getItemCount(): Int = latestList.size
}
here my layout holder
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:id="#+id/title_prize_other_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/kanit_light"
android:gravity="center"
android:textSize="26sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/prize_other_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title_prize_other_text_view"
tools:itemCount="10"
tools:listitem="#layout/item_lotto_prizes_other" />
<GridLayout
android:id="#+id/prize_other_grip_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title_prize_other_text_view" />
<TextView
android:id="#+id/text_prize_one_near_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/kanit_light"
android:text="#string/lotto_prize_per_baht"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/prize_other_recycler_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
and here my holder recyclerView in RecyclerView
class LottoPrizeOtherListHolder(
private val binding: ItemLottoPrizesOtherListBinding,
private val lottoLatestPrizeOtherAdapter: LottoLatestPrizeOtherAdapter
) :
RecyclerView.ViewHolder(binding.root) {
fun bind(
lottoLatestPrizeOther: LottoPrizesLatestModel.LottoLatestPrizeOther,
viewPool: RecyclerView.RecycledViewPool
) = with(binding) {
prizeOtherRecyclerView.apply {
layoutManager = GridLayoutManager(
context,
2,
GridLayoutManager.VERTICAL,
false
).apply {
initialPrefetchItemCount = lottoLatestPrizeOther.prizeModel.number.size
}
this.adapter = lottoLatestPrizeOtherAdapter
setRecycledViewPool(viewPool)
}
lottoLatestPrizeOtherAdapter.numberList =
lottoLatestPrizeOther.prizeModel.number.toMutableList()
titlePrizeOtherTextView.text = lottoLatestPrizeOther.prizeModel.name
textPrizeOneNearTextView.text = itemView.context.getString(
R.string.lotto_prize_per_baht,
lottoLatestPrizeOther.prizeModel.reward
)
}
}
my problem is : When i scroll recyclerview for first time it is not smooth and logcat show recyclerview Skipped 51 frames! adapter but when I reach end of recyclerView and scroll to up then scroll down it is very smooth and my recyclerview have TextView Only !!! how can I solve this issue?
this my video App https://youtu.be/Li7aKWmEfXQ
In your fragment add this after applying LayoutManager:
lottoRecyclerView.setDrawingCacheEnabled(true);
lottoRecyclerView.setItemViewCacheSize(myCacheSize);
The main reason Jank occurs the first time because on the first time it is loading the values onto memory dynamically. while once it is down it already has a few elements pre loaded
You can handle it using
mRecyclerView.setHasFixedSize(true);
mRecyclerview.setNestedScrollingEnabled(false);
in your kotlin code
or add android:nestedScrollingEnabled="false" in your RecyclerView xml
You can reach some performance improvements by applying the following:
recyclerView.setHasFixedSize(true);
recyclerView.setDrawingCacheEnabled(true);
..in combination with lite mode of MapsView:
<com.google.android.gms.maps.MapView
android:layout_width="match_parent"
android:layout_height="200dp"
app:liteMode="true"
app:mapType="normal" />
For it was not an option to disable nestedScrollingEnabled as mentioned by #Narendra_Nath, which further improves performance.
I am trying to implement a layout like this:
The issue is that when scrolling up the card touches the toolbar and it does not go up anymore like this:
I want it to scroll up till the viewpager to fills the screen ie, at least the rectangle card, should scroll up beyond the toolbar(Even the tabLayout can also scroll up). But I don't want it to stay sticky at the top.
The main layout is here:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="#layout/activity_main">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_dark"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbarCollapse"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:src="#drawable/ic_launcher_foreground"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin" />
</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"
app:behavior_overlapTop="90dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/lin"
android:nestedScrollingEnabled="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/debit_card_item" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_marginTop="40dp"
android:background="?attr/colorPrimary" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The fragments of the pager are inside a NestedScrollView like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rcView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.core.widget.NestedScrollView>
Things that I tried:
I have tried to remove the NestedScrollView above the linear layout and added the app:behavior_overlapTop="90dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" to the linear layout. but it's still giving me the same output.
Set the height of the view pager statically(gave the same result).
-->>>EDIT<<<
3. I thought of a workaround and I am trying to add custom behavior to my LinearLayout in my mainActivity. so as to reduce the margin-bottom and height of the rectangular card. It is giving good results when I fling and close the collapsing toolbar. But when I hold down and scroll, the screen is flickering as shown below:
My Custom behavior is
class CustomHeaderBehavior : AppBarLayout.ScrollingViewBehavior {
private var mContext: Context
var height = 0
var width = 0
var marginBottom = 0
var firstTime = true
constructor(
context: Context,
attrs: AttributeSet?
) : super(context, attrs) {
mContext = context
}
constructor(
context: Context?,
attrs: AttributeSet?,
mContext: Context
) : super(context, attrs) {
this.mContext = mContext
}
override fun layoutDependsOn(
parent: CoordinatorLayout,
child: View,
dependency: View
): Boolean {
return super.layoutDependsOn(parent, child, dependency)
}
override fun onDependentViewChanged(
parent: CoordinatorLayout,
childP: View,
dependency: View
): Boolean {
val child = childP.findViewById<RelativeLayout>(R.id.cardParent)
val maxScroll: Int = (dependency as AppBarLayout).totalScrollRange
val percentage =
abs(dependency.y) / maxScroll.toFloat()
Log.d("Behavx","D.y "+abs(dependency.y)+ " m s "+maxScroll+ " p "+percentage)
val lp: LinearLayout.LayoutParams =
child.layoutParams as LinearLayout.LayoutParams
if(firstTime){
height = child.height
width = child.width
marginBottom = lp.bottomMargin
firstTime = false
}
Log.d("Behaviour", "P "+ ((1-(percentage))*100).toString() +" H " +height+ " U H " +(height*(((1-(percentage))*100))/100) )
// lp.bottomMargin = ((marginBottom*(((1-(percentage))*100))/100) - ((height*((((percentage))*100))/100))).toInt()
lp.bottomMargin = ((marginBottom*(((1-(percentage))*100))/100)).toInt() //updating margin bottom
lp.height = ((height*(((1-(percentage))*100))/100)).toInt() //updating height
child.layoutParams = lp
child.alpha = 1 - (percentage * 4)
return super.onDependentViewChanged(parent, childP, dependency)
}
companion object {
fun getToolbarHeight(context: Context): Int {
var result = 0
val tv = TypedValue()
if (context.theme.resolveAttribute(R.attr.actionBarSize, tv, true)) {
result = TypedValue.complexToDimensionPixelSize(
tv.data,
context.resources.displayMetrics
)
}
return result
}
}
}
The flicker seems to be happening because the dependency.y is becoming wrong randomly, while I hold down and scroll and update the height of the card(if I only update the margin flicker is not occurring). For some reason controlling the width is happening smoothly. But unfortunately, that's not helping me here.
I also tried to do something similar by adding an offsetChangedListener to the app bar like this:
appBar.addOnOffsetChangedListener(OnOffsetChangedListener { appBarLayout, verticalOffset ->
if (abs(verticalOffset) == appBarLayout.totalScrollRange) {
// Collapsed
cardParent.visibility = View.GONE
} else {
//Expanded
cardParent.visibility = View.VISIBLE
}
})
But I am still getting the flicker
I have added the sample project here:
github link
The custom behavior is pushed to a new branch custom_behaviour
Finally Solved my issue. I added the card inside the collapsing layout like Kalyans answer and added a dummy view and a -ve margin to the card to have the overlap behavior effect like
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbarCollapse"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin" />
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#000" />
<include
layout="#layout/debit_card_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-90dp"
app:layout_collapseMode="parallax" />
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
I have also pushed my code to the github.
In order to achieve that effect, the card layout should be inside the collapsing toolbar.
Try replacing this:
<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:src="#drawable/ic_launcher_foreground"
app:layout_collapseMode="parallax" />
with:
<include layout="#layout/debit_card_item"
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="72dp"
app:layout_collapseMode="parallax"/>
and remove <include layout="#layout/debit_card_item" /> in the NestedScrollView.
Hope this helps.
I have the following layout file -
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragment_marketplace_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/fragment_marketplace_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
android:minHeight="150dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0">
<com.twoverte.views.ClearableAutoCompleteTextView
android:id="#+id/fragment_marketplace_searchview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginEnd="14dp"
android:completionThreshold="0"
android:hint="#string/fragment_marketplace_search_hint"
android:iconifiedByDefault="false"
android:inputType="text|textAutoCorrect"
android:maxLength="25"
android:textIsSelectable="false"
android:textSelectHandle="#xml/empty_shape"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="1dp" />
<TextView
android:id="#+id/fragment_marketplace_discover_products_from_myverte_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="15dp"
android:fontFamily="#font/noto_sans"
android:text="#string/fragment_marketplace_discover_products_from_myverte"
android:textSize="17sp"
android:visibility="gone"
tools:visibility="visible" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/fragment_marketplace_vendors_recycler_view"
android:layout_width="wrap_content"
android:layout_height="130dp"
android:layout_gravity="bottom"
android:minHeight="40dp"
android:orientation="horizontal"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:listitem="#layout/fragment_marketplace_vendor_row_item" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/fragment_marketplace_featured_products_nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/fragment_marketplace_featured_products_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/very_light_grey"
android:fontFamily="#font/noto_sans"
android:paddingStart="14dp"
android:paddingLeft="14dp"
android:paddingTop="15dp"
android:paddingEnd="14dp"
android:text="#string/fragment_marketplace_featured_products"
android:textSize="17sp"
android:visibility="gone"
tools:visibility="visible" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/fragment_marketplace_products_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/very_light_grey"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
tools:itemCount="2"
tools:listitem="#layout/fragment_marketplace_products_row_item" />
<View
android:id="#+id/activity_product_page_bottom_view"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginTop="60dp"
android:background="#color/light_black"
android:visibility="gone"
tools:visibility="visible" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and inside my onViewCreated I have the following code -
import kotlinx.android.synthetic.main.fragment_marketplace.fragment_marketplace_vendors_recycler_view as vendorsList
...
...
// onViewCreated ->
val originalVendorListHeight: Int = vendorsList.layoutParams?.height!!
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, value ->
vendorsList.updateLayoutParams {
this.height = originalVendorListHeight + value
(this as CollapsingToolbarLayout.LayoutParams).setMargins(0, 0, 0, abs(value))
}
})
Which creates an animation of the top horizontal RV of it being expanding with it's height up and down up to a cap which is what I need.
The issue I am facing now is that each ViewHolder inside that RV is not proportional once expanded as I am only changing it's height and not width and I am facing an issue trying to set the width of each individual VH as I can't rely on it's parent size as before with the height.
Here is my adapter and VH -
class VendorAdapter(private val miniVendorModels: List<MiniVendorModel>, private val context: Context) : RecyclerView.Adapter<VendorsHolder>() {
companion object {
const val EXTRA_VENDOR_MODEL = "EVM"
}
private val vendorsHoldersList = mutableListOf<VendorsHolder>()
override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): VendorsHolder {
val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.fragment_marketplace_vendor_row_item, viewGroup, false)
val vendorsHolder = VendorsHolder(view)
vendorsHoldersList.add(vendorsHolder)
return vendorsHolder
}
override fun onBindViewHolder(vendorsHolder: VendorsHolder, i: Int) {
val model = miniVendorModels[i]
Picasso.get().load(model.bannerPicture).into(vendorsHolder.vendorImageView)
vendorsHolder.vendorImageView.setOnClickListener { v: View? ->
try {
val intent = Intent(context, VendorPageActivity::class.java)
intent.putExtra(EXTRA_VENDOR_MODEL, model)
context.startActivity(intent)
} catch (e: Exception) {
e.printStackTrace()
Toast.makeText(context, ResourceHelper.getString(R.string.marketplace_vendor_unavailable), Toast.LENGTH_SHORT).show()
}
}
}
override fun getItemCount(): Int = miniVendorModels.size
}
class VendorsHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var vendorImageView: ImageView = itemView.findViewById(R.id.vendors_row_item_imageview)
var rootLayout: ConstraintLayout = itemView.findViewById(R.id.vendors_row_item_root_layout)
var vendorHolderCardview: CardView = itemView.findViewById(R.id.search_image_contact_cardview)
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/vendors_row_item_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="#+id/search_image_contact_cardview"
android:layout_width="152dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
app:cardCornerRadius="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/vendors_row_item_imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
tools:src="#mipmap/ic_launcher" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see, the ViewHolders are Match Parent in height meaning that they will expand with their parents.
I can't use the same trick for the width as it is a horizontal RV, so I will need to use a different method to enable the expanding and reducing all of the RV's VH width.
solved -
override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): VendorsHolder {
val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.fragment_marketplace_vendor_row_item, viewGroup, false)
val vendorsHolder = VendorsHolder(view)
vendorsHoldersList.add(vendorsHolder)
vendorsHolder.rootLayout.addOnLayoutChangeListener(object : View.OnLayoutChangeListener {
override fun onLayoutChange(v: View?, left: Int, top: Int, right: Int, bottom: Int, oldLeft: Int, oldTop: Int, oldRight: Int, oldBottom: Int) {
vendorsHolder.rootLayout.updateLayoutParams {
this.width = 152 + bottom
}
}
})
return vendorsHolder
}
where 152 is my base width of the viewholder
I have this layout and am trying to switch on a corresponding LL based on a position. However the first Linear Layout will only show up and be drawn if I give the text view inside an absolute dimension such as 200dp for the width, I have tried 0dp with constraints as well.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/draft_rider_container"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:text="lost"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/section"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone">
<TextView
android:id="#+id/fake"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
tools:text="Andrea Dovizioso's"></TextView>
</LinearLayout>
<LinearLayout
android:id="#+id/row"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone">
<TextView
android:id="#+id/rider_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
tools:text="Andrea Dovizioso's"></TextView>
</LinearLayout>
This layout is rendered from a recycler view that is on my fragment which is placed like this :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".roster.RosterFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/player_rider_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
android:src="#drawable/baseline_edit_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:rippleColor="#color/colorPrimary" />
And here is my adapter :
class PlayerRidersAdapter : RecyclerView.Adapter<PlayerRidersAdapter.ViewHolder>() {
var riderList = ArrayList<Rider>()
override fun onCreateViewHolder(parent: ViewGroup, position: Int): ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.rider_item_layout, null, false)
return ViewHolder(view)
}
override fun getItemCount(): Int {
return riderList.count() + 2
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
when(position) {
0 -> showHeader(holder)
3 -> showSection(holder)
else -> showRow(holder)
}
}
fun showHeader(holder: ViewHolder) {
holder.headerContainer.visibility = View.VISIBLE
holder.sectionContainer.visibility = View.GONE
holder.rowContainer.visibility = View.GONE
}
fun showRow(holder: ViewHolder) {
holder.headerContainer.visibility = View.GONE
holder.sectionContainer.visibility = View.GONE
holder.rowContainer.visibility = View.VISIBLE
//holder.name.text = rider.name
}
fun showSection(holder: ViewHolder) {
holder.headerContainer.visibility = View.GONE
holder.sectionContainer.visibility = View.VISIBLE
holder.rowContainer.visibility = View.GONE
}
fun addRiders(riders : ArrayList<Rider>){
riderList.addAll(riders)
notifyDataSetChanged()
}
class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
var headerContainer = view.findViewById<LinearLayout>(R.id.header)
var sectionContainer = view.findViewById<LinearLayout>(R.id.section)
var rowContainer = view.findViewById<LinearLayout>(R.id.row)
var name = view.findViewById<TextView>(R.id.rider_name)
}
}
In your adapter, specify the following in onCreateViewHolder():
val view = LayoutInflater.from(parent.context).inflate(R.layout.rider_item_layout, parent, false)
Specifying the root argument will let the inflated layout be sized properly. This is most likely your problem.
However, match_parent sometimes has strange behavior when used in ConstraintLayout, so use 0dp instead and remember to constrain the effected sides. It would be nice for ConstraintLayout to either handle this case, report it as an error or, at least, support a Lint check.
An aside: The constraints on the TextViews that are held within a LinearLayout have no effect. Constraints only apply to direct children of ConstraintLayout.
I'd like to achieve the flow like gmail
i've tried this so far
<?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:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/story_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/measure_50dp"
app:layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/measure_15dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Appbar hides while scroll up but doesnt appear on scroll down until its completely scrolled down. I'd like to achieve the flow like gmail, where the recyclerView is match_parent and it appears behind the toolbar when scrolled up, and toolbar hides/unhides on srcroll up and down in a nested scroll view. Any help is appreciated, Thanks!
You have to create nestedScrollview addOnScrollChangedListener like this
float viewScrolled = 0f
nestedScrollview.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver
.OnScrollChangedListener() {
if (viewScrolled < nestedScrollview.getScrollY()) {
viewScrolled = nestedScrollview.getScrollY();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Hide your app bar
}
}
if (viewScrolled > nestedScrollview.getScrollY()) {
viewScrolled = nestedScrollview.getScrollY();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
if (viewScrolled == 0F) {
// Show your app bar
}
}
}
And also refer this link:-https://medium.com/#tonia.tkachuk/appbarlayout-scroll-behavior-with-layout-scrollflags-2eec41b4366b