How to approach this fade transition - android

I am building an app using Android Studio, and I cannot figure out how to approach this issue I am facing.
I have a recyclerview that takes up about two-thirds of the lower half of the screen. Above it are three other elements. I need those elements to disappear when the recyclerview gets scrolled, and I need the recyclerview to scale up to fill the entire screen. I have found ways to do this, but they all cause the items inside of the recyclerview to scale up as well, distorting them.

Use this implementation:-
recyclerview.addOnScrollListener(new HidingScrollListener()
{
#Override
public void onHide()
{
tabss.animate().translationY(tabss.getHeight())
.setInterpolator(new AccelerateInterpolator(2)).start();
filtershow.animate().translationY(-filtershow.getHeight())
.setInterpolator(new AccelerateInterpolator(1));
}
#Override
public void onShow()
{
tabss.animate().translationY(0).setInterpolator(new
DecelerateInterpolator(2)).start();
filtershow.animate().translationY(0).setInterpolator
(new DecelerateInterpolator(1)).start();
}
});

Related

RecyclerView continuous loop automatic smoth Scrolling

Background:
I'm developing a tournament management software and I want to show the current contenders classification on a screen that is feed by an android device.
The number of contenders exceeds the vertical size of the screen, so I would like to show it using a nice vertical animate smoth scroll from bottom to top that would be endless (when the list shows the last element it would start showing the first as it would be a loop.
Approach:
After some research (sorry I don't have the all the references) I come up with the following implementation:
I'm using a recyclerview with an adapter on a fragment. In order to automatically scroll it up I have added a timer that would scroll the recycleview on fixed itervals:
CountUpTimer recyclerViewAutoScroll = new CountUpTimer(1) {
public void onTick(long millis) {
recyclerView.scrollBy(0, mSpeed * 2);
if (!recyclerView.canScrollVertically(1)) {
recyclerView.scrollToPosition(0);
}
}
};
This timer is being created and launched on a global layout listener:
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
layoutListener = () -> {
recyclerView.post(() -> recyclerViewAutoScroll.start());
recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(layoutListener);
}
The CountUpTimer class is just an "infinite" timer implemented using an android CountDowntimer.
With this piece of code I can scroll up at regular times, the problem is that is not smoth at all. There are two parameters to play with: the timer tick time, and the amount of vertical scroll that is made each time the timer "ticks". The only way to make it "smooth" is to reducing so much the scroll movement that it ended being very very very slow for the user.
Just for completeness, to achieve the endless scroll efect I added an scroll listener to the recycler view:
recyclerView.addOnScrollListener(new EndlessRecyclerOnScrollListener(5) {
#Override
public void onLoadMore(int currentPage) {
Timber.d("new Page " + currentPage);
recyclerView.post(() ->
{
itemAdapter.addModel(currentClassificationList);
if (currentPage > 2)
itemAdapter.removeModelRange(0, currentClassificationList.size());
});
}
What I do there is just add twice the classificationList to have enough space on the bottom to show the top of the list after the last element, and I keep adding the list to the bottom and removing from the top every time the recyclerview is about to reach the end of the list.
So my question is: How can I implement a really smoth scroll animation of the recyclerview? As I said this is being shown WITHOUT any user interaction, just on a screen where the classification is continuously being shown and scrolled.
UPDATE
After one comment suggestion I substituted the count timer by a TimeAnimator class this way:
timeAnimator.setTimeListener(new TimeAnimator.TimeListener() {
#Override
public void onTimeUpdate(TimeAnimator timeAnimator, long l, long l1) {
Timber.d("elapsed: " + l1);
recyclerView.scrollBy(0, (int)(l1/ mSpeed));
if (!recyclerView.canScrollVertically(1)) {
recyclerView.scrollToPosition(0);
}
}
});
Also I removed the post calls as they are not needed.
Now the smoothness has improved, but is not perfect, it still hessitate a bit when a new item is about to appear from the bottom.
I'm looking now to the itemadapter to improve any calculation made there and any image loading (I added Picasso for image loading also) But still it is not perfect, they are some flickering there.

How to fix shadow on scaled FloatingActionButton using support library 23

I have a FAB on a KitKat device using support library 23. I'm scaling the button for a transition effect (by containing it in a resizing view). This basically works apart from the shadow, which appears in a weird form (see the scaled red button in the screenshot, the blue button is full size).
What actually appears to happen is that the shadow is in 4 "corner" bitmaps that overlap to produce an odd effect.
Does anyone know how this can be fixed?
This looks interesting!
Unfortunately, I didn't succeed trying to reproduce the issue on - it'd be nice, if you can provide the code you run - but here's the code I wrote to animate&scale floating action button like this:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.animate().scaleX(0.1f).scaleY(0.1f).setDuration(100).setListener(
new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {}
#Override
public void onAnimationEnd(Animator animator) {
fab.setBackgroundTintList(getResources().getColorStateList(R.color.colorPrimary, getTheme()));
fab.setImageDrawable(getResources().getDrawable(R.drawable.common_full_open_on_phone, getTheme()));
fab.animate().scaleX(2).scaleY(2).setListener(null).setDuration(200).start();
}
#Override
public void onAnimationCancel(Animator animator) {}
#Override
public void onAnimationRepeat(Animator animator) {}
}).start();
Of course, particular animation speed and effects can be adjusted and improved.
I hope, it helps.
Use scale properties to resize your floating button. And shadow will be fine
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:scaleX="0.75"
android:scaleY="0.75"/>

Android - Scrollview start at the bottom

Is there anyway I can make a Scrollview start on bottom? I tried to:
post(new Runnable() {
#Override
public void run() {
fullScroll(ScrollView.FOCUS_DOWN);
}
});
And also setting the android:focusableInTouchMode="true" on the lowest element in the layout.
But I can see it scrolling to the bottom sometimes. The idea is to make it imperceptible to the user.
Thanks a lot.
try with scrollView.fullScroll(View.FOCUS_DOWN)
Try this
scrollView.scrollTo(0, scrollView.getBottom());
Since I was adding Views dynamically, I also had to allow Android to complete the layout on the content view inside the ScrollView. I just added a post at the end of the View's queue, that will run after it has completed its layout. Otherwise, Android was trying to use the old size of the content view, and wasn't scrolling all the way down.
mMessagesLayout.addView(messageLayout);
mMessagesLayout.requestLayout();
mMessagesLayout.post(new Runnable() {
#Override
public void run() {
mScrollView.scrollTo(0, mScrollView.getBottom());
}
});

Android smoothScrollToPosition up top

I have set up smoothScrollToPosition on a listview and it works perfect! However... I would rather it put the position at the top of the listview rather than just on the screen (mostly on the bottom if its needed to scroll down). Any ideas how i can accomplish this?
Use smoothScrollToPositionFromTop(). It places the item at the specified position a specified number of pixels from the top of the ListView (if possible). You should simply supply a small offset.
Note: requires API level 11+.
recycleviewlist.post(new Runnable() {
#Override
public void run() {
new CountDownTimer(totalScrollTime, scrollPeriod) {
public void onTick(long millisUntilFinished) {
recycleviewlist.smoothScrollBy( widthToScroll,0);
}
public void onFinish() {
// gridlayoutmanager
// recycleviewlist.scrollToPosition(0);
gridlayoutmanager1
.scrollToPosition(Integer.MAX_VALUE / 2);
}
}.start();
}
});

Android: Hiding a view off the top edge of the screen

Would it be possible to hide a view off the top edge of the screen, and only have it appear if the user scrolls upwards?
My first attempt used a scrollview, but it seems that scrollTo() doesn't work unless I used postDelayed (it doesn't even work with Post()). I tried adding it to the scrollview's view tree observer onPreDraw() event and it still doesn't work unless I delay it, so there is an ugly glitch when the activity is first launched.
The second issue is that if the onscreen keyboard is minimized, the view no longer needs to scroll so hiding things by using a scroll offset no longer works. I thought about manipulating the height in code, but this seems pretty hackish.
Is there a better way to do this than by using a scrollview? Alternatively, Does anyone have any tips on the best place to place the scrollTo (the end of onCreate does not work nor the other places I have tried) so I don't need to use postDelayed? That would at least eliminate one glitch.
Thanks!
This is the code I'm using right now, which is the least glitchy but I don't understand why it doesn't work until the third time onPreDraw() is called.
mScrollView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener()
{
#Override
public boolean onPreDraw()
{
final int fieldYStart = mFieldIWantAtTheTop.getTop();
if (mFieldIWantAtTheTopYStart != fieldYStart
|| mScrollView.getScrollY() < 10)
{
mFieldIWantAtTheTopYStart = fieldYStart;
mScrollView.post(new Runnable()
{
#Override
public void run()
{
Log.v("Testing", "scrolling!");
mScrollView.scrollTo(0, mFieldIWantAtTheTopYStart);
Log.v("Testing", "scroll is now=" + mScrollView.getScrollY());
}
});
}
return true;
}
});
I also tried using a custom scrollview as mentioned below, but this does not solve the issue of the graphical glitch:
#Override
public void onMeasure(int measureWidthSpec, int measureHeightSpec) {
super.onMeasure(measureWidthSpec, measureHeightSpec);
Log.v("Testing", "Scrolling");
post(
new Runnable()
{
public void run()
{
scrollTo(0, 100);
Log.v("Testing", "ScrollY = " + getScrollY());
}
});
}
This code works as does the onPreDraw() code above but there is still a glitch when the activity is launched because the activity is first drawn with the scroll at 0.
I haven't tried this, but you may want to create a custom ScrollView and override onMeasure:
ScrollView scroll = new ScrollView(this) {
#Override
public void onMeasure(int measureWidthSpec, int measureHeightSpec) {
super.onMeasure(measureWidthSpec, measureHeightSpec);
scrollTo(...);
}
};
It seems like this would be the earliest point that scrollTo would be valid.
Edit - I found this answer, which apparently worked for the asker. Is this the method you tried?

Categories

Resources