Develop Reference

Overdraw-optimize RecyclerView layouts

So I have a RecyclerView that has multiple view types that all have a different rendering background-wise. Naturally I want to avoid overdraw for all these components, so I give my RecyclerView and all views up in the hierarchy no background at all.
This works fine as is - until I start animating items in and out. The DefaultItemAnimator of course nicely blends items in and out and therefor opens a "hole" in the RecyclerView where the background of it shortly becomes visible.
Ok, I thought, lets try something - let's give the RecyclerView only a background when animations are actually running, but otherwise remove the background, so scrolling works smoothly at high FPS rates. However, this is actually harder than I originally thought, since there is no specific "animations will start" and corresponding "animations will end" signal in RecyclerView nor the ItemAnimator or related classes.
What I recently tried was to combine an AdapterDataObserver with an ItemAnimatorFinishedListener like this, but without success:
RecyclerView.ItemAnimator.ItemAnimatorFinishedListener finishListener =
new RecyclerView.ItemAnimator.ItemAnimatorFinishedListener() {
#Override
public void onAnimationsFinished() {
recycler.setBackgroundResource(0);
}
};
recycler.getAdapter().registerAdapterDataObserver(
new RecyclerView.AdapterDataObserver() {
#Override
public void onItemRangeInserted(int positionStart, int itemCount) {
start();
}
#Override
public void onItemRangeRemoved(int positionStart, int itemCount) {
start();
}
#Override
public void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) {
start();
}
private void start() {
recycler.setBackgroundResource(R.color.white);
if (!recycler.getItemAnimator().isRunning()) {
return;
}
recycler.getItemAnimator().isRunning(finishListener);
}
}
);
The issue here is that the adapter's range callbacks are ran way earlier than the actual animations run, because the animations will not be scheduled before the next requestLayout() happens internally in the RecyclerView, i.e. recycler.getItemAnimator().isRunning() in my start() method always returns false, so the white background is never removed.
So before I start experimenting with an additional ViewTreeObserver.OnGlobalLayoutListener and bring that into the mix - has anybody found a proper, working (easier?!) solution to this problem?

Ok, I went further down the road and included a ViewTreeObserver.OnGlobalLayoutListener - this seems to be working:
/**
* This is a utility class that monitors a {#link RecyclerView} for changes and temporarily
* gives the view a background so we do not see any artifacts while items are animated in or
* out of the view, and, at the same time prevent the overdraw that would occur when we'd
* give the {#link RecyclerView} a permanent opaque background color.
* <p>
* Created by Thomas Keller <me#thomaskeller.biz> on 12.05.16.
*/
public class RecyclerBackgroundSaver {
private RecyclerView mRecyclerView;
#ColorRes
private int mBackgroundColor;
private boolean mAdapterChanged = false;
private ViewTreeObserver.OnGlobalLayoutListener mGlobalLayoutListener
= new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// ignore layout changes until something actually changed in the adapter
if (!mAdapterChanged) {
return;
}
mRecyclerView.setBackgroundResource(mBackgroundColor);
// if no animation is running (which should actually only be the case if
// we change the adapter without animating anything, like complete dataset changes),
// do not do anything either
if (!mRecyclerView.getItemAnimator().isRunning()) {
return;
}
// remove this view tree observer, i.e. do not react on further layout changes for
// one and the same dataset change and give control to the ItemAnimatorFinishedListener
mRecyclerView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
mRecyclerView.getItemAnimator().isRunning(finishListener);
}
};
RecyclerView.ItemAnimator.ItemAnimatorFinishedListener finishListener
= new RecyclerView.ItemAnimator.ItemAnimatorFinishedListener() {
#Override
public void onAnimationsFinished() {
// the animation ended, reset the adapter changed flag so the next change kicks off
// the cycle again and add the layout change listener back
mRecyclerView.setBackgroundResource(0);
mAdapterChanged = false;
mRecyclerView.getViewTreeObserver().addOnGlobalLayoutListener(mGlobalLayoutListener);
}
};
RecyclerView.AdapterDataObserver mAdapterDataObserver = new RecyclerView.AdapterDataObserver() {
#Override
public void onItemRangeInserted(int positionStart, int itemCount) {
mAdapterChanged = true;
}
#Override
public void onItemRangeRemoved(int positionStart, int itemCount) {
mAdapterChanged = true;
}
#Override
public void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) {
mAdapterChanged = true;
}
};
public RecyclerBackgroundSaver(RecyclerView recyclerView, #ColorRes int backgroundColor) {
mRecyclerView = recyclerView;
mBackgroundColor = backgroundColor;
}
/**
* Enables the background saver, i.e for the next item change, the RecyclerView's background
* will be temporarily set to the configured background color.
*/
public void enable() {
checkNotNull(mRecyclerView.getAdapter(), "RecyclerView has no adapter set, yet");
mRecyclerView.getAdapter().registerAdapterDataObserver(mAdapterDataObserver);
mRecyclerView.getViewTreeObserver().addOnGlobalLayoutListener(mGlobalLayoutListener);
}
/**
* Disables the background saver, i.e. for the next animation,
* the RecyclerView's parent background will again shine through.
*/
public void disable() {
mRecyclerView.getViewTreeObserver().removeOnGlobalLayoutListener(mGlobalLayoutListener);
if (mRecyclerView.getAdapter() != null) {
mRecyclerView.getAdapter().unregisterAdapterDataObserver(mAdapterDataObserver);
}
}
}

