Low performance in RecyclerView with ConstraintLayout, within a ViewPager on Android

1

I have a RecyclerView with about 20 items. It takes quite a while to render and blocks the UI.

I'm using ConstraintLayout to position items on each line. They are nothing complex as you can see in the preview.

I also have a ViewPager for main navigation (see bottom bar). In each Fragment there is also a ViewPager. This ViewPager is where the RecyclerView is located (within a NestedScrollView).

Additionally I have a listener for the NestedScrollView scroll to do a parallax effect on the header.

I would like to point out that if you remove some items and leave RecyclerView with only 3 items, it gets much faster. So it seems to be a problem with the RecyclerView lines.

I also tested and replaced the ConstraintLayout of each line with a fixed height FrameLayout - Performance did not improve

I'm also using Iconics (for font icon) and Calligraphy (for custom typography) - Is this affecting performance?

Preview:

Attention to the touch circle when I try to scroll immediately after switching to the first page - the UI is locked. It is also noticeable that when you switch to the second page, the slide animation occurs, but when you try to switch to the first page, the animation locks up and the list

Itemofeachline(history_item.xml):

<?xmlversion="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/container"
        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="76dp"
        android:clickable="true">

        <TextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:textSize="11sp"
            android:textAllCaps="true"
            android:textColor="@color/black"
            android:text="12 JUN"
            android:layout_marginTop="@dimen/margin_xs"
            android:layout_marginLeft="@dimen/margin_small"/>

        <com.mikepenz.iconics.view.IconicsTextView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/date"
            app:layout_constraintLeft_toLeftOf="@id/date"
            app:layout_constraintRight_toLeftOf="@+id/kms"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:text="{evz_workout_running}"
            android:textColor="@color/colorPrimary"
            android:textSize="22sp"
            android:gravity="left" />




        <TextView
            android:id="@+id/kms"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toRightOf="@id/icon"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/icon_time"
            app:layout_constraintHorizontal_chainStyle="spread"
            android:layout_marginTop="@dimen/margin_xs"
            android:textSize="34sp"
            android:textColor="@color/black"
            android:textAppearance="@style/textStyleBlack"
            android:text="325,4"
            android:translationY="-12dp" />

        <TextView
            android:id="@+id/kms_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="@id/kms"
            app:layout_constraintRight_toRightOf="@id/kms"
            android:layout_marginTop="32dp"
            android:textSize="9sp"
            android:textColor="@color/black"
            android:text="KMS"
            android:textAppearance="@style/textStyleBold"/>




        <com.mikepenz.iconics.view.IconicsTextView
            android:id="@+id/icon_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toRightOf="@id/kms"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/icon_speed"
            android:layout_marginTop="@dimen/margin_xs"
            android:layout_marginLeft="@dimen/margin_medium"
            android:layout_marginRight="@dimen/margin_medium"
            app:layout_constraintHorizontal_chainStyle="spread"
            android:text="{evz_config_duration}"
            android:textColor="@color/gray"
            android:textSize="26sp" />

        <TextView
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/icon_time"
            app:layout_constraintLeft_toLeftOf="@id/icon_time"
            app:layout_constraintRight_toRightOf="@id/icon_time"
            android:layout_marginTop="5dp"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:textAppearance="@style/textStyleBold"
            android:text="00:00:07"/>



        <com.mikepenz.iconics.view.IconicsTextView
            android:id="@+id/icon_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="@id/icon_time"
            app:layout_constraintLeft_toRightOf="@id/icon_time"
            app:layout_constraintRight_toLeftOf="@+id/icon_points"
            app:layout_constraintHorizontal_chainStyle="spread"
            android:paddingTop="2sp"
            android:paddingBottom="2sp"
            android:text="{evz_rate}"
            android:textColor="@color/gray"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/icon_speed"
            app:layout_constraintLeft_toLeftOf="@id/icon_speed"
            app:layout_constraintRight_toRightOf="@id/icon_speed"
            android:layout_marginTop="5dp"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:textAppearance="@style/textStyleBold"
            android:text="00'00''"/>


        <com.mikepenz.iconics.view.IconicsTextView
            android:id="@+id/icon_points"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="@id/icon_time"
            app:layout_constraintLeft_toRightOf="@id/icon_speed"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginRight="@dimen/margin_small"
            android:paddingTop="2dp"
            android:paddingBottom="2dp"
            android:text="{evz_star}"
            android:textColor="@color/gray"
            android:textSize="22sp"/>

        <TextView
            android:id="@+id/points"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/icon_points"
            app:layout_constraintLeft_toLeftOf="@id/icon_points"
            app:layout_constraintRight_toRightOf="@id/icon_points"
            android:layout_marginTop="5dp"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:textAppearance="@style/textStyleBold"
            android:text="3500"/>

        <Button
            android:id="@+id/undo_button"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_margin="0dp"
            android:layout_gravity="end|center_vertical"
            android:background="@color/red"
            android:textColor="@color/white"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:textAppearance="@style/textStyleBold"
            android:textAllCaps="true"
            android:text="Anular"
            android:textSize="18sp"
            android:visibility="gone"
            />

