Skip to content Skip to sidebar Skip to footer
Home / Android / Android Layout / Android Recyclerview / Java

Horizontally Of Circular Images To Show User Profile Picture

Post a Comment
I need to show the users profile picture who all are joining in a specified event and it should be in horizontal circular images one after other and after 5 images. it should show

Solution 1:

enter image description here

OverlapImageViewActivity.kt

classOverlapImageViewActivity : AppCompatActivity(), RecyclerViewClickListener {

    privateval mAdapter by lazy { OverlapRecyclerViewAdapter(this, this,overlapLimit) }

    //------limit number of items to be overlappedprivateval overlapLimit = 5//------set value of item overlappingprivateval overlapWidth = -50overridefunonCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //------create dummy list to set on recycler view
        setDummyArrayList()

        //------set up recycler viewval layoutManager = LinearLayoutManager(this,
                LinearLayoutManager.HORIZONTAL, false)
        recyclerView.layoutManager = layoutManager

        //------set item decoration for item overlapping
        recyclerView.addItemDecoration(OverlapRecyclerViewDecoration(overlapLimit, overlapWidth))
        recyclerView.adapter = mAdapter
        mAdapter.setImageList(setDummyArrayList())

    }

    /**
     * add dummy data to ArrayList
     */privatefunsetDummyArrayList(): ArrayList<OverlapImageModel> {
        val mArrayList = ArrayList<OverlapImageModel>()

        //-----fill data in to array listfor (i in0..30) {
            val imageModel = OverlapImageModel()
            imageModel.imageUrl = imageURLs[i % imageURLs.size]
            mArrayList.add(imageModel)
        }

        return mArrayList
    }

    overridefunonNormalItemClicked(adapterPosition: Int) {
        toast(this,"Normal item clicked >> $adapterPosition")
    }

    overridefunonNumberedItemClick(adapterPosition: Int) {
        toast(this,"Numbered item clicked >> $adapterPosition")
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns: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="10dp"android:orientation="vertical"tools:context=".activities.OverlapImageViewActivity"><android.support.v7.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingEnd="5dp"app:layoutManager="android.support.v7.widget.LinearLayoutManager"tools:listitem="@layout/row_image" /></LinearLayout>

OverLapRecyclerViewAdapter.kt

classOverlapRecyclerViewAdapter(privatevar mContext: Context, privatevar recyclerViewClickListener: RecyclerViewClickListener
                                 , privateval overlapLimit: Int) : RecyclerView.Adapter<OverlapRecyclerViewAdapter.CustomViewHolder>() {

    privateval TAG = OverlapRecyclerViewAdapter::class.java.simpleName

    //----array list to be shownprivatevar mImageList = ArrayList<OverlapImageModel>()

    //----array list to be shown after expansionprivatevar mImageExpandedList = ArrayList<OverlapImageModel>()

    //----flag to indicate recyclerview is expanded or notprivatevar isExpanded = falseoverridefunonCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder {
        val view = LayoutInflater.from(mContext).inflate(R.layout.row_image, parent, false)
        return CustomViewHolder(view)
    }

    overridefunonBindViewHolder(holder: CustomViewHolder, position: Int) {
        val mCurrentImageModel = mImageList[position]

        //----bind data to view
        holder.bind(mCurrentImageModel)
    }

    /**
     * set array list over adapter
     */funsetImageList(mImageList: ArrayList<OverlapImageModel>) {
        if (mImageList.size > overlapLimit) {
            for (mImageModel in mImageList) {
                if (this.mImageList.size <= overlapLimit) {
                    this.mImageList.add(mImageModel)
                } else {
                    this.mImageExpandedList.add(mImageModel)
                }
            }
        } else {
            this.mImageList = mImageList
        }
        notifyDataSetChanged()
    }

    /**
     * add items to array list
     */funaddItems(mImageList: ArrayList<OverlapImageModel>) {
        this.mImageList.addAll(mImageList)
        notifyDataSetChanged()
    }

    overridefungetItemCount(): Int {
        return mImageList.size
    }

    /**
     * get item by its position
     */fungetItem(pos: Int): OverlapImageModel {
        return mImageList[pos]
    }

    innerclassCustomViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        privatevar requestOptions: RequestOptions? = null/**
         * init request option for glide
         */privatefungetGlideRequestOptions(): RequestOptions {
            if (requestOptions == null) {
                requestOptions = RequestOptions()
                requestOptions?.error(R.mipmap.ic_launcher)
                requestOptions?.placeholder(R.mipmap.ic_launcher)
            }
            return requestOptions!!
        }

        /**
         * bind model data to item
         */funbind(mImageModel: OverlapImageModel) {

            if (adapterPosition == overlapLimit && !isExpanded) {

                //----set text drawable to show count on last imageviewval text = mImageExpandedList.size.toString()
                val drawable = TextDrawable.builder()
                        .beginConfig()
                        .textColor(Color.WHITE)
                        .width(90)
                        .height(90)
                        .endConfig()
                        .buildRound(text, Color.parseColor("#8FAE5D"))
                itemView.imageView.setImageDrawable(drawable)
            } else {

                //----load image
                Glide.with(mContext)
                        .load(mImageModel.imageUrl)
                        .apply(getGlideRequestOptions())
                        .into(itemView.imageView)
            }

            //----handle item click
            itemView.imageView.setOnClickListener {
                if (adapterPosition == overlapLimit && !isExpanded) {
                    recyclerViewClickListener.onNumberedItemClick(adapterPosition)
                } else {
                    recyclerViewClickListener.onNormalItemClicked(adapterPosition)
                }
            }
        }
    }
}

