Android - How to create a view like this using recycler view?

Question

Can anyone help me with this custom layout inside a card view? I am showing a list of items and need to show an item like this. But cant understand how to implement this.

Basically, There is a recycler view Inside it, there are cards. The card has a blurry background image. On the top of it, there is a view that is similat to this. Below, there are textviews, which i have implemented.

But this thing is a real confusion. Cant understand how to make this happen.

Answer 1

Try something like this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="70dp"
    android:layout_height="22.27dp"
    android:background="@drawable/img_online_scoreboard_text_background" >

    <TextView
        android:id="@+id/nameTextView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/playerImageView"
        android:ellipsize="end"
        android:gravity="bottom|left"
        android:lines="1"
        android:scrollHorizontally="true"
        android:textColor="#FFFFFF"
        android:textSize="5dp" />

    <ImageView
        android:id="@+id/playerImageView"
        android:layout_width="22.27dp"
        android:layout_height="22.27dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:padding="0.5dp" />

</RelativeLayout>

img_online_scoreboard_text_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#A5FFFFFF" />

    <stroke
        android:width="0dp"
        android:color="#00FFFFFF" />

    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

</shape>

Set round image programmatically

public static Bitmap getCircularBitmap(Bitmap bm) {
    if(bm == null) {
      return bm;
    }
    int sice = Math.min((bm.getWidth()), (bm.getHeight()));
    Bitmap bitmap = ThumbnailUtils.extractThumbnail(bm, sice, sice);
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffff0000;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);

    paint.setAntiAlias(true);
    paint.setDither(true);
    paint.setFilterBitmap(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawOval(rectF, paint);

    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth((float) 4);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
  }

Use it like:

imageView.setImageBitmap(getCircularBitmap(bitmap));