</android.support.constraint.ConstraintLayout>

Fragment that has RecyclerView (pager_fragment.xml):

<?xml version="1.0" encoding="utf-8"?>
    <merge
        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="wrap_content">

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/sub_scroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingTop="210dp">

                <pt.sportzone.everyzone.ui.DynamicViewPager
                    android:id="@+id/sub_pager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

            </LinearLayout>


        </android.support.v4.widget.NestedScrollView>

        <android.support.constraint.ConstraintLayout
            android:id="@+id/sub_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            ...


        </android.support.constraint.ConstraintLayout>

</merge>

The Fragment class that has ViewPager (PagerFragment.java):

public class PagerFragment extends Fragment implements IPagerFragment, ViewPager.OnPageChangeListener, View.OnClickListener {

    ...

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setHasOptionsMenu(true);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        // Get elements from Layout
        mPager = (DynamicViewPager) view.findViewById(R.id.sub_pager);

        if (mButton1 != null && mButton2 != null && mButton3 != null) {

...

            if (mHeader != null) {
                // Listen to when tree is ready so we can setup parallax
                mHeader.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        mHeader.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                        setupParallax();
                    }
                });
            }
        }


        if (mPager != null) mPager.setCurrentItem(0);
        activate();
    }

    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        if (!isVisibleToUser) activated = false;
        active = isVisibleToUser;
    }

    protected void activate() {
        if (active && getView() != null && getActivity() != null && !activated) {
            activated = true;
        }
    }


    @Override
    public void onPageSelected(int position) {
        if (mPager == null) return;

        //Log.d(EZ.TAG, "Page Selected: " + position);
        FragmentPagerAdapter adapter = (FragmentPagerAdapter) mPager.getAdapter();
        targetPosition = position;
        IPagerFragment fragmentAppear = (IPagerFragment) adapter.getItem(targetPosition);
        IPagerFragment fragmentDisappear = (IPagerFragment) adapter.getItem(currentPosition);
        fragmentDisappear.willDisappear(targetPosition);
        fragmentAppear.willAppear(currentPosition);

        mButton1.setSelected(false);
        mButton2.setSelected(false);
        mButton3.setSelected(false);

        switch (position) {
            case 0:
                mButton1.setSelected(true);
                break;
            case 1:
                mButton2.setSelected(true);
                break;
            case 2:
                mButton3.setSelected(true);
                break;
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (mPager == null) return;

        //Log.d(EZ.TAG, position + " - " + positionOffset + " - " + positionOffsetPixels);
        FragmentPagerAdapter adapter = (FragmentPagerAdapter) mPager.getAdapter();
        //currentPosition = position;
        if (position == targetPosition && positionOffsetPixels == 0) {
            IPagerFragment fragmentAppear = (IPagerFragment) adapter.getItem(targetPosition);
            IPagerFragment fragmentDisappear = (IPagerFragment) adapter.getItem(currentPosition);
            currentPosition = targetPosition;
            fragmentDisappear.didDisappear();
            fragmentAppear.didAppear();
        }
    }


    @Override
    public void onPageScrollStateChanged(int state) {
    }

    public void setupParallax() {

        // Listen for scroll events
        if (scrollChangedListener == null) {

            // Get initial data
            initialWidth = mBackground.getWidth();
            initialHeight = mBackground.getHeight();
            initialRatio = initialHeight / initialWidth;
            curveInitialHeight = mCurve.getHeight();

            if (mScroll != null && collapseHeader) {
                mScroll.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
                    @Override
                    public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                        doParallax(v, scrollX, scrollY, oldScrollX, oldScrollY);
                    }
                });
            }

            UI.flattenConstraintRatio(mBackground);
            UI.flattenConstraintRatio(mBackgroundSpacer);
            UI.flattenConstraintRatio(mCurve);

            mCurve.setScaleType(ImageView.ScaleType.FIT_XY);

            // Run first parallax iteration
            doParallax(mScroll, 0, 0, 0, 0);

        }
    }

    public void doParallax(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

        // No height, something's wrong, just go away
        if (initialHeight == 0) return;

        // Get the percentage of scroll till hitting the max scroll target (initial Height)
        float percent = (float)scrollY / curveInitialHeight;

        float percentLeft = 1 - percent;

        if (percent < 0) percent = 0;
        if (percent > 1) percent = 1;

        float percentFast = Math.min(percent * 1.4f, 1);
        float percentLeftFast = 1 - percentFast;

        // Adjust the profile background image
        int headerHeight = Math.max((int)initialHeight - (int)(percent * curveInitialHeight), (int)initialHeight - (int)curveInitialHeight); // 24 -> status bar, 53 -> action bar
        UI.setConstraintHeight(mBackground, headerHeight);
        int curveHeight = Math.max((int)(percentLeft * curveInitialHeight), 0);
        UI.setConstraintHeight(mCurve, curveHeight);


        if (mButton1 != null) {
            mButton1.getButtonLabel().setAlpha(percentLeft);
            mButton2.getButtonLabel().setAlpha(percentLeft);
            mButton3.getButtonLabel().setAlpha(percentLeft);
        }

        // Adjust Elements alpha
        //mBackground.getDrawable().setAlpha((int)(percentLeftFast * 255));
        //mGradient.setAlpha(percentLeft);

    }

