Develop Reference

Drag and drop between overlapping views

I am trying to move items between two recyclerviews, one of them into a bottom sheet.
I get this working without problems if the bottom sheet is in the same LinearLayout that the target recylcerview, as you can see in this gif:
This is the working layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical"
app:layout_constraintBaseline_toTopOf="parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="25sp"
android:paddingTop="20dp"
android:paddingBottom="10dp"
android:text="Target RecyclerView" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/bottom_sheet_dialog" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My problem is when I try it with the bottom sheet overlapping the main content, I mean using a FrameLayout or Relativelayout as parent. In this case onDrag() is not fired outside the bottom sheet. Not working:
Not working layout, using a RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical"
app:layout_constraintBaseline_toTopOf="parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="25sp"
android:paddingTop="20dp"
android:paddingBottom="10dp"
android:text="Target RecyclerView" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
</LinearLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/bottom_sheet_dialog" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
I need the bottom sheet over the main content. Any idea?
Thanks!
Edit: Further investigations point that the problem is the CoordinatorLayout (which is a Bottom Sheet requirement). CoordinatorLayout is a "super-powered FrameLayout" and it acts at "top-level application decor", and I do not know why it does not allow onDrag events get views outside of CoordinatorLayout.
Workaround: For the moment my workaround is setting CorrdinatorLayout visibility to GONE when one of its views is dragged. This allow me to drop the view outside of CoordinatorLayout successfully, but I think should be some other way, some CoordinatorLayout parameter to allow dragging outside it.

Recyclerview with fixed height wont scroll inside nested scroll view

I have a RecyclerView with a fixed height inside a NestedScrollView with a few other layouts inside it. The recycler view won't scroll, but it scrolls fine if I set its height to wrap_content.
I cannot make the RecyclerView use wrap_content because there is an issue with EndlessRecyclerViewScrollListener that it keeps loading data from the server and pushing it into my Adapter even if the user has not scrolled down at all.
Most are suggesting to set nested scrolling to false, but if I disable nested scrolling, the NestedScrollView does not allow me to scroll my RecyclerView. But if I leave nested scrolling enabled, the scroll view does not scroll unless I start touching from outside the RecyclerView.
My layout code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/scoop_background"
tools:context=".module.scoop.timeline.ScoopTimelineFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="92dp">
<ImageView
android:id="#+id/ivTimelineBanner"
android:layout_width="match_parent"
android:layout_height="92dp"
android:layout_margin="0dp"
android:clickable="true"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/banner_placeholder" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="92dp">
<TextView
android:id="#+id/tvGroupMembership"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<TextView
android:id="#+id/tvGroupName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="#dimen/text_header"
android:textStyle="bold" />
<TextView
android:id="#+id/tvGroupMemberCount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#null"
android:paddingStart="#dimen/divider_normal"
android:paddingEnd="#dimen/divider_normal"
android:src="#drawable/ic_chevron_right_white_24dp" />
</LinearLayout>
</FrameLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeRefreshLayoutTimeline"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:overScrollMode="never"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="4dp">
<android.support.v7.widget.CardView
android:id="#+id/cvCreateScoop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/divider_small"
android:layout_marginRight="#dimen/divider_small"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/divider_normal">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/svg_nav_create_scoop" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingStart="#dimen/divider_normal"
android:text="What's on your mind?"
android:textSize="#dimen/text_content" />
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:padding="#dimen/divider_xsmall"
android:src="#drawable/svg_insert_image" />
</LinearLayout>
</android.support.v7.widget.CardView>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:overScrollMode="never"
android:nestedScrollingEnabled="false"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingBottom="4dp">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
What do I have to modify so that the RecyclerView is scrollable, but the whole NestedScrollView also scrolls along with it, so that if the user is scrolling back up (swiping from top to bottom), the RecyclerView will scroll along with the NestedScrollView, which will bring the layouts above RecyclerView.
To visualize:
The layout I'm trying to achieve is similar to that of facebook's. When you scroll down, the timeline will scroll down, and the search bar with the messenger icon at the top is also scrolled so that it is hidden when scrolling down. When you scroll up, the timeline is being scrolled back up, and showing the search bar again.

