Custom recyclerview item android

Question

I wanted to create the view as shown below. this is a view in the horizontal recycler view:

the view has a background transparent.
With the below code I was able to achieve the view shown in the image.
The generated view has background white

Below is the source code for the generated image, here I have used the coordinator layout as parent layout and relative layout that contains the text and plus icon. An image view to show a human icon. Thanks in advance.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
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="280dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/sixteen_dp"
android:layout_marginEnd="@dimen/sixteen_dp"
android:background="@null">

<RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:background="@drawable/dotted_corner"
    android:paddingBottom="16dp">

    <TextView
        android:id="@+id/add_user_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="68dp"
        android:layout_marginBottom="8dp"
        android:fontFamily="sans-serif"
        android:text="@string/add_user_txt"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <ImageView
        android:id="@+id/add_user"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/add_user_tv"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="@dimen/eight_dp"
        android:gravity="center"
        android:src="@drawable/icon_add_new_user"
        tools:ignore="ContentDescription" />/>
</RelativeLayout>

<ImageView
    android:id="@+id/civProfilePic"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="@drawable/dotted_circle"
    android:scaleType="centerInside"
    android:src="@drawable/icon_user_profile_silhoutte_big"
    app:layout_anchor="@id/relativeLayout"
    app:layout_anchorGravity="top|center"
    tools:ignore="ContentDescription" />

Include your screenshots of the layout. Add both screenshots of what you have and what you want. This will help you get a quicker response. If you do not make your question clear, it'll be downvoted or closed with no response. Also, there is no need for a Relative Layout inside a Coordinator Layout. — MD Naseem Ashraf, Mar 14 '19 at 17:12

Bill Gates · Answer 1 · 2019-03-17T00:50:38.310

I wanted to create the view as shown below. this is a view in the horizontal recycler view

i don't see anything sample of RecyclerView for your image, it looks like only ImageView to pick photo in android storage.

..that contains the text and plus icon. An image view to show a human icon.

If you want Horizontal RecyclerView with Two Images and one Text:

"@+id/civProfilePic"

"@+id/add_user"

"@+id/add_user_tv"

you have to make class MyAdapter.class and MyContain.class and please your XML above rename to my_content.xml

here the code you need:

please note, this code is using FirebaseFirestore

please add this in your build.gradle

dependencies {
    // Firestore
    implementation 'com.google.firebase:firebase-firestore:18.1.0'
    implementation 'com.google.firebase:firebase-storage:16.1.0'

    // Other Firebase
    // don't forget add this in your Manifest.xml , <uses-permission android:name="android.permission.INTERNET" />
    implementation 'com.google.firebase:firebase-auth:16.1.0' 
    implementation 'com.google.android.gms:play-services-auth:16.0.1'

    // Third-party libraries
    // circle image
    implementation 'de.hdodenhof:circleimageview:2.2.0'

    // cropper if you need cropper when pick image from android storage don't forget this in your Manifest <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> and <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    implementation 'com.theartofdev.edmodo:android-image-cropper:2.6.0'

    // reducing size image
    implementation 'com.github.bumptech.glide:glide:4.6.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'
}

MyContain.class

public class MyContain {

     private String civProfilePic;
     private String add_user;         

     // need Empty contructor
     public MyContain(){}

     public MyContain(String civProfilePic, String add_user){
          this.civProfilePic = civProfilePic;
          this.add_user = add_user;
          // don't enter add_user_tv because the Text should not has any getter method, 
     }

     // get your image using this getter
     public String getCivProfilePic() {return civProfilePic;}

     public String getAddUserIcon() {return add_user;}   

}

MyAdapter.class

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    public List<MyContent> contentList;
    public Context context;

    public MyContain(List<MyContent> contentList){
        this.contentList = contentList;
    }

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

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

        holder.setIsRecyclable(false);


        // get position of RecyclerView Items and getImage from MyContain class
        String civProfilePic = contentList.get(position).getImage();

        // set photo using String which contain http taken using getImage and load from firestore
        holder.setProfilePhoto(civProfilePic);

        // get position of RecyclerView Items and getAddUserIcon from MyContain class
        String icon_add = contentList.get(position).getAddUserIcon();

        // set icon using String which contain http taken using getAddUserIcon and load from firestore
        holder.setIconAdd(icon_add);



    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {

        private View mView;

        private ImageView civProfilePic;
        private ImageView add_user;

        public ViewHolder(View itemView){
            super(itemView);
            mView = itemView;

        }

        public void setProfilePhoto(String image) {

            civProfilePic = mView.findViewById(R.id.civProfilePic);
            RequestOptions requestOptions = new RequestOptions();
            requestOptions.placeholder(R.drawable.icon_user_profile_silhoutte_big);
            Glide.with(context).applyDefaultRequestOptions(requestOptions).load(image).into(civProfilePic);
        }


        public void setIcon(String icon) {

            add_user = mView.findViewById(R.id.add_user);
            RequestOptions requestOptions = new RequestOptions();
            requestOptions.placeholder(R.drawable.icon_add_new_user);
            Glide.with(context).applyDefaultRequestOptions(requestOptions).load(icon).into(add_user);
        }
    }

