Hiding A widget on recyclerview scrolling leaves blank space - android

I've a custom calendar view placed at the top of screen and when i'm trying to hide that widget based on recyclerview scrolling, the widget leaves an empty screen like below screenshots
and the above calendarView leaves a blank space like this
here is the code of my fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient_background"
android:orientation="vertical"
tools:context=".employer.AttendedFragment">
<com.shrikanthravi.collapsiblecalendarview.widget.CollapsibleCalendar
android:id="#+id/calendar_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:buttonLeft_drawableTintColor="#android:color/white"
app:buttonRight_drawableTintColor="#android:color/white"
app:expandIconColor="#color/itemColorDefault"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_scrollFlags="scroll|enterAlways"
app:primaryColor="#color/colorPrimary"
app:selectedItem_background="#drawable/circle_white_solid_background"
app:selectedItem_textColor="#color/colorPrimary"
app:textColor="#android:color/white"
app:todayItem_background="#drawable/circle_white_stroke_background"
app:todayItem_textColor="#android:color/white">
</com.shrikanthravi.collapsiblecalendarview.widget.CollapsibleCalendar>
<android.support.v7.widget.RecyclerView
android:id="#+id/attendance_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:clipToPadding="false">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
and this how I'm hiding the views
#Override
public void onHide() {
mCalendarView.animate().translationY(-mCalendarView.getHeight()).setInterpolator(new AccelerateInterpolator(2));
}
#Override
public void onShow() {
mCalendarView.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
}
Please let me know how can i remove that blank space when scrolling the recyclerView

Add animate listener, set calender view's visibility to GONE after your amimation is complete.

Related

Expand/Fold a Layout when user swipes

In an Android project, I have an Activity that contains (from top to bottom) a header, a RecyclerView and a RelativeLayout.
Code sample :
<android.support.design.widget.CoordinatorLayout ...>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
...
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
This is the behaviour I want : the RelativeLayout is "folded" by default, i.e. under the RecyclerView. When the user swipes up, the RelativeLayout expands to use the whole screen, and folded again when swipes down.
What is the right way to do it ? As I want the RelativeLayout to be BELOW the RecyclerView when folded, and OVER it when expanded. I tried setting the dependencies between elements dynamically but couldn't manage to do so.
Thanks for any help or advice on how to organize the activity to get such a behaviour.
EDIT
This is the XML structure :
<CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</AppBarLayout>
<RecyclerView
android:id="#+id/top_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/app_bar"
android:layout_above="#+id/relativelayout_footer" />
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true">
<TextView ...>
<RecyclerView
android:id="#+id/included_list"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:visibility="gone"/>
</RelativeLayout>
</RelativeLayout>
</CoordinatorLayout>
And the listener :
top_list.setVisibility(playlistOpened ? View.VISIBLE : View.GONE);
app_bar.setVisibility(playlistOpened ? View.VISIBLE : View.GONE);
included_list.setVisibility(playlistOpened ? View.GONE : View.VISIBLE);
Transition cb = new ChangeBounds();
cb.setDuration(1000);
TransitionManager.beginDelayedTransition(slider, cb);
playlistOpened = ! playlistOpened;
As you see, I switch the visibility of the elements in order to reorganise the view. When the included_list is set to VISIBLE, it pushes up the TextView.
The only problem is that the top_list and the app_bar disappear before being covered by the RelativeLayout. I tried adding a Listener to the Transition and do these when the transition ends, but it doesn't work (I guess because they're not set to GONE at the beginning, so the RelativeLayout can't move up). Any idea of how to do so ? Maybe I should open another question for it ?
Okay, a final attempt. I am back to RelativeLayout and added another one around the RecyclerView to fix its scrolling problem. However, transitions get tricky (and the listener complicated) then. In order to prevent the RecyclerView from popping away before the RelativeLayout with the TextView inside fully covers the latter, I had to include a fading transition to the RecyclerView, too. Hope this suits you.
XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
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.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rlwithrecyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/rlwithtextview"
android:layout_alignParentTop="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlwithtextview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="#+id/textview"
android:text="Just a test" />
</RelativeLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
onClick():
#Override
public void onClick(View v) {
RelativeLayout rlWithRecyclerView = findViewById(R.id.rlwithrecyclerview);
RelativeLayout.LayoutParams layoutParamsRlWithRecyclerView;
RelativeLayout rlWithTextView = findViewById(R.id.rlwithtextview);
RelativeLayout.LayoutParams layoutParamsRlWithTextView;
if (rlWithTextView.getLayoutParams().height == MATCH_PARENT) {
layoutParamsRlWithTextView = new RelativeLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
layoutParamsRlWithRecyclerView = new RelativeLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
layoutParamsRlWithRecyclerView.addRule(RelativeLayout.ALIGN_PARENT_TOP);
layoutParamsRlWithRecyclerView.addRule(RelativeLayout.ABOVE, R.id.rlwithtextview);
} else {
layoutParamsRlWithRecyclerView = new RelativeLayout.LayoutParams(MATCH_PARENT, 0);
layoutParamsRlWithTextView = new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
}
layoutParamsRlWithTextView.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
Transition changeBounds = new AutoTransition();
changeBounds.setDuration(500);
TransitionManager.beginDelayedTransition(rlWithRecyclerView, changeBounds);
TransitionManager.beginDelayedTransition(rlWithTextView, changeBounds);
rlWithRecyclerView.setLayoutParams(layoutParamsRlWithRecyclerView);
rlWithTextView.setLayoutParams(layoutParamsRlWithTextView);
}
Although I got credit for the two other answers, I will eventually delete them, since they don't solve the problem.

