Develop Reference

increasing and decreasing RV height depending on another RV scrolling

I want to achieve the following behavior -
https://ezgif.com/optimize/ezgif-6-66c61806b01c.gif
here he is my XML file -
<?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/fragment_marketplace_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="7dp">
<LinearLayout
android:id="#+id/fragment_marketplace_main_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical">
<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_marginTop="15dp"
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" />
<androidx.core.widget.NestedScrollView
android:id="#+id/fragment_marketplace_vendors_nested_scrollview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/fragment_marketplace_vendors_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginEnd="14dp"
android:orientation="horizontal"
tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:listitem="#layout/fragment_marketplace_vendor_row_item" />
</androidx.core.widget.NestedScrollView>
<androidx.core.widget.NestedScrollView
android:id="#+id/fragment_marketplace_featured_products_nested_scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp">
<LinearLayout
android:layout_width="wrap_content"
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: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>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have tried SO MANY combinations with setOnScrollChangeListener and addOnScrollListener and nothing works as expected.
The needed result is to have the ability to increase and decrease the top RV up to a cap.
The decrease should be done when scrolling the bottom RV downwards while the increase is being done when scrolling up.
If someone can assist me with this I would literally kiss his legs, I have been investing so many hours trying to crack how to make this behavior that I am sick of it.
edit
the needed animation -

I finally figured it out. I will share the code for the XML file as it is first, then explain everything about it later.
<?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"
xmlns:tools="http://schemas.android.com/tools">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:minHeight="132dp"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<View
android:id="#+id/blue_view"
android:layout_width="match_parent"
android:layout_height="128dp"
android:background="#android:color/holo_blue_bright"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0"
android:layout_gravity="top"/>
<HorizontalScrollView
android:id="#+id/pink_view"
android:layout_width="match_parent"
android:layout_height="128dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1"
android:layout_gravity="bottom">
<View
android:layout_width="2000dp"
android:minWidth="2000dp"
android:layout_height="match_parent"
android:background="#color/colorAccent"/>
</HorizontalScrollView>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Note: I used View with different colors in order to preview different segments in the Layout. I also used HorizontalScrollView in order to showcase something like a RecyclerView as in the gif you uploaded.
Alright, so first, we need to create a CollapsingToolbarLayout with layout_scrollFlags.
we use scroll flag must be enabled for any scroll effects to take into effect
we use snap flag to determine what to do when a view only has been partially reduced. If scrolling ends and the view size has been reduced to less than 50% of its original, then this view to return to its original size. If the size is greater than 50% of its sized, it will disappear completely.
we use exitUntilCollapsed along with minHeight in order to collapse the Toolbar down to the specified minHeight
We want the CollapsingToolbarLayout to have:
layout_height set to the expanded height of the Toolbar
minHeight set to the collapsed height of the Toolbar
In this case, since we want the HorizontalScrollView (pink_view) only to get smaller in height, we set the minHeight to the [ height of blue_view + smaller height of pink_view ]
Therefore, since blue_view will remain 128dp and we want pink_view to go down to 4dp, we set the minHeight to 132dp.
So here is a small example. Assume the blue_view is like 100dp and the pink_view is initially 100dp. So that's how we want it to show at first, but when I start scrolling we want the pink_view to go down to 20dp and the blue_view will stay at 100dp.
Therefore, layout_height will be 200dp and the minHeight will be 120dp.
Now, we want the HorizontalScrollView or the pink_view to collapse with the CollapsingToolbarLayout height.
So, we add layout_collapseMode="parallax" to the pink_view such that it scrolls along with the CollapsingToolbarLayout.
The layout_collapseParallaxMultiplier determines what part of the image (in percent) will be hidden under the bottom content. And here, we want it all to be hidden. Therefore, we set it to 1.
Meanwhile, we want the blue_view to stay pinned to the top. And we also don't want it to be hidden under any bottom content.
So, we add layout_collapseMode="pin" to the blue_view such that it gets pinned to the top of the CollapsingToolbarLayout.
We also add layout_collapseParallaxMultiplier="0" in order to not have it be hidden under any content.
Please note that if the heights of the elements exceeds the minHeight, the CollapsingToolbarLayout will be pushed above the screen. It will then seem as if the height of the top item (here blue_view) is decreasing in size.
Preview:
Here is another demo with a RecyclerView:
The XML for the above RecyclerView demo is below if anyone is interested.
<?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"
xmlns:tools="http://schemas.android.com/tools">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:minHeight="148dp"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<View
android:layout_width="match_parent"
android:layout_height="128dp"
android:background="#android:color/holo_blue_bright"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0"
android:layout_gravity="top"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/hv_list"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="128dp"
android:minHeight="20dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1"
android:layout_gravity="bottom"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Edit : Important thing for RecyclerViews and ViewHolders
To achieve the height resize for RecyclerView and ViewHolder, we have to resize them when the offset of the AppBarLayout changes on scroll.
This is because the CollapsingToolbarLayout just scrolls the elements inside it under each other instead of actually resizing them.
So, we have to use the RecyclerView, called here hv_list, and the AppBarLayout, called here app_bar.
val hv_list: RecyclerView = findViewById(R.id.hv_list)
val app_bar: AppBarLayout = findViewById(R.id.app_bar)
After that, we need to remember the original size of the hv_list.
val hv_original_height: Int = hv_list.layoutParams.height
Finally, we need to set an OffsetChangedListener for the AppBarLayout. There, we will be changing the height of the RecyclerView and then give it a margin bottom to push it up only because it has a gravity bottom.
app_bar.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
override fun onOffsetChanged(appBarLayout: AppBarLayout, i: Int) {
hv_list.updateLayoutParams {
this.height = hv_original_height + i
(this as CollapsingToolbarLayout.LayoutParams).setMargins(0, 0, 0, abs(i))
}
}
})
Make sure that your itemView in the RecyclerView has height of match_parent