Scale up Item in RecyclerView to overlaps 2 adjacent items Android

I'm using RecyclerView with GridLayoutManager. The goal I want to achieve is when I click on an item, It'll scale up and overlaps the adjacent items. Just like the picture below (in Android TV)
When the onClick event is triggered, I call
v.animate().scaleX(1.2f).scaleY(1.2f).setDuration(500).start();
But the result is below:
It can overlaps only items that has position lower than itself.
What should I do to overlaps all of the adjacent items. Thanks in advance.
EDIT
I already tried:
v.bringToFront();
or
(v.getParent()).bringChildToFront(v);
But both of them don't work.

According aga's answer, i use ViewCompat.setElevation(View view, float elevation) to support API prior to 21, It works like a charming.
static class ViewHolder extends RecyclerView.ViewHolder {
public ViewHolder(View root) {
// bind views
// ...
// bind focus listener
root.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
// run scale animation and make it bigger
ViewCompat.setElevation(root, 1);
} else {
// run scale animation and make it smaller
ViewCompat.setElevation(root, 0);
}
}
});
}
}
The item layout file is very simple like below:
<?xml version="1.0" encoding="utf-8"?>
<TextView
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:focusable="true"
android:focusableInTouchMode="true"
android:background="#drawable/sl_live_item" />

1.Override the getChildDrawingOrder method.
#Override
protected int getChildDrawingOrder(int childCount, int i) {
View view = getLayoutManager().getFocusedChild();
if (null == view) {
return super.getChildDrawingOrder(childCount, i);
}
int position = indexOfChild(view);
if (position < 0) {
return super.getChildDrawingOrder(childCount, i);
}
if (i == childCount - 1) {
return position;
}
if (i == position) {
return childCount - 1;
}
return super.getChildDrawingOrder(childCount, i);
}
2.RecyclerView setChildrenDrawingOrderEnabled is true.
setChildrenDrawingOrderEnabled(true);
3.When item view has focus, invalidate its parent.
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
v.setScaleX(1.5f);
v.setScaleY(1.5f);
mRecyclerView.invalidate();
} else {
v.setScaleX(1.0f);
v.setScaleY(1.0f);
}
}

Try to invoke v.bringToFront() before running the animation.
If it doesn't work another variant is to use View#setElevation(float val) where val > 0. The drawback is that you'll need to set elevation back to 0 when you're deselecting the item.

val zoom = resources.getFraction(...) // Your zoom fraction in %
override fun onFocusChanged(gainFocus: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
super.onFocusChanged(gainFocus, direction, previouslyFocusedRect)
val viewPropertyAnimator: ViewPropertyAnimator
val f: Float
if(gainFocus) {
tvAppName.visibility = VISIBLE
f = this.zoom;
viewPropertyAnimator = animate().z(2.0f).scaleX(this.zoom);
} else {
tvAppName.visibility = INVISIBLE
ivAppIcon.strokeWidth = 0f
f = 1.0f;
viewPropertyAnimator = animate().z(0.0f).scaleX(1.0f);
}
viewPropertyAnimator.scaleY(f).duration = 150;
}
You can add this sample code to any layout to achieve desired effect.