OverlapRecyclerViewDecoration.kt

classOverlapRecyclerViewDecoration(privateval overlapLimit: Int, privateval overlapWidth: Int) : RecyclerView.ItemDecoration() {
    overridefungetItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State?) {

        //-----get current position of itemval itemPosition = parent.getChildAdapterPosition(view)

        //-----avoid first item decoration else it will go of the screenif (itemPosition == 0) {
            return
        } else {

            //-----apply decorationwhen {
                itemPosition <= overlapLimit -> outRect.set(overlapWidth, 0, 0, 0)

                else -> outRect.set(0, 0, 0, 0)
            }
        }
    }
}

TextDrawable.kt

classTextDrawable(builder: Builder) : ShapeDrawable(builder.shape) {

    privateval textPaint: Paint
    privateval borderPaint: Paint
    privateval text: String?
    privateval color: Intprivateval shape: RectShape?
    privateval height: Intprivateval width: Intprivateval fontSize: Intprivateval radius: Floatprivateval borderThickness: Intinit {

        // shape properties
        shape = builder.shape
        height = builder.height
        width = builder.width
        radius = builder.radius

        // text and color
        text = if (builder.toUpperCase) builder.text!!.toUpperCase() else builder.text
        color = builder.color

        // text paint settings
        fontSize = builder.fontSize
        textPaint = Paint()
        textPaint.color = builder.textColor
        textPaint.isAntiAlias = true
        textPaint.isFakeBoldText = builder.isBold
        textPaint.style = Paint.Style.FILL
        textPaint.typeface = builder.font
        textPaint.textAlign = Paint.Align.CENTER
        textPaint.strokeWidth = builder.borderThickness.toFloat()

        // border paint settings
        borderThickness = builder.borderThickness
        borderPaint = Paint()
        borderPaint.color = getDarkerShade(builder.color)
        borderPaint.style = Paint.Style.STROKE
        borderPaint.strokeWidth = borderThickness.toFloat()

        // drawable paint colorval paint = paint
        paint.color = color

    }

    privatefungetDarkerShade(color: Int): Int {
        return Color.rgb((SHADE_FACTOR * Color.red(color)).toInt(),
                (SHADE_FACTOR * Color.green(color)).toInt(),
                (SHADE_FACTOR * Color.blue(color)).toInt())
    }

    overridefundraw(canvas: Canvas) {
        super.draw(canvas)
        val r = bounds


        // draw borderif (borderThickness > 0) {
            drawBorder(canvas)
        }

        val count = canvas.save()
        canvas.translate(r.left.toFloat(), r.top.toFloat())

        // draw textval width = if (this.width < 0) r.width() elsethis.width
        val height = if (this.height < 0) r.height() elsethis.height
        val fontSize = if (this.fontSize < 0) Math.min(width, height) / 2elsethis.fontSize
        textPaint.textSize = fontSize.toFloat()
        canvas.drawText(text!!, (width / 2).toFloat(), height / 2 - (textPaint.descent() + textPaint.ascent()) / 2, textPaint)

        canvas.restoreToCount(count)

    }

    privatefundrawBorder(canvas: Canvas) {
        val rect = RectF(bounds)
        rect.inset((borderThickness / 2).toFloat(), (borderThickness / 2).toFloat())

        when (shape) {
            is OvalShape -> canvas.drawOval(rect, borderPaint)
            is RoundRectShape -> canvas.drawRoundRect(rect, radius, radius, borderPaint)
            else -> canvas.drawRect(rect, borderPaint)
        }
    }

    overridefunsetAlpha(alpha: Int) {
        textPaint.alpha = alpha
    }

    overridefunsetColorFilter(cf: ColorFilter?) {
        textPaint.colorFilter = cf
    }

    overridefungetOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }

    overridefungetIntrinsicWidth(): Int {
        return width
    }

    overridefungetIntrinsicHeight(): Int {
        return height
    }

    classBuilder : IConfigBuilder, IShapeBuilder, IBuilder {var text: String? = nullvar color: Int = 0var borderThickness: Int = 0var borderColor: Int = 0var width: Int = 0var height: Int = 0var font: Typeface? = nullvar shape: RectShape? = nullvar textColor: Int = 0var fontSize: Int = 0var isBold: Boolean = falsevar toUpperCase: Boolean = falsevar radius: Float = 0.toFloat()

        init {
            text = ""
            color = Color.GRAY
            textColor = Color.WHITE
            borderThickness = 0
            borderColor = 0
            width = -1
            height = -1
            shape = RectShape()
            font = Typeface.create("sans-serif-light", Typeface.NORMAL)
            fontSize = -1
            isBold = false
            toUpperCase = false
        }

        overridefunwidth(width: Int): IConfigBuilder {
            this.width = width
            returnthis
        }

        overridefunheight(height: Int): IConfigBuilder {
            this.height = height
            returnthis
        }

        overridefuntextColor(color: Int): IConfigBuilder {
            this.textColor = color
            returnthis
        }

        overridefunwithBorder(thickness: Int): IConfigBuilder {
            this.borderThickness = thickness
            returnthis
        }

        overridefunborderColor(color: Int): IConfigBuilder {
            this.borderColor= borderColor
            returnthis
        }

        overridefunuseFont(font: Typeface): IConfigBuilder {
            this.font = font
            returnthis
        }

        overridefunfontSize(size: Int): IConfigBuilder {
            this.fontSize = size
            returnthis
        }

        overridefunbold(): IConfigBuilder {
            this.isBold = truereturnthis
        }

        overridefuntoUpperCase(): IConfigBuilder {
            this.toUpperCase = truereturnthis
        }

        overridefunbeginConfig(): IConfigBuilder {
            returnthis
        }

        overridefunendConfig(): IShapeBuilder {
            returnthis
        }

        overridefunrect(): IBuilder {
            this.shape = RectShape()
            returnthis
        }

        overridefunround(): IBuilder {
            this.shape = OvalShape()
            returnthis
        }

        overridefunroundRect(radius: Int): IBuilder {
            this.radius = radius.toFloat()
            val radii = floatArrayOf(radius.toFloat(), radius.toFloat(), radius.toFloat(), radius.toFloat(), radius.toFloat(), radius.toFloat(), radius.toFloat(), radius.toFloat())
            this.shape = RoundRectShape(radii, null, null)
            returnthis
        }

        overridefunbuildRect(text: String, color: Int): TextDrawable {
            rect()
            return build(text, color)
        }

        overridefunbuildRoundRect(text: String, color: Int, radius: Int): TextDrawable {
            roundRect(radius)
            return build(text, color)
        }

        overridefunbuildRound(text: String, color: Int): TextDrawable {
            round()
            return build(text, color)
        }

        overridefunbuild(text: String, color: Int): TextDrawable {
            this.color = color
            this.text = text
            return TextDrawable(this)
        }
    }

    interfaceIConfigBuilder{
        funwidth(width: Int): IConfigBuilder

        funheight(height: Int): IConfigBuilder

        funtextColor(color: Int): IConfigBuilder

        funwithBorder(thickness: Int): IConfigBuilder

        funborderColor(color: Int): IConfigBuilder

        funuseFont(font: Typeface): IConfigBuilder

        funfontSize(size: Int): IConfigBuilder

        funbold(): IConfigBuilder

        funtoUpperCase(): IConfigBuilder

        funendConfig(): IShapeBuilder
    }

    interfaceIBuilder{

        funbuild(text: String, color: Int): TextDrawable
    }

    interfaceIShapeBuilder{

        funbeginConfig(): IConfigBuilder

        funrect(): IBuilder

        funround(): IBuilder

        funroundRect(radius: Int): IBuilder

        funbuildRect(text: String, color: Int): TextDrawable

        funbuildRoundRect(text: String, color: Int, radius: Int): TextDrawable

        funbuildRound(text: String, color: Int): TextDrawable
    }

    companionobject {
        privateval SHADE_FACTOR = 0.9ffunbuilder(): IShapeBuilder {
            return Builder()
        }
    }
}