And the Adapter (HistoryAdapter.java):

public class HistoryAdapter extends RecyclerView.Adapter<HistoryAdapter.ViewHolder> {

private static final int PENDING_REMOVAL_TIMEOUT = 3000; // 3sec

private Fragment fragment;

List<Music> items;
List<Music> itemsPendingRemoval;
boolean undoOn;

private Handler handler = new Handler(); // hanlder for running delayed runnables
HashMap<Music, Runnable> pendingRunnables = new HashMap<>(); // map of items to pending runnables, so we can cancel a removal if need be

public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

    Music track;

    public TextView mDate;
    public IconicsTextView mIcon;
    public TextView mKms;
    public IconicsTextView mIconTime;
    public TextView mTime;
    public IconicsTextView mIconSpeed;
    public TextView mSpeed;
    public IconicsTextView mIconPoints;
    public TextView mPoints;
    public ConstraintLayout mContainer;
    public Button mUndo;

    OnHistoryItemClickedListener mListener;

    public ViewHolder(Fragment fragment, View holder) {
        super(holder);

        // Force interface implementation
        if (fragment instanceof OnHistoryItemClickedListener) {
            mListener = (OnHistoryItemClickedListener) fragment;
        } else {
            throw new RuntimeException(fragment.toString()
                    + " must implement OnHistoryItemClickedListener");
        }
        mContainer = (ConstraintLayout) holder.findViewById(R.id.container);
        mDate = (TextView) holder.findViewById(R.id.date);
        mIcon = (IconicsTextView) holder.findViewById(R.id.icon);
        mKms = (TextView) holder.findViewById(R.id.kms);
        mIconTime = (IconicsTextView) holder.findViewById(R.id.icon_time);
        mTime = (TextView) holder.findViewById(R.id.time);
        mIconSpeed = (IconicsTextView) holder.findViewById(R.id.icon_speed);
        mSpeed = (TextView) holder.findViewById(R.id.speed);
        mIconPoints = (IconicsTextView) holder.findViewById(R.id.icon_points);
        mPoints = (TextView) holder.findViewById(R.id.points);

        mUndo = (Button) holder.findViewById(R.id.undo_button);

        mContainer.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == mContainer) {
            mListener.onHistoryItemClicked(this.getLayoutPosition(), track);
        }
    }

}

public interface OnHistoryItemClickedListener {
    void onHistoryItemClicked(int position, Music music);
    void onHistoryItemRemoved(int position, Music music);
}

public HistoryAdapter(Fragment fragment, List<Music> items) {
    this.fragment = fragment;
    this.items = items;
    this.itemsPendingRemoval = new ArrayList<>();
}

@Override
public HistoryAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    LayoutInflater inflater = (LayoutInflater) fragment.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View track = inflater.inflate(R.layout.history_item, parent, false);
    return new HistoryAdapter.ViewHolder(fragment, track);
}

@Override
public void onBindViewHolder(HistoryAdapter.ViewHolder holder, int position) {
    final Music item = items.get(position);

    if (itemsPendingRemoval.contains(item)) {
        // we need to show the "undo" state of the row
        holder.itemView.setBackgroundColor(Color.RED);
        //holder.titleTextView.setVisibility(View.GONE);
        holder.mUndo.setVisibility(View.VISIBLE);
        holder.mUndo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // user wants to undo the removal, let's cancel the pending task
                Runnable pendingRemovalRunnable = pendingRunnables.get(item);
                pendingRunnables.remove(item);
                if (pendingRemovalRunnable != null) handler.removeCallbacks(pendingRemovalRunnable);
                itemsPendingRemoval.remove(item);
                // this will rebind the row in "normal" state
                notifyItemChanged(items.indexOf(item));
            }
        });
    } else {
        // we need to show the "normal" state
        holder.itemView.setBackgroundColor(Color.WHITE);
        //holder.titleTextView.setVisibility(View.VISIBLE);
        //holder.titleTextView.setText(item);
        holder.mUndo.setVisibility(View.GONE);
        holder.mUndo.setOnClickListener(null);
    }

    holder.track = item;

    if (position == getItemCount() - 1) {
        holder.mContainer.setBackground(ContextCompat.getDrawable(fragment.getContext(), R.drawable.row_with_arrow_no_border));
    } else {
        holder.mContainer.setBackground(ContextCompat.getDrawable(fragment.getContext(), R.drawable.row_with_arrow));
    }
}

...
    
asked by anonymous 28.08.2017 / 16:11

0 answers