Recyclerview enviezada(diagonal) - android

Question

I need to create a recyclerview, on android, whose items are uploaded, as per the image

i tried to use a Shape on the background image but there is click problem. When I use Hape, clicking on the corners takes the wrong position and that’s a problem. For IOS there is a library that does exactly that, but for android I did not find anything that solves both the layout and the click issue.

Does anyone know any solution?

Follows the implemented codes (without skewed)

Fragment Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:id="@+id/TipRecyclerView">

    </android.support.v7.widget.RecyclerView>
</RelativeLayout>

Item Recyclerview

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="231.5dp"
    android:id="@+id/tipRow">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/tipBackground"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/temeContent"
        android:layout_marginLeft="14.5dp"
        android:layout_marginTop="22dp"
        android:gravity="center_vertical"
        android:orientation="vertical"
        android:radius="22.5dp"
        android:background="#6600738c">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtTipTeme"
            android:textColor="#ffffff"
            android:text="Tema"
            android:textSize="12sp"
            android:layout_centerHorizontal="true"
            fontPath="fonts/RobotoRegular.ttf"
            tools:ignore="MissingPrefix"
            android:textAllCaps="true"
            android:paddingTop="7dp"
            android:paddingBottom="7dp"
            android:paddingLeft="11.5dp"
            android:paddingRight="11.5dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="17.9dp"
        android:layout_marginTop="139.8dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtTipTitle"
            android:text="Rede de Apoio"
            android:textColor="#ffffff"
            android:textAllCaps="true"
            android:textSize="30.4sp"
            fontPath="fonts/BebasNeueBook.otf"
            tools:ignore="MissingPrefix"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="189dp"
        android:layout_marginLeft="17dp"
        android:layout_marginBottom="23.6dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtTipAutor"
            android:text="autor"
            android:textSize="15.5sp"
            android:textColor="#ffffff"
            fontPath="fonts/RobotoLight.ttf"
            tools:ignore="MissingPrefix"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtTipReferencia"
            android:text="Referencia"
            android:textSize="15.5sp"
            android:textColor="#ffffff"
            fontPath="fonts/RobotoRegular.ttf"
            tools:ignore="MissingPrefix"
            android:textStyle="italic"
            />

    </LinearLayout>
</FrameLayout>

Fragment

public class TipsFragment extends BaseFragment {

    @Bind(R.id.TipRecyclerView)
    RecyclerView TipRecyclerView;


    ArrayList<Tip> tips = new ArrayList<>();
    TipAdapter adapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.tips_fragment, container, false);
        ButterKnife.bind(this, view);

        TipRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        TipRecyclerView.setItemAnimator(new DefaultItemAnimator());
        TipRecyclerView.setAdapter(adapter);

        showLoading();
        new TipManager(getActivity()).getTips(new ResponseListener()
        {
            @Override
            public void success(Object obj)
            {
                hideLoading();
                tips = (ArrayList<Tip>) obj;
                adapter = new TipAdapter(getActivity(), tips, new RecycleViewListener() {
                    @Override
                    public void onClick(int position) {
                        Tip tip = tips.get(position);
                        Intent intent = new Intent(getActivity(), TipsDetailActivity.class);
                        intent.putExtra("tip", Parcels.wrap(Tip.class, tip));
                        startActivity(intent);
                    }
                });

                TipRecyclerView.setAdapter(adapter);
            }

            @Override
            public void fail(Error error)
            {
                hideLoading();
                //Todo: exibir mensagem de erro
            }
        });

        return view;
    }

Adapter

public class TipAdapter extends RecyclerView.Adapter<TipAdapter.TipViewHolder>{

    public static class TipViewHolder extends RecyclerView.ViewHolder{

        private Context context;

        @Bind(R.id.tipRow)
        FrameLayout tipRow;

        @Bind(R.id.tipBackground)
        ImageView tipBackground;

        @Bind(R.id.txtTipTeme)
        TextView txtTipTeme;

        @Bind(R.id.txtTipTitle)
        TextView txtTipTitle;

        @Bind(R.id.txtTipAutor)
        TextView txtTipAutor;

        @Bind(R.id.txtTipReferencia)
        TextView txtTipReferencia;

        public TipViewHolder(final Context context, View itemView){
            super(itemView);
            this.context = context;
            ButterKnife.bind(this, itemView);
        }
    }

    private Context context;
    private ArrayList<Tip> itens;
    RecycleViewListener listener;

    public TipAdapter(Context context, ArrayList<Tip> itens, RecycleViewListener listener) {
        this.context = context;
        this.itens = itens;
        this.listener = listener;
        setHasStableIds(true);
    }

    @Override
    public TipViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.tips_item, parent, false);
        TipViewHolder viewHolder = new TipViewHolder(context, view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(TipViewHolder holder, final int position) {
        Tip tip = itens.get(position);
       Glide.with(context).load(tip.getPostOpenImage()).centerCrop().crossFade().into(holder.tipBackground);
        holder.txtTipTeme.setText(tip.getPostCategory());
        holder.txtTipTitle.setText(tip.getPostTitle());
        holder.txtTipAutor.setText("por " + tip.getPostAuthor());
        holder.txtTipReferencia.setText("");

        holder.tipRow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(listener != null)
                {
                    listener.onClick(position);
                }
            }
        });
    }

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

}

What is missing is to leave the items sent in a way that the click works correctly (takes the correct position in the corners)

Answer 1

Marcela, I can’t test at the moment, but try this (API 11+)

Insert this line into your method onCreateViewHolder : view.setRotation(-10);

Will stay like this:

 @Override
public TipViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(context).inflate(R.layout.tips_item, parent, false);

    view.setRotation(-10);// <-------------------- ISSO

    TipViewHolder viewHolder = new TipViewHolder(context, view);

    return viewHolder;
}