RecyclerViewClickListener.kt

interfaceRecyclerViewClickListener{
    funonNormalItemClicked(adapterPosition: Int)funonNumberedItemClick(adapterPosition: Int)
}

OverlapImageModel.kt

classOverlapImageModel {
    varimageUrl: String? = null
}

row_image.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="@dimen/image_size"android:layout_height="@dimen/image_size"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_gravity="center"android:animateLayoutChanges="true"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/imageView"app:civ_border_color="#ffffff"app:civ_border_width="2dp"android:layout_width="@dimen/image_size"android:layout_height="@dimen/image_size"android:layout_centerInParent="true"tools:src="@mipmap/ic_launcher" /></RelativeLayout>

Solution 2:

enter image description here

Try this here is the working code for java

RecyclerViewActivity

publicclassRecyclerViewActivityextendsAppCompatActivity {


    privatefinal Integer[] IMAGES = {R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh,
            R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh, R.drawable.nilesh};
    private ArrayList<Integer> arrayList = newArrayList<Integer>();

    RecyclerView myRecyclerView;

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler_view);

        Collections.addAll(arrayList, IMAGES);

        myRecyclerView=findViewById(R.id.myRecyclerView);
        myRecyclerView.setLayoutManager(newLinearLayoutManager(this,
                LinearLayoutManager.HORIZONTAL,false));
        myRecyclerView.addItemDecoration(newOverlapDecoration());
        myRecyclerView.setHasFixedSize(true);
        myRecyclerView.setAdapter(newDataAdapter(this,arrayList));


    }

    publicclassOverlapDecorationextendsRecyclerView.ItemDecoration {

        privatefinalstaticintvertOverlap= -40;

        @OverridepublicvoidgetItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            finalintitemPosition= parent.getChildAdapterPosition(view);


            outRect.set(0, 0, vertOverlap, 0);


        }
    }
}

