RecyclerView realizes facebook post effect

facebook post effect

build.gradle(:app): dependencies

	implementation 'androidx.recyclerview:recyclerview:1.2.1'
   // 从 json 文件加载数据的依赖项。
    implementation 'com.android.volley:volley:1.2.0'
    // 从 url 加载图像的依赖项。
    implementation 'com.squareup.picasso:picasso:2.71828'
    // 用于创建圆形图像的依赖项。
    implementation 'de.hdodenhof:circleimageview:3.1.0'

Add permissions:

<uses-permission android:name="android.permission.INTERNET" /> 

Example icon folder:

item项：facebook_feed_rv_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:elevation="8dp"
    app:cardCornerRadius="8dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/idLLTopBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="4dp">

            <!--用于显示用户图像的圆形图像-->
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/idCVAuthor"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_margin="5dp" />

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


                <TextView
                    android:id="@+id/idTVAuthorName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="3dp"
                    android:padding="3dp"
                    android:text="myapp"
                    android:textColor="@color/black"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/idTVTime"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:text="time"
                    android:textColor="@color/black"
                    android:textSize="11sp" />

            </LinearLayout>

        </LinearLayout>


        <!--用于显示帖子描述的文本视图-->
        <TextView
            android:id="@+id/idTVDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idLLTopBar"
            android:layout_margin="5dp"
            android:padding="5dp"
            android:text="Description"
            android:textColor="@color/black"
            android:textSize="11sp" />

        <!--显示帖子图像的图像视图-->
        <ImageView
            android:id="@+id/idIVPost"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_below="@id/idTVDescription"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter" />

        <!--用于显示 facebook 操作的线性布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idIVPost"
            android:layout_margin="5dp"
            android:orientation="horizontal"
            android:padding="2dp"
            android:weightSum="3">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:background="@drawable/background_drawable"
                android:orientation="horizontal"
                android:weightSum="2">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:src="@drawable/ic_like" />

                <TextView
                    android:id="@+id/idTVLikes"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:background="@drawable/background_drawable"
                    android:drawablePadding="3dp"
                    android:padding="5dp"
                    android:text="likes"
                    android:textColor="@color/black"
                    android:textSize="12sp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:background="@drawable/background_drawable"
                android:orientation="horizontal"
                android:weightSum="2">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:src="@drawable/ic_comment" />

                <TextView
                    android:id="@+id/idTVComments"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="5dp"
                    android:layout_weight="1"
                    android:drawablePadding="3dp"
                    android:padding="5dp"
                    android:text="12"
                    android:textColor="@color/black"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLShare"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:background="@drawable/background_drawable"
                android:orientation="horizontal"
                android:weightSum="2">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:src="@drawable/ic_share" />

                <TextView
                    android:id="@+id/idTVShare"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:background="@drawable/background_drawable"
                    android:drawablePadding="3dp"
                    android:padding="5dp"
                    android:text="Share"
                    android:textColor="@color/black"
                    android:textSize="12sp" />

            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>

</androidx.cardview.widget.CardView>

drawable/background_drawable.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--radius for our shape-->
    <corners android:radius="20dp" />
    <!--background color for our shape-->
    <solid android:color="#EDEDED" />
</shape>

Model class

public class FacebookFeedModal {
    
    
   /** 用于存储我们的作者图片、作者姓名、postDate、postDescription、post image、post likes、post comments 的变量。*/
    private String authorImage;
    private String authorName;
    private String postDate;
    private String postDescription;
    private String postIV;
    private String postLikes;
    private String postComments;

    public String getAuthorImage() {
    
    
        return authorImage;
    }

    public void setAuthorImage(String authorImage) {
    
    
        this.authorImage = authorImage;
    }

    public String getAuthorName() {
    
    
        return authorName;
    }

    public void setAuthorName(String authorName) {
    
    
        this.authorName = authorName;
    }

    public String getPostDate() {
    
    
        return postDate;
    }

    public void setPostDate(String postDate) {
    
    
        this.postDate = postDate;
    }

    public String getPostDescription() {
    
    
        return postDescription;
    }

    public void setPostDescription(String postDescription) {
    
    
        this.postDescription = postDescription;
    }

    public String getPostIV() {
    
    
        return postIV;
    }

    public void setPostIV(String postIV) {
    
    
        this.postIV = postIV;
    }

    public String getPostLikes() {
    
    
        return postLikes;
    }

    public void setPostLikes(String postLikes) {
    
    
        this.postLikes = postLikes;
    }

    public String getPostComments() {
    
    
        return postComments;
    }

    public void setPostComments(String postComments) {
    
    
        this.postComments = postComments;
    }

    public FacebookFeedModal(String authorImage, String authorName, String postDate,
                             String postDescription, String postIV, String postLikes,
                             String postComments) {
    
    
        this.authorImage = authorImage;
        this.authorName = authorName;
        this.postDate = postDate;
        this.postDescription = postDescription;
        this.postIV = postIV;
        this.postLikes = postLikes;
        this.postComments = postComments;
    }
}