You need to do it the old way you do with normal ViewGroups, overriding the draw order of children. This example forces the first view to always be drawn last - you need to customize for your use case.
public TopForcingRecyclerView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setChildrenDrawingOrderEnabled(true);
}
#Override protected int getChildDrawingOrder(int childCount, int i) {
if (i >= childCount - 1) return 0;
//when asked for the last view to draw, answer ZERO
else return i + 1;
//when asked for the i-th view to draw, answer "the next one"
}
Pay attention to off by one errors.

Using invalidate() , java.lang.NullPointerexception

I am currently working on a Connect four game
I have managed to develop the app to point to where the game knows what column the user has selected. I am currently trying to change the colour of the gap to the respective colour of the user (token has been placed).
The problem I am having is when connectfourView.invalidate() is called I get a java.lang.NullPointerexception
Code below
public void tokenPlacement (int index, float xpos) {
int x = 0;
int lowerxpos = (int) (xpos - 10);
int higherxpos = (int) (xpos + 10);
while (x <= 6)
{
if ( lowerxpos <= ((float) (columnselects.get(x).getWidthPos())) && higherxpos >= ((float) (columnselects.get(x).getWidthPos())))
{
Log.d("In IF", Float.toString(x));
Log.d("Looking at the colour", Float.toString(gaps.get(x).getColor()));
gaps.get(x).setColor(-1);
Log.d("After change what is the colour now", Float.toString(gaps.get(x).getColor()));
connectfourView.invalidate();
break;
}
x++;
}
}
About the code. Firstly I know this will only affect the bottom layer of each column's gaps. I will fix this when the colour changing is working. This code is from Gaps.java. This view is ConnectFourView.java (instance connectfourView) where the gaps are drawn to screen. All gaps are stored in a list (gaps) and are defined in the Gap.java (x-postion, colour etc.)
Section from Gap.java
public Gap (int j, int i, int color, double diameter, double widthpos, double heightpos){
this.j = j;
this.i = i;
this.color = color;
this.diameter = diameter;
this.widthpos = widthpos;
this.heightpos = heightpos;
}
public int getJ() {return j;}
public int getI() {return i;}
public int getColor() {return color;}
public void setColor(int newColor) {this.color = newColor;}
public double getDiameter() {return diameter;}
public double getWidthPos() {return widthpos;}
public double getHeightPos() {return heightpos;}
}
This is a question I asked to get to this point
Note that the gaps are added with a button press 'New Game'
If any other information or code is need please leave a comment
Added for dmon:
This is where connectfourView is defined, it has also been imported
public class Gaps {
ConnectFourView connectfourView;
/* Other code, not related to question */
public void tokenplacement()//at bottom of class Gaps
I have noticed that when a click the exit button on the screen all the gaps do change color just before the main menu is loaded, so the problem is just trying to refresh the screen
From ConnectFourView.java
public ConnectFourView(Context context, Gaps gaps) {
super(context);
this.gaps = gaps;
setFocusable(true);
}
//used to mange the attributes of the board (different colour to background for board)
public ConnectFourView(Context context, AttributeSet attrs, Gaps gaps) {
super(context, attrs);
this.gaps = gaps;
setFocusable(true);
setMinimumWidth(getWidth());
setMinimumHeight(getHeight());
}
link to dropbox

As others have said (I gave Henry the bump), connectfourView has to be null there. You need to initialize it:
ConnectFourView connectfourView = new ConnectFourView();
I don't see where that is ever done so it's likely set to null by default.

programmatically darken a View android

I found how to change the opacity of a View, but I need to actually darken a View. My best idea is to put a transparent black rectangle over it and then slowly increase the opacity of the rectangle.
Do you know a nicer way to do it?
public class Page07AnimationView extends ParentPageAnimationView {
private final String TAG = this.getClass().getSimpleName();
private ImageView overlay;
private int mAlpha = 0;
public Page07AnimationView(Context context) {
super(context);
}
public Page07AnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
}
protected void init()
{
overlay = new ImageView(mContext);
overlay.setImageResource(R.drawable.black_background);
overlay.setAlpha(0);
overlay.setWillNotDraw(false);
// make the PageAniSurfaceView focusable so it can handle events
setFocusable(true);
}
protected void draw_bitmaps(Canvas canvas)
{
overlay.draw(canvas);
update_bitmaps();
invalidate();
}
public void update_bitmaps()
{
if(mAlpha < 250)
{
mAlpha += 10;
overlay.setAlpha(mAlpha);
}
}
}
The code above isn't doing what I had hoped. Page07AnimationView is added to a FrameLayout over the view I need to darken. R.drawable.black_background points to a 787px x 492px black png image.
I added overlay.setWillNotDraw(false); but it didn't help.
I changed the first setAlpha(0) to setAlpha(255) but that didn't help.
I removed the setAlpha() calls altogether, but it didn't help.
This basic technique of adding a PageNNAnimationView has been working to draw Bitmaps, but not to draw ImageView overlay. (I would use Bitmaps, but they don't seem to have an alpha component.)
Edit2: this is the parent of the class above:
public class ParentPageAnimationView extends View {
private final String TAG = this.getClass().getSimpleName();
protected Context mContext;
public ParentPageAnimationView(Context context) {
super(context);
mContext = context;
init();
}
public ParentPageAnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
init();
}
protected void init()
{
}
protected void draw_bitmaps(Canvas canvas)
{
// will be overridden by child classes
}
#Override
protected void onDraw(Canvas canvas) {
if(this.getVisibility() == View.VISIBLE)
{
if(canvas != null)
{
draw_bitmaps(canvas);
}
}
}
public void update_bitmaps()
{
// will be overridden by child classes
}
public void elementStarted(PageElement _pageElement) {
// Nothing in parent class
}
public void elementFinished(PageElement mElement) {
// Nothing in parent class
}
}