where you want to display recycler view ? Fragment or Activity ?

example, when your recyclerView inside MainActivity.

MainActivity.class

public class MainActivity extends AppCompatActivity {

    private RecyclerView myRecycler;
    private List<MyContent> contentList;
    private MyAdapter myAdapter;
    private Boolean isFirstPageFirstLoad = true;
    private MyContent myContent;

    private FirebaseFirestore firestore;
    private FirebaseAuth mAuth;
    private DocumentSnapshot lastVisible;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        firebaseAuth = FirebaseAuth.getInstance();
        firebaseFirestore = FirebaseFirestore.getInstance();

        contentList = new ArrayList<>();


        myRecycler = view.findViewById(R.id.my_recycler);
        myAdapter = new MyAdapter(contentList);

        //horizontal recycler
        myRecycler.setLayoutManager(new LinearLayoutManager(container.getContext(), LinearLayoutManager.HORIZONTAL, false));

        myRecycler.setAdapter(myAdapter);

}

@Override
    public void onStart() {
        super.onStart();

        loadFirstQuery();
    }


    public void loadFirstQuery() {

        contentList.clear();

        if (firebaseAuth.getCurrentUser() != null) {       

            myRecycler.addOnScrollListener(new RecyclerView.OnScrollListener() {
                @Override
                public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                    super.onScrolled(recyclerView, dx, dy);

                    // horizontal
                    Boolean reachRightSide = !recyclerView.canScrollHorizontally(-1);                  

                    // when recycler reach last right side
                    if (reachRightSide) {
                        loadMorePost();
                    }
                }
            });

            // RETRIEVING PROFILE PHOTOS AND ICONS
            Query firstQuery = firestore
                    .collection("ProfilePhoto")                    
                    .orderBy("timestamp", Query.Direction.DESCENDING)
                    .limit(5);

            firstQuery.addSnapshotListener(new EventListener<QuerySnapshot>() {
                @Override
                public void onEvent(QuerySnapshot documentSnapshots, FirebaseFirestoreException e) {

                    if (isFirstPageFirstLoad) {
                        lastVisible = documentSnapshots.getDocuments().get(documentSnapshots.size() - 1); 
                    }

                    for (DocumentChange doc : documentSnapshots.getDocumentChanges()) {

                        if (doc.getType() == DocumentChange.Type.ADDED) {

                            myContent = doc.getDocument().toObject(MyContent.class);

                            if (isFirstPageFirstLoad) {
                                contentList.add(myContent);
                            } else {
                                contentList.add(0, myContent);
                            }

                            // fire the event                            adapterSeen.notifyDataSetChanged();
                        }
                    }

                    isFirstPageFirstLoad = false;
                }
            });
        }
    }


    public void loadMorePost() {        

        Query nextQuery = firestore
                .collection("ProfilePhoto")                
                .orderBy("timestamp", Query.Direction.DESCENDING)
                .startAfter(lastVisible)
                .limit(5);

        nextQuery.addSnapshotListener(new EventListener<QuerySnapshot>() {
            @Override
            public void onEvent(QuerySnapshot documentSnapshots, FirebaseFirestoreException e) {

                if (!documentSnapshots.isEmpty()) {

                    lastVisible = documentSnapshots.getDocuments().get(documentSnapshots.size() - 1);
                    for (DocumentChange doc : documentSnapshots.getDocumentChanges()) {

                        if (doc.getType() == DocumentChange.Type.ADDED) {

                            myContent = doc.getDocument().toObject(MyContent.class);
                            contentList.add(myContent);

                            adapterSeen.notifyDataSetChanged();

                        }
                    }
                }
            }
        });
    }

don't forget to this one , please use constraint, it easy to handle

main_activity.xml

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

 <FrameLayout        
        android:layout_width="0dp"
        android:layout_height="85dp"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="@drawable/line"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraint">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            app:layoutManager="android.support.v7.widget.LinearLayoutManager" />
    </FrameLayout>


</android.support.constraint.ConstraintLayout>

once again

make line.xml in drawable

this is very tiny line

<item>
    <shape android:shape="rectangle">
        <stroke
            android:color="@color/line"
            android:width="0.5dp" />
    </shape>
</item>

in colors.xml

<color name="line">#f1ecec</color>

any question ?

Custom recyclerview item android

1 Answers1