Android Studio: Draw top right corner ribbon and star inside frame layout inside recycler view

Question

I've create a recycler view as this:

My Recyclerview Row Layout

How can I draw the rounded border image with rounded top right corner and bottom right star with or without image. The image is loaded by url coming from backend.

This is my code of layout of recycler view row:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/rlMain"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >

            <FrameLayout
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="left"
                android:gravity="left"
                android:background="@drawable/ic_no_image"
                android:layout_margin="10dp"
                >


                <ImageView
                    android:id="@+id/convenzionato"
                    android:elevation="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@drawable/convenzioni_ribbon"
                    android:visibility="visible"
                    />


                <ImageView
                    android:id="@+id/highlight"
                    android:elevation="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@drawable/highlight"
                    android:visibility="visible"
                    />

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    app:srcCompat="@drawable/ic_no_image">

                </ImageView>



            </FrameLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_gravity="right"
                android:gravity="right"
                android:layout_height="wrap_content">

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

                    <TextView
                        android:id="@+id/nome"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textColor="@color/bluPrincipale"
                        android:layout_marginTop="6dp"
                        android:text="Nome Evento"
                        android:textSize="20sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/tipologia"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textColor="@color/oro"
                        android:text="Sagra"
                        android:textSize="12sp"
                        android:textStyle="bold" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/localita"
                            android:layout_gravity="left"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/grigioTipo1"
                            android:text="Città (PV)"
                            android:textSize="12sp"
                            android:textStyle="italic" />

                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="right">

                        <TextView
                            android:id="@+id/kmposizione"
                            android:layout_gravity="right"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:textColor="@color/grigioTipo1"
                            android:paddingRight="10dp"
                            android:drawableRight="@drawable/icona_mappa_lista"
                            android:drawablePadding="5dp"
                            android:drawableTint="@color/bluPrincipale"
                            android:textAlignment="textEnd"
                            android:text="18 km"
                            android:textSize="12sp"
                            android:textStyle="italic"
                            tools:ignore="RtlCompat" />

                        </RelativeLayout>


                    </LinearLayout>

                    <TextView
                        android:id="@+id/data"
                        android:layout_gravity="left"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textColor="@color/grigioTipo1"
                        android:drawableTint="@color/bluPrincipale"
                        android:text="Dal 01/01/2019"
                        android:textSize="12sp"
                        android:textStyle="italic" />

                    <TextView
                        android:id="@+id/descrizione"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/latino"
                        android:layout_marginBottom="10dp"
                        />

                </LinearLayout>




            </RelativeLayout>






        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

And RecycerViewAdapter which use this:

package it.colan.xxx.adapters;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Matrix;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.List;

import it.colan.xxx.Config;
import it.colan.xxx.GUI.CustomAlertDialog;
import it.colan.xxx.GUI.GeneralUtil;
import it.colan.xxx.GUI.RoundedTransformation;
import it.colan.xxx.R;
import it.colan.xxx.activities.DettaglioCosaFareActivity;
import it.colan.xxx.models.CosaFare;

public class CosaFareAdapter extends RecyclerView.Adapter<CosaFareAdapter.ViewHolder> {
    private List<CosaFare> mValues = new ArrayList<>();
    private Context mContext;

    private CustomAlertDialog customAlertDialog;

    public CosaFare getValueAt(int position) {
        return mValues.get(position);
    }

    public CosaFareAdapter(Context context) {
        mContext = context;
        mValues = new ArrayList<>();

        customAlertDialog = new CustomAlertDialog((Activity) context);
    }