Android bottom toolbar disappears when fragment fills screen

I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks

Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".

Can't make Floating Action Button "float"

First things first, I've checked that answer: How to add shadow to the FAB provided with the android support design library?
But even adding the app:borderWidth="0dp" or elevation="6dp" it didn't work. I have checked this answer: https://stackoverflow.com/a/30752754/1121139 it says as bigger my elevation, bigger is the shadow, and here goes the funny thing, at the preview screen it shows the shadow, but when runs at smartphone I got no shadow.
Here goes an screenshot from smartphone:
and here goes and screenshot from preview screen at android studio:
My layout code:
<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"
android:orientation="vertical"
tools:context="amaz1ngc0de.com.br.materialdesign.MainActivity">
<include android:id="#+id/app_bar" layout="#layout/toolbar_app_bar"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_test_fab"
android:layout_below="#id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_margin="16dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="#drawable/ic_add_white_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="140dp"
app:borderWidth="0dp"
app:pressedTranslationZ="12dp"
android:clickable="true"/>

Try wrapping your layout inside a CoordinatorLayout and put the FAB at the same level, instead of a RelativeLayout, example:
<!-- main_layout.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:fitsSystemWindows="true"
tools:context=".activity.MainActivity">
<include layout="#layout/toolbar_app_bar" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_test_fab"
android:layout_below="#id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.FloatingActionButton
... />
</android.support.design.widget.CoordinatorLayout>
Edit:
This widget is from the design library, you should have it added in your app's build.gradle file:
compile 'com.android.support:design:24.0.0'

OK so I have tried around a bit and it seems shadowing with elevation doesn't work as you imagined. This code gives quite a shadow:
<android.support.design.widget.FloatingActionButton
android:id="#+id/name_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="15dp"
android:src="#drawable/ic_add"
app:elevation="20dp"/>
But if I set elevation to 200, the shadow disappears. So there is only a range at which the shadow is working.
Maybe you can understand it as an object, casting a shadow onto an underlaying object. The higher the elevation, the greater is the distance between the two objects and the less shadow is cast...

Android Custom TabLayout: Icon overlays content

I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!

I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity layout:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>

SlidingPaneLayout - faded views have strange background

I have problem with SlidingPaneLayout.
When I open menu (made with spl), all views (textviews, imageviews, etc.) look like these textviews on screenshot (they have strange color around text, 25th is ok - this one is green when visible):
How to fix this issue?

You just have to add the following line to your code:
mSlidingPane.setSliderFadeColor(getResources().getColor(android.R.color.transparent));
For more info see the docs

In addition to 'reVerse' answer:
set your custom color:
mSlidingPane.setSliderFadeColor(getResources().getColor(R.color.mycolor));
Important: Make sure that your slided layout has a background color (any color is okey).
This works:
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:id = "#+id/drawerContainer"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_gravity="right"
android:layout_height="match_parent"
android:background="#color/grey_light">
<!--- your content here -->
</RelativeLayout>
</android.support.v4.widget.SlidingPaneLayout>
To mimic the general grey background you can use:
<color name="grey_light">#fffafafa</color>