recyclerview adapter

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


    private ArrayList<FacebookFeedModal> facebookFeedModalArrayList;
    private Context context;

    public FacebookFeedRVAdapter(ArrayList<FacebookFeedModal> facebookFeedModalArrayList, Context context) {
    
    
        this.facebookFeedModalArrayList = facebookFeedModalArrayList;
        this.context = context;
    }

    @NonNull
    @Override
    public FacebookFeedRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    
    
        // 展示布局
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.facebook_feed_rv_item, parent, false);
        return new FacebookFeedRVAdapter.ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull FacebookFeedRVAdapter.ViewHolder holder, int position) {
    
    
        //拿取数据并绑定到每一个item
        FacebookFeedModal modal = facebookFeedModalArrayList.get(position);

        Picasso.get().load(modal.getAuthorImage()).into(holder.authorIV);
        holder.authorNameTV.setText(modal.getAuthorName());
        holder.timeTV.setText(modal.getPostDate());
        holder.descTV.setText(modal.getPostDescription());
        Picasso.get().load(modal.getPostIV()).into(holder.postIV);
        holder.likesTV.setText(modal.getPostLikes());
        holder.commentsTV.setText(modal.getPostComments());
    }

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

    /**
     *  item数据项
     */
    public class ViewHolder extends RecyclerView.ViewHolder {
    
    

        private CircleImageView authorIV;
        private TextView authorNameTV, timeTV, descTV;
        private ImageView postIV;
        private TextView likesTV, commentsTV;
        private LinearLayout shareLL;

        public ViewHolder(@NonNull View itemView) {
    
    
            super(itemView);
            shareLL = itemView.findViewById(R.id.idLLShare);
            authorIV = itemView.findViewById(R.id.idCVAuthor);
            authorNameTV = itemView.findViewById(R.id.idTVAuthorName);
            timeTV = itemView.findViewById(R.id.idTVTime);
            descTV = itemView.findViewById(R.id.idTVDescription);
            postIV = itemView.findViewById(R.id.idIVPost);
            likesTV = itemView.findViewById(R.id.idTVLikes);
            commentsTV = itemView.findViewById(R.id.idTVComments);
        }
    }
}

Primary Activity

public class NinthActivity extends AppCompatActivity {
    
    
    /**
     * 为我们的请求队列、数组列表、进度条、编辑文本、图像按钮和RecyclerView创建变量。
     */
    private RequestQueue mRequestQueue;
    private ArrayList<FacebookFeedModal> instaModalArrayList;
    private ArrayList<FacebookFeedModal> facebookFeedModalArrayList;
    private ProgressBar progressBar;

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

        // 初始话view
        progressBar = findViewById(R.id.idLoadingPB);

        getFacebookFeeds();
    }

    private void getFacebookFeeds() {
    
    
        facebookFeedModalArrayList = new ArrayList<>();

        // 用于初始化请求队列的变量
        mRequestQueue = Volley.newRequestQueue(NinthActivity.this);

        // 清除缓存，用于数据更新时
        mRequestQueue.getCache().clear();

        //返回json格式的String数据
        String url = "https://jsonkeeper.com/b/KXDH";

//        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url,
//                null, new Response.Listener<JSONObject>() {
    
    
//            @Override
//            public void onResponse(JSONObject response) { Lambda表达式
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url,
                null, response -> {
    
    

            progressBar.setVisibility(View.GONE);
            try {
    
    
                // 从 json 对象中提取数据
                String authorName = response.getString("authorName");
                String authorImage = response.getString("authorImage");

                JSONArray feedsArray = response.getJSONArray("feeds");

                //初始化
                for (int i = 0; i < feedsArray.length(); i++) {
    
    

                    JSONObject feedsObj = feedsArray.getJSONObject(i);

                    String postDate = feedsObj.getString("postDate");
                    String postDescription = feedsObj.getString("postDescription");
                    String postIV = feedsObj.getString("postIV");
                    String postLikes = feedsObj.getString("postLikes");
                    String postComments = feedsObj.getString("postComments");

                    // 向model类添加数据
                    FacebookFeedModal feedModal = new FacebookFeedModal(authorImage, authorName,
                            postDate, postDescription, postIV, postLikes, postComments);
                    facebookFeedModalArrayList.add(feedModal);

                    // 创建一个适配器类并在其中添加我们的数组列表
                    FacebookFeedRVAdapter adapter = new FacebookFeedRVAdapter(facebookFeedModalArrayList, NinthActivity.this);
                    RecyclerView recyclerView = findViewById(R.id.idRVInstaFeeds);

                    //RecyclerView设置线性布局
                    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(NinthActivity.this,
                            RecyclerView.VERTICAL, false);
                    recyclerView.setLayoutManager(linearLayoutManager);
                    //RecyclerView设置适配器
                    recyclerView.setAdapter(adapter);
                }
            } catch (JSONException e) {
    
    
                e.printStackTrace();
            }
        }, error -> Toast.makeText(NinthActivity.this, "Fail to get data with error " + error,
                Toast.LENGTH_SHORT).show());
//        }, new Response.ErrorListener() {
    
    
//            @Override
//            public void onErrorResponse(VolleyError error) {
    
    
//                Toast.makeText(NinthActivity.this, "Fail to get data with error " + error, Toast.LENGTH_SHORT).show();
//            }
//        });

        mRequestQueue.add(jsonObjectRequest);
    }
}

activity_night.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".activity.NinthActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVInstaFeeds"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ProgressBar
        android:id="@+id/idLoadingPB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="visible" />

</RelativeLayout>

Demo original address