activity_recycler_view

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns: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:background="?attr/colorBackgroundFloating"android:orientation="vertical"><android.support.v7.widget.RecyclerViewandroid:id="@+id/myRecyclerView"android:layout_width="match_parent"android:layout_height="250dp"
         /></LinearLayout>

DataAdapter

publicclassDataAdapterextendsRecyclerView.Adapter<DataAdapter.ViewHolder> {

    private Context context;
    private ArrayList<Integer> arrayList = newArrayList<Integer>();

    publicDataAdapter(Context context, ArrayList<Integer> imagesArray) {
        this.context = context;
        arrayList = imagesArray;
    }

    @NonNull@Overridepublic ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        ViewimageLayout= LayoutInflater.from(context).inflate(R.layout.aa, parent, false);
        returnnewViewHolder(imageLayout);
    }

    @OverridepublicvoidonBindViewHolder(@NonNull ViewHolder holder, int position) {

        holder.imageView.setImageResource(arrayList.get(position));

        if (position == 3) {
            holder.relativeLayout.setVisibility(View.VISIBLE);
            holder.tvCount.setText(String.valueOf(arrayList.size()-4));
        }else {
            holder.relativeLayout.setVisibility(View.GONE);
        }
    }

    @OverridepublicintgetItemCount() {
        return4;
    }

    publicclassViewHolderextendsRecyclerView.ViewHolder {

        RelativeLayout relativeLayout;
        TextView tvCount;
        CircleImageView imageView;

        publicViewHolder(View itemView) {
            super(itemView);

            relativeLayout = itemView.findViewById(R.id.relative);
            tvCount = itemView.findViewById(R.id.tvCount);
            imageView = itemView
                    .findViewById(R.id.profile_image);


        }
    }
}