I decided to do it differently because I wasn't able to solve it with this method. Instead, I used a CollapsingToolbar and put the other layouts inside it, then removing its background so it does not look like a toolbar, and it seamlessly does what I wanted to, just with a different implementation.

View not centered in fragment in ViewPager and RecyclerView Hidden by Toolbar

I have a ViewPager integrated with a TabLayout that displays 4 fragments (4 tabs). Each of those fragments are RecyclerViews that display lists of items. The number of items in each list is generated by a given date but sometimes there will be no items displayed. When this happens I switch to another fragment that displays in a TextView "No Games Scheduled".
The problem is that text is not centered in the screen. It is positioned kind of in the center but towards the bottom. I believe it has to do with my ViewPager attribute in XML where I set it to app:layout_behavior="#string/appbar_scrolling_view_behavior" (Note: this line is not displayed in posted code. I explain later.)
When I click on the xml code for the ViewPager, in the preview screen, (in Android Studio) the blue section that lights up is extended below the screen. So I know it has to do with that. When I remove that line of code the blue section fits the screen. As a test, I set the TextView displaying "No Games Scheduled" layout_gravity to center|bottom and when I ran the app, the text was not showing on screen. So I know it's being hidden by that line of code in the ViewPager. But I need it because I want the toolbar to hide when scrolling down and show when I scroll up.
I then tried removing app:layout_behavior="#string/appbar_scrolling_view_behavior" from the ViewPager and placed it in each of the fragments. It works but now the top of each fragment is being covered by the Toolbar and the Tabs like this (not my program, because I'm not allowed to show the UI, but it shows my exact problem):
How can I fix this? Thanks for any help!
main_activity.xml:
<android.support.v4.widget.DrawerLayout
android:id="#+id/nav_drawer"
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.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
<include layout="#layout/toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/main_activity_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/light_black"/>
<LinearLayout
android:id="#+id/league_and_date_title_view"
android:layout_width="match_parent"
android:layout_height="34dp"
android:background="#color/gray"
android:orientation="horizontal"
android:paddingEnd="0dp"
android:paddingLeft="4dp"
android:paddingRight="0dp"
android:paddingStart="4dp"
android:weightSum="1">
<TextView
android:id="#+id/league_title_header"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|start"
android:paddingEnd="0dp"
android:paddingLeft="5dp"
android:paddingRight="0dp"
android:paddingStart="5dp"
android:textSize="14sp"
android:textColor="#color/green"
tools:text="League"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|end"
android:orientation="horizontal">
<ImageButton
android:id="#+id/previous_date_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/prev_date_button"
android:src="#drawable/previous_arrow"/>
<TextView
android:id="#+id/display_date_text_view"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="?attr/selectableItemBackgroundBorderless"
android:gravity="center"
android:textColor="#color/outnix_orange"
android:textSize="14sp"
tools:text="Date Goes Here"/>
<ImageButton
android:id="#+id/next_date_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="#string/next_date_button"
android:src="#drawable/next_arrow"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_activity_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ProgressBar
android:id="#+id/loading_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<fragment
android:id="#+id/fragment_nav_drawer"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_nav_drawer"
tools:layout="#layout/fragment_nav_drawer"/>
</android.support.v4.widget.DrawerLayout>
One of the fragment's layout:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
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.v7.widget.RecyclerView
android:id="#+id/all_games_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_black"
android:paddingBottom="8dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
Fragment I switch to when no items are in the RecyclerView:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_black">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/no_games"
android:textColor="#color/white"
android:textSize="18sp"/>
</RelativeLayout>

Anchoring Views together Android

I want to implement view anchoring, I have a Horizontal ScrollView which I want to anchor to a button, the button files the screen width, in the ScrollView is a linearlayout with images, I want the Images to be looking like they are pass on the Button, I want to make something like how a Fab manages to anchor between view except I do not know where to start, Fab has attributes like app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end"
which make it very easy to anchor it, I once tried implementing anchoring but on Big screens it was cutting off from the anchor, below is my XML layout
<FrameLayout
style="#style/commonListItemStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<FrameLayout
android:id="#+id/container"
android:paddingTop="4dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:paddingBottom="4dp"
android:foreground="?attr/selectableItemBackground">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:scrollbars="none"
android:id="#+id/scrollView"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageHolder"
android:orientation="horizontal">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/clothes"/>
</LinearLayout>
</HorizontalScrollView>
<android.support.v7.widget.CardView
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="wrap_content"
app:cardCornerRadius="2dp"
app:cardElevation="1dp"
android:layout_below="#+id/scrollView"
app:cardMaxElevation="2dp"
app:cardUseCompatPadding="true"
android:id="#+id/relativeLayout">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Add New Item"
android:textStyle="bold"
android:id="#+id/addNewItem"
android:textSize="16sp"
style="?android:buttonBarButtonStyle"
android:textColor="#color/google_darkblue"
android:layout_weight="1"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</FrameLayout>
</FrameLayout>
So I will give an example of Gem Player here https://android-arsenal.com/details/3/2679 I want the HorizontalScrollview to act like the Fab and the Button to act like the red view anchoring the fab, I want when Images are being scrolled within the Horizontal scrollview to look like they are halfway on the Button, I want the user to feel like the image is on the button.

How to change the height of ExpandableListView when group is expanded

How to change the height of ExpandableListView when group is expanded/collapsed?
I want to change the height of ExpandableListView to fit the height of its content, so that the view will not scroll inside itself.
this is the layout for main activity.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="jp.foo.android.activity.FooActivity"
tools:ignore="MergeRootFrame" />
and this is a layout for the fragment of the main activity.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="jp.foo.android.fragment.FooFragment"
android:background="#color/category_bg">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:id="#+id/frameLayout">
<TextView
android:text="#string/subtitle_question_category"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/subtitle_category"
android:gravity="center_vertical|center_horizontal"
android:layout_gravity="center_horizontal|top"
android:textSize="20sp" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/frameLayout"
android:background="#drawable/category_list_bg_shape"
android:layout_marginTop="0dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:minHeight="300dp">
<LinearLayout
android:id="#+id/category_list_progressbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical"
android:visibility="gone">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<ExpandableListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/category_list"
android:transcriptMode="normal">
</ExpandableListView>
</FrameLayout>
</RelativeLayout>
Below is the actual layout.
ExpandableListView will scroll inside when it has too many contents.
I want to scroll whole screen. Not only scroll view, but with header.

I solved a similar issue putting everything into a Header. I was close to solving it the traditional ways (ie. nesting layouts, weights, ...) but I felt the solution was pretty dirty, requiring overriding methods such as onGroupClick etc... to disable the ExpandableListView's scroll, while the header thing was clean and worked flawlessly for me.
So if you want to try this approach, just put an ExpandableListView alone inside your fragment, and prepare the rest to be inserted as Header.
So in your fragment a full ExpandableListView:
<ExpandableListView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/category_list"
android:transcriptMode="normal">
</ExpandableListView>
Then create the layout expandable_header.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="jp.foo.android.fragment.FooFragment"
android:background="#color/category_bg">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:id="#+id/frameLayout">
<TextView
android:text="#string/subtitle_question_category"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/subtitle_category"
android:gravity="center_vertical|center_horizontal"
android:layout_gravity="center_horizontal|top"
android:textSize="20sp" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/frameLayout"
android:background="#drawable/category_list_bg_shape"
android:layout_marginTop="0dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:minHeight="300dp">
<LinearLayout
android:id="#+id/category_list_progressbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical"
android:visibility="gone">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</RelativeLayout>
And then inflate the header into the ExpandableListView:
.
.
.
View view = View.inflate(context, R.layout.expandable_header, null);
expandableList.addHeaderView(view, null, false);
.
.
.
This way the header will scroll together with the ExpandableListView, as it's inside it.
BTW, your layout has redundant elements, for example the FrameLayout that contains only a TextView. You can use only the TextView. Also the LinearLayout with the ProgressBar, if you are not using an opaque background, you could put the ProgressBar alone. The less ViewGroups you use the better the layout will perform!