    @Override
    public CosaFareAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.row_cosa_fare, parent, false);
        return new CosaFareAdapter.ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final CosaFareAdapter.ViewHolder holder, final int position) {

        final CosaFare item = getValueAt(position);


       Picasso.get()
                .load(Config.IMAGE_UPLOADED_BACKEND +  item.getFoto())
                .placeholder(R.drawable.ic_no_image)
               .resize(150,150)

                .into(holder.image);



       // .transform(new RoundedTransformation(10,0))

        holder.nome.setText(GeneralUtil.removeLinesSpaces(item.getTitolo()));
        holder.localita.setText(GeneralUtil.removeLinesSpaces(item.getLocalita()) + "(" + GeneralUtil.removeLinesSpaces(item.getProvincia()) + ")");
        holder.tipologia.setText(GeneralUtil.removeLinesSpaces(item.getTipologia()));

        String data_inizio = item.getData_inizio();
        String data_fine = item.getData_fine();

        String data = "";

        if(data_fine == null)
        {
            data = data_inizio;
        }

        else
        {
            data = "Dal " + data_inizio + " al " + data_fine;
        }

        holder.data.setText(GeneralUtil.removeLinesSpaces(data));

        holder.descrizione.setText(GeneralUtil.removeLinesSpaces(item.getDescrizione()));

        String latitudine = item.getGeo_latitudine();
        String longitudine = item.getGeo_longitudine();

        if(item.getMetri() > 1000)
        {
            holder.kmPosizione.setText((item.getMetri() / 1000) + " km");
        }
        else if(item.getMetri() == 1000)
        {
            holder.kmPosizione.setText("1 km");
        }
        else
        {
            holder.kmPosizione.setText(item.getMetri() + " m");
        }


        holder.rlMain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Intent intent = new Intent(mContext, DettaglioCosaFareActivity.class);
                intent.putExtra("idCosaFare",String.valueOf(item.getId()));
                mContext.startActivity(intent);

            }
        });

    }


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

    public void addItem(int position, CosaFare data) {
        mValues.add(position, data);
        notifyItemInserted(position);
    }

    public void addAll(ArrayList<CosaFare> items) {
        mValues.clear();

        for (int i = 0; i < items.size(); i++) {
            mValues.add(items.get(i));
        }

        notifyDataSetChanged();
    }

    public void clearData() {
        mValues.clear();
    }


    public class ViewHolder extends RecyclerView.ViewHolder {
        public RelativeLayout rlMain;
        private ImageView image;
        private TextView nome, data, descrizione, localita, kmPosizione,tipologia;

        public ViewHolder(View view) {
            super(view);
            rlMain = view.findViewById(R.id.rlMain);
            nome = view.findViewById(R.id.nome);
            data = view.findViewById(R.id.data);
            tipologia = view.findViewById(R.id.tipologia);
            descrizione = view.findViewById(R.id.descrizione);
            localita = view.findViewById(R.id.localita);
            kmPosizione = view.findViewById(R.id.kmposizione);
            image = view.findViewById(R.id.image);

        }
    }
}

Answer 1

Try Below frame layout class inside xml -

import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.widget.FrameLayout;

public class RoundedCornerFrameLayout extends FrameLayout {
private final static float CORNER_RADIUS = 40.0f;

private Bitmap maskBitmap;
private Paint paint, maskPaint;
private float cornerRadius;

public RoundedCornerFrameLayout(Context context) {
    super(context);
    init(context, null, 0);
}

public RoundedCornerFrameLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
}

public RoundedCornerFrameLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs, defStyle);
}

private void init(Context context, AttributeSet attrs, int defStyle) {
    DisplayMetrics metrics = context.getResources().getDisplayMetrics();
    cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);

    paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

    setWillNotDraw(false);
}

@Override
public void draw(Canvas canvas) {
    Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas offscreenCanvas = new Canvas(offscreenBitmap);

    super.draw(offscreenCanvas);

    if (maskBitmap == null) {
        maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
    }

    offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
    canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
}

private Bitmap createMask(int width, int height) {
    Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
    Canvas canvas = new Canvas(mask);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.WHITE);

    canvas.drawRect(0, 0, width, height, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

    return mask;
}

}

use this inside xml like -

<com.example.RoundedCornerFrameLayout
    android:layout_width="250dp"
    android:layout_height="250dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</com.example.RoundedCornerFrameLayout>