layout.aa

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"><de.hdodenhof.circleimageview.CircleImageViewxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/profile_image"android:layout_width="96dp"android:layout_height="96dp"android:src="@drawable/kid"app:civ_border_color="#FF000000"app:civ_border_width="2dp" /><RelativeLayoutandroid:id="@+id/relative"android:visibility="gone"android:layout_marginLeft="-40dp"android:layout_width="wrap_content"android:layout_height="wrap_content"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/imageCircleImageView"android:layout_width="96dp"android:layout_height="96dp"android:src="#919191"app:civ_border_color="#FF000000"app:civ_border_width="2dp"  /><TextViewandroid:id="@+id/tvCount"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignBottom="@id/imageCircleImageView"android:layout_alignEnd="@id/imageCircleImageView"android:layout_alignStart="@id/imageCircleImageView"android:layout_alignTop="@id/imageCircleImageView"android:layout_gravity="center"android:gravity="center"android:padding="10dp"android:text=""android:textColor="#FFFFFF" /></RelativeLayout></LinearLayout>

Solution 3:

Here is a layout design of your requirment. Take reference of these images. like 

TextView =  itemView.findViewById(R.id.nmr_of_students);  CircularImageViewstudent1 =  itemView.findViewById(R.id.student1);             CircularImageViewstudent2 =  itemView.findViewById(R.id.student2);CircularImageViewstudent3 =  itemView.findViewById(R.id.student3);CircularImageViewstudent4 =  itemView.findViewById(R.id.student4);CircularImageViewstudent5 =  itemView.findViewById(R.id.student5);

now use below layout and assign value to them. and you are good to go.

<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"

                ><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/frames"android:layout_centerHorizontal="true"android:layout_centerInParent="true"
                    ><com.mikhaellopez.circularimageview.CircularImageViewandroid:id="@+id/student1"android:src="@drawable/user"android:layout_width="36dip"android:layout_height="36dip"app:civ_border_width="1dp"app:civ_border_color="#ffffff"

                        /><com.mikhaellopez.circularimageview.CircularImageViewandroid:id="@+id/student2"android:src="@drawable/user"android:layout_width="36dip"android:layout_height="36dip"android:layout_marginLeft="20dip"app:civ_border_width="1dp"app:civ_border_color="#ffffff"

                        /><com.mikhaellopez.circularimageview.CircularImageViewandroid:id="@+id/student3"android:src="@drawable/user"android:layout_width="36dip"android:layout_height="36dip"android:layout_marginLeft="40dip"app:civ_border_width="1dp"app:civ_border_color="#ffffff"

                        /><com.mikhaellopez.circularimageview.CircularImageViewandroid:id="@+id/student4"android:src="@drawable/user"android:layout_width="36dip"android:layout_height="36dip"android:layout_marginLeft="60dip"app:civ_border_width="1dp"app:civ_border_color="#ffffff"

                        /><com.mikhaellopez.circularimageview.CircularImageViewandroid:id="@+id/student5"android:src="@drawable/user"android:layout_width="36dip"android:layout_height="36dip"android:layout_marginLeft="80dip"app:civ_border_width="1dp"app:civ_border_color="#ffffff"

                        /></FrameLayout><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@+id/frames"android:layout_centerVertical="true"android:layout_marginLeft="2dip"android:textSize="@dimen/home_nmruser_textsize"android:text=""android:textStyle="bold"android:textColor="@color/text_color_gray"android:id="@+id/nmr_of_students"
                    /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=""android:textSize="@dimen/home_other_textview"android:layout_marginLeft="@dimen/home_other_marginleft"android:layout_toRightOf="@+id/nmr_of_students"android:layout_centerVertical="true"
                    /></RelativeLayout></FrameLayout>

You may like these posts

Post a Comment for "Horizontally Of Circular Images To Show User Profile Picture"