fixing horizontal recyclerview XML + stuck horizontal scrolling

Question

I have the following layout -

With the following 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:layout_margin="7dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:text="@string/fragment_marketplace_marketplace_title"
        android:textSize="25sp"
        android:paddingStart="14dp"
        android:paddingLeft="14dp"
        android:paddingEnd="14dp"
        android:textStyle="bold" />

    <SearchView
        android:id="@+id/fragment_marketplace_searchview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="14dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="14dp"
        android:queryHint="Search..."
        app:iconifiedByDefault="false"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="14dp"
        android:layout_marginLeft="14dp"
        android:layout_marginTop="15dp"
        android:text="@string/fragment_marketplace_discover_products_from_myverte"
        android:textSize="17sp"
        android:textStyle="bold" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/fragment_marketplace_brands_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="horizontal"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"
        tools:listitem="@layout/fragment_marketplace_vendor_row_item" />

    <android.support.v4.widget.NestedScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingStart="14dp"
                android:paddingLeft="14dp"
                android:paddingEnd="14dp"
                android:background="@color/very_light_grey"
                android:paddingTop="15dp"
                android:text="@string/fragment_marketplace_featured_products"
                android:textSize="17sp"
                android:textStyle="bold" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/fragment_marketplace_products_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:background="@color/very_light_grey"
                tools:listitem="@layout/fragment_marketplace_products_row_item" />

        </LinearLayout>

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




</LinearLayout>

with the following row item layout -

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="200dp"
    android:layout_height="130dp">

    <ImageView
        android:id="@+id/vendorImageview"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="0.8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="0.8" />


</android.support.constraint.ConstraintLayout>

The issue I am having is with the top recyclerview - brands recyclerview.

The needed result should look like this -

So what I am having trouble with are the following issues -

1) I need the images to be rounded corners, and for starting position to display a portion of the next view so it will make the feeling of a "list" and not a stale image. Can't figure out what to do.

2) The scrolling itself for the top recyclerview is really, really stuck. it is not fluid at all. What could be bothering the scrolling? it does scroll but in a very none-fluid way.

Here are my java code for initing the views & relevant adapter class -

private void initViews(View view) {
        gson = new Gson();
        miniVendorModelList = new ArrayList<>();
        miniProductModelList = new ArrayList<>();
        searchView = view.findViewById(R.id.fragment_marketplace_searchview);
        Drawable drawable = getResources().getDrawable(R.drawable.search_widget_very_light_grey_background);
        searchView.setBackground(drawable);

        //adapters
        vendorsAdapter = new VendorAdapter(miniVendorModelList);
        productsAdapter = new ProductsAdapter(miniProductModelList, getContext());

        //lists
        vendorsList = view.findViewById(R.id.fragment_marketplace_brands_recycler_view);
        productsList = view.findViewById(R.id.fragment_marketplace_products_recycler_view);
        vendorsList.setNestedScrollingEnabled(false);
        productsList.setNestedScrollingEnabled(false);

        //brands recycler
        vendorsList.setHasFixedSize(true);
        vendorsList.setLayoutManager(new LinearLayoutManager(getContext(),LinearLayoutManager.HORIZONTAL, false));
        vendorsList.setAdapter(vendorsAdapter);

        //products recycler
        productsList.setLayoutManager(new GridLayoutManager(getContext(), 2));
        productsList.setHasFixedSize(true);
        productsList.setAdapter(productsAdapter);

    }

public class VendorAdapter extends RecyclerView.Adapter<VendorsHolder> {

    private ArrayList<MiniVendorModel> miniVendorModels;

    public VendorAdapter(ArrayList<MiniVendorModel> miniVendorModels) {
        this.miniVendorModels = miniVendorModels;
    }

    @NonNull
    @Override
    public VendorsHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.fragment_marketplace_vendor_row_item, viewGroup, false);
        return new VendorsHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull VendorsHolder vendorsHolder, int i) {
        MiniVendorModel model = miniVendorModels.get(i);
        Picasso.get().load(model.getImageURL()).memoryPolicy(MemoryPolicy.NO_CACHE).into(vendorsHolder.vendorImageView);
    }

    @Override
    public int getItemCount() {
        return miniVendorModels.size();
    }
}

What am I missing with my XML files? I checked a different project where 2 recyclerviews live together at the same layout file and the scrolling for them work perfectly without any issues. Something specificly is wrong with my Vendors list.

here is a recording of my problem -

https://gph.is/g/EGRnXed

Answer 1

You should remove vendorsList.setNestedScrollingEnabled(false); this line as vendor list recyclerview is not part of nested scroll view in your layout

Answer 2

For rounded image, you can use RoundedBitmapDrawableFactory or check post here. In addition, change your row layout to fill up for example 80% of total width rather than match_constraints. For example something like: android:layout_constraintWidth_percent="0.8".

But for your slow scrolling, I think it may be because of your NO_CACHE policy for your Picasso. You practically saying not to use cache and load it every time from internet. You can try increasing RecyclerView cache size by setItemViewCacheSize(). In addition, here you can find some optimization by using customized cache policy for RecyclerView.