Scrolling in View Pager

I have an activity in which I have taken single tab layout and content of this tab layout is contained inside a viewpager.
This is my part of the code of main activity containing the tab layout and the viewpager.
<android.support.design.widget.TabLayout
android:id="#+id/materialup.tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/selecteditem"
android:fillViewport="true"
app:tabBackground="#drawable/tab_background"
app:tabGravity="fill"
app:tabIndicatorColor="#0000"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabTextColor="#color/white" />
​
<!-- The top margin value equals half height of the blue box -->
<android.support.v4.view.ViewPager
android:id="#+id/materialup.viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
and for the content of this viewpager I have taken a Fragment class which contains a expandable list view, here is the part of code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="4dip"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frstll"
android:orientation="vertical">
<ExpandableListView //list view taken for list items
android:id="#+id/expandableListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ffffff"
android:childDivider="#f4f4f4"
android:dividerHeight="1dp"
android:groupIndicator="#null" />
</LinearLayout>
</LinearLayout>
The problem is that when I touch on the tab(the green portion in the image), the layout scrolls perfectly but when I click on the expandable listview's part (the portion with white background in the image) it does not scroll.
So how can I achieve scrolling by touching on the expandable list part?
This is the layout I have acheived using the above code.
I want to know why the default scrolling feature of expandable listview is not working here in my code.
Should I change my Main Activity's layout or a minor change in the expandable listview's code in my fragment class?
Please add touchlistener on ExpandableListView
yourRecyclerview.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});

Android swipe tab with scroller

i'm using a Material swipe tab to show with swipe 3 different fragment layout.
This is the xml layout for swipe tab:
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<com.android4devs.slidingtab.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
></android.support.v4.view.ViewPager>
</LinearLayout>
Now the xml layout fragment of swipe have a button fixed into bottom of layout so when i swipe to this fragment the layout of fragment is cut see image:
there some way to fix the layout fragment into ViewPager or a way for scroll it with a scroller view?
Thanks
In your second Fragment, you can use
scrollView.post(new Runnable() {
#Override
public void run() {
scrollView.fullScroll(View.FOCUS_DOWN);
}
});
To scroll your ScrollView to the bottom, so your Button will be totally visible.

Sliding RecyclerView

I have a RecyclerView in a LinearLayout. How can I have LinearLayout "slide" upwards until it hits the App Bar, whereby the RecyclerView should then begin scrolling the items as usual. Likewise, scrolling the list down will begin to "slide" the entire container down when the the first item is reached in the list until the container returns to its starting position.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/nearby_stops"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="#dimen/half_padding"
android:paddingTop="#dimen/half_padding"
android:scrollbars="none" />
</LinearLayout>
I looked at https://github.com/umano/AndroidSlidingUpPanel, however it does not support RecyclerView and the moment.
Put the RecyclerView inside a Fragment, so make an XML like so for the Fragment:
This is your XML for the RecyclerView
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/nearby_stops"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="#dimen/half_padding"
android:paddingTop="#dimen/half_padding"
android:scrollbars="none" />
</LinearLayout>
Then for the Activity hosting the Fragment just add a FrameLayout for the Fragment:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Put other views here -->
<FrameLayout
android:id="#+id/slidingFragmentContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Then inside your Activity when you instantiate the Fragment do the following:
SampleFragment listFragment = new SampleFragment();
getSupportFragmentManager().beginTransaction()
.setCustomAnimations(R.anim.abc_slide_in_bottom, R.anim.abc_slide_out_bottom,
R.anim.abc_slide_in_bottom, R.anim.abc_slide_out_bottom)
.addToBackStack(null)
.add(R.id.slidingFragmentContent, listFragment)
.commit();
The animations R.anim.abc_slide_in_bottom and R.anim.abc_slide_out_bottom are available in the Android API.
I also noticed you're not setting any orientation for your LinearLayouts. Set an orientation like so android:orientation="..."
You can assign a Button to show the Fragment, like so:
mButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
showFragment();
}
});
--------------------------------------------------------------------
To get the RecyclerView to scroll up as you scroll it just use the following:
Create an XML layout like this for your Activity:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/map_view_height"
android:orientation="vertical"
android:fitsSystemWindows="true">>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<YourCustomViewContainingTheMap
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Inflate your Fragment inside the FrameLayout and then as you scroll up it should do a parallax animation on the Map. If you don't want a Parallax effect just set app:layout_CollapseMode="pin"
Here is a sample app I created, you can see as I scroll up on the RecyclerView it slides up:
(Please note the Frame Animations on GIFs is not that great)
To get a shadow behind the sliding list on your map, just set app:layout_collapseMode to parallax and then add another view in front of your MapView inside the CollapsingToolbarLayout which can be your mask, it can be be a simple view, and then you can adjust it's alpha value as you scroll up the list.
It's better to use the native android views at your disposal, I noticed that AndroidSlidingPanelLayout has around 43 issues.

CalendarView horizontal lines disappear

I created an activity with a CalendarView. When scrolling up and down, sometimes one of the grey horizontal lines disappears. See the following image for the lines I am talking about. What causes this?
view_calendar.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<CalendarView
android:id="#+id/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
ViewCalendar.java
public class ViewCalendar extends Activity {
#Override
public void onCreate (Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_calendar);
}
}
In your "calender" one of the disappeared grey line shows that you are in that row. In that disappeared line one block shows grey pointing to the current date. Like in your "calender" that block 22. You can see in the image provided in the below link.
http://www.edumobile.org/android/android-development/calenderview-example/
Try this code in your 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="match_parent" >
<CalendarView
android:id="#+id/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>

Categories

Resources