In case of an ImageView, here's one way to achieve it:
imageView.setColorFilter(Color.rgb(123, 123, 123), android.graphics.PorterDuff.Mode.MULTIPLY);

I would rather do it in the opposite way - put a dark rectangle behind the view and set the view's opacity. This saves painting the rectangle when the view is 100% opaque.

I would do something like this:
view.getBackground().setColorFilter(color, PorterDuff.Mode.DARKEN);
Use black color with some alpha like 0x7f000000 for a typical darkening.
It's more concise and you can also darken the View with animation or scrolling event for example. Just set Color.argb(alpha, 0, 0, 0) as the color and animate alpha, or change it based on the scrolling offset.

This is how I ended up doing it. The key was to use a Paint with its alpha set to whatever I wanted.
public class Page07AnimationView extends ParentPageAnimationView {
private final String TAG = this.getClass().getSimpleName();
private Bitmap bitmap;
private BitmapDrawable drawable;
private ImageView overlay;
private int which = -1;
private long last_time;
private Page07State state;
private int mAlpha;
private int maxAlpha;
private Paint mPaint;
private int _alpha_step;
private int minAlpha;
public enum Page07State {
WAITING, DARKENING, DARKENED
}
public Page07AnimationView(Context context) {
super(context);
}
public Page07AnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
}
protected void init()
{
minAlpha = 0;
mAlpha = minAlpha;
_alpha_step = 5;
maxAlpha = 255;
mPaint = new Paint();
mPaint.setAlpha(minAlpha);
state = Page07State.WAITING;
overlay = new ImageView(mContext);
overlay.setImageResource(R.drawable.black_background);
drawable = (BitmapDrawable) overlay.getDrawable();
bitmap = drawable.getBitmap();
last_time = 0;
}
protected void draw_bitmaps(Canvas canvas)
{
if(state != Page07State.WAITING)
{
DebugLog.d(TAG, "drawing " + Integer.toString(which));
canvas.drawBitmap(bitmap, 0, 0, mPaint);
}
update_bitmaps();
invalidate();
}
public void update_bitmaps()
{
if(state == Page07State.DARKENING)
{
if(mAlpha < maxAlpha)
{
if(System.currentTimeMillis() > last_time + 12)
{
last_time = System.currentTimeMillis();
mAlpha += _alpha_step;
mPaint.setAlpha(mAlpha);
}
}
else
{
state = Page07State.DARKENED;
}
}
}
public void runAnimation()
{
state = Page07State.DARKENING;
}
}

Adding to android developer's answer:
imageView.setColorFilter(Color.rgb(123, 123, 123), android.graphics.PorterDuff.Mode.MULTIPLY);
you can setColorFilter on any view like this:
GradientDrawable gd = (GradientDrawable) textView.getBackground();
gd.setColor(color); //you can also set BG color to a textview like this
gd.setColorFilter(Color.rgb(123, 123, 123), android.graphics.PorterDuff.Mode.MULTIPLY);

you could try using the Alpha animation like this (perhaps on the rectangle):
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(350);
That would cause the rectangle to gradually become opaque over 350 seconds...

Android actually exposes a drawable which can be used to darken views. You can easily attach it to any view with an Overlay.
Here are two extension functions which can be used to darken any view.
fun View.darken() {
val darkOverlay = ResourcesCompat.getDrawable(
resources,
android.R.drawable.screen_background_dark_transparent,
context.theme
)!!.mutate() // We mutate the drawable so we can later implement a fade in/out animation and animate the Drawable's alpha property. Since Drawables share their state we need to mutate otherwise we would impact all instances of this drawable
darkOverlay.setBounds(0, 0, width, height)
setTag(R.id.dark_overlay, darkOverlay)
overlay.add(darkOverlay)
}
fun View.lighten() {
(getTag(R.id.dark_overlay) as? Drawable)?.let {
overlay.remove(it)
setTag(R.id.dark_overlay, null)
}
}
Make sure you add the id to ids.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="dark_overlay" type="id" />
</resources>
And if you're darkening your application's root layout and would like to darken the NavigationBar as well, you might need to add the the following to your theme in styles.xml
<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- required for api 29 otherwise the system will set a white background color to the NavigationBar to ensure the buttons are visible -->
<item name="android:enforceNavigationBarContrast">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

You should check iPaulPro's answer in this question. You will need to extend ImageView and override the onDraw() method.
Depending on what you are going to do, Alexandru Cristescu's answer is also valid but you should
call setFillAter(true) for the animation to persist after finished.

How to create a view similar to the system notification area in android?

I'd like to have a view in my activity, which initially stays at the top of the screen like a little bar, but when you tap on it it should expand down, like the system notification area.
I haven't found any standard controls with such behaviour. What's the best way to implement this?

Use a SlidingDrawer. Here is a good tutorial.

The SlidingDrawer works exactly in this way.

The problem is that the SlidingDrawer can't be positioned at the top of the screen — it opens only upwards (see related question). So I implemented a simple control of my own, using the TranslateAnimation
class MySlidingDrawer extends LinearLayout {
public static final int STATE_OPENED = 0;
public static final int STATE_CLOSED = 1;
private int m_intState;
private LinearLayout m_content;
private ImageButton m_handle;
public MySlidingDrawer(Context context) {
super(context);
setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
setOrientation(VERTICAL);
setGravity(Gravity.CENTER);
m_content = new LinearLayout(context);
// add your content here
addView(m_content);
m_intState = STATE_CLOSED;
m_handle = new ImageButton(context);
m_handle.setImageResource(R.drawable.icon);
m_handle.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
toggleState();
}
});
m_handle.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
addView(m_handle);
}
private int getContentHeight() {
return m_content.getHeight();
}
private void toggleState() {
int intYStart = 0;
int intYEnd = m_intState == STATE_OPENED ? -getContentHeight() : getContentHeight();
Animation a = new TranslateAnimation(0.0f, 0.0f, intYStart, intYEnd);
a.setDuration(1000);
a.setStartOffset(300);
a.setInterpolator(AnimationUtils.loadInterpolator(getContext(), android.R.anim.bounce_interpolator));
startAnimation(a);
m_intState = m_intState == STATE_OPENED ? STATE_CLOSED : STATE_OPENED;
}
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
offsetTopAndBottom(-getContentHeight()); // content is initially invisible
}
protected void onAnimationEnd() {
super.onAnimationEnd();
int intYOffset = m_intState == STATE_OPENED ? getContentHeight() : -getContentHeight();
offsetTopAndBottom(intYOffset);
}
}

You can use the code posted in this answer: Android SlidingDrawer from top?
The provided solution features setting the orientation of the Slidingdrawer in xml also it's simple requiring only 1 class and some additions in attrs.xml and stable since it's derived from Androids Slidingdrawer from SDK. I also discuss why I didn't choose other popular libs/solutions found on the internet/SO.
Quicklink to the gist: MultipleOrientationSlidingDrawer (source & example) # gist