Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Adding Card View Alternatively Within RecyclerView

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 117
    Comment on it

    In the below example code I have Created a RecyclerView. In RecyclerView I have  added CardView Item Alternatively like Chat app .

    First Item is on left, second is on Right. In Adapter class  I have used boolean type, variables(changeLayout).

    You can see below example code it clearly describes Adding Card View Alternatively Within RecyclerView.

     

    Step(1)-I have added first RecyclerView and CardView dependency to Grandle file -

      compile 'com.android.support:recyclerview-v7:21.0.+'
           compile 'com.android.support:cardview-v7:21.0.+'
          

     

     Step(2)-activity_main.xml layout-

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/backgraund">
        <android.support.v7.widget.RecyclerView
    
            android:id="@+id/recycler_view"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scrollbars="vertical" />
        
    </LinearLayout>
    
    


    Step(3)-Created a row_left_text.xml layout-

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/card"
        android:scrollbarAlwaysDrawVerticalTrack="true"
        android:layout_margin="1dp"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="@dimen/cardview_default_elevation"
        >
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:id="@+id/main"
            android:focusable="true"
            android:background="@color/left"
            android:clickable="true"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            android:orientation="vertical">
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp">
                <ImageView
                    android:id="@+id/ivicon"
                    android:src="@drawable/people"
                    android:paddingLeft="5dp"
                    android:layout_alignParentLeft="true"
                    android:layout_width="65dp"
                    android:layout_height="65dp"
                    android:paddingBottom="14dp"/>
    
    
                <TextView
                    android:id="@+id/tvtitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:inputType="text"
                    android:textStyle="bold"
                    android:text="Arvind KUMAR"
                    android:paddingTop="4dp"
                    android:layout_centerHorizontal="true"
                    android:textColor="@color/colorAccent"
                    android:layout_toRightOf="@+id/ivicon"
                    android:paddingRight="5dp"
                    android:textSize="18dp" />
    
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/tvhour"
                    android:layout_toRightOf="@+id/ivicon"
                    android:text="2 hour ago"
                    android:layout_below="@id/tvtitle" />
    
    
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:textColor="#352e2e"
                    android:textSize="17dp"
                    android:id="@+id/comment_text"
                    android:text="Like most of our kind we are custom software system company."
                    android:layout_below="@+id/tvhour" />
    
            </RelativeLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

     

    Step(4)- Created a row_right_text.xml layout-

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/card"
        android:layout_margin="1dp"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="@dimen/cardview_default_elevation"
        >
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:id="@+id/main"
            android:focusable="true"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            android:background="@color/right"
            android:clickable="true"
            android:orientation="vertical">
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:paddingBottom="5dp"
                android:paddingTop="5dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp">
                <ImageView
                    android:id="@+id/ivicon"
                    android:src="@drawable/people"
                    android:paddingLeft="5dp"
                    android:layout_alignParentRight="true"
                    android:layout_width="65dp"
                    android:layout_height="65dp"
                    android:paddingBottom="14dp"/>
    
                <TextView
                    android:id="@+id/tvtitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:inputType="text"
                    android:textStyle="bold"
                    android:text="Arvind KUMAR"
                    android:paddingTop="4dp"
                    android:layout_centerHorizontal="true"
                    android:textColor="@color/colorAccent"
                    android:layout_toLeftOf="@+id/ivicon"
                    android:paddingLeft="5dp"
                    android:textSize="18dp" />
    
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/tvhour"
                    android:layout_toLeftOf="@+id/ivicon"
                    android:text="2 hour ago"
                    android:layout_below="@id/tvtitle"/>
    
    
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:textColor="#4e4a4a"
                    android:textSize="17dp"
                    android:id="@+id/comment_text"
                    android:text="Like most of our kind we are custom software system company."
                    android:layout_below="@+id/tvhour" />
    
            </RelativeLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>
    
    


    Step(5)-Created a new class Recycler_text_data-

    public class Recycler_text_data {
        
            private int imageId;
            private String title;
            private String comments;
            private String hour;
    
    
            public int getImageId(){return imageId;
            }
            public void setImageId(int imageId){
                this.imageId=imageId;
            }
            public  String getTitle(){return title;}
            public void setTitle(String title){
                this.title=title;
            }
            public  String getHour(){return hour;}
            public void setHour(String hour){
                this.hour=hour;
            }
    
            public  String getComments(){return comments;}
            public void setComments(String comments){
                this.comments=comments;
            }
    
        }

     

    Step(6)-Created a new class Recycler_Text_comment_Adapter -

    public class Recycler_Text_comment_Adapter extends RecyclerView.Adapter<Recycler_Text_comment_Adapter.MyViewHolder> {
        Context context;
        boolean changeLayout=true;
        private List<Recycler_text_data> data2;
    
        public Recycler_Text_comment_Adapter(Context context, List<Recycler_text_data> data2){
            this.data2 = data2;
            this.context=context;
        }
    
        public class MyViewHolder extends RecyclerView.ViewHolder  {
            public ImageView imageView;
    
            public TextView txtTitle;
            public TextView txtHour;
            public TextView txtComment;
            private LinearLayout main;
    
            public MyViewHolder(final View parent) {
                super(parent);
    
                txtTitle = (TextView) parent.findViewById(R.id.tvtitle);
                txtHour = (TextView) parent.findViewById(R.id.tvhour);
                txtComment=(TextView)parent.findViewById(R.id.comment_text);
    
                imageView=(ImageView)parent.findViewById(R.id.ivicon);
                main = (LinearLayout) parent.findViewById(R.id.main);
                main.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(itemView.getContext(), "Position:" + Integer.toString(getPosition()), Toast.LENGTH_SHORT).show();
    
                    }
                });
            }
        }
    
    
        @Override
        public Recycler_Text_comment_Adapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView;
            System.out.println("view type"+ viewType);
    
    
            if(changeLayout) {
                itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_left_text, parent, false);
                changeLayout= !changeLayout;
            }
            else {
                itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_right_text, parent, false);
                changeLayout= !changeLayout;
            }
            return new MyViewHolder(itemView);
    
        }
        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
    
            Recycler_text_data row = data2.get(position);
            holder.txtTitle.setText(row.getTitle());
            holder.txtHour.setText(row.getHour());
            holder.txtComment.setText(row.getComments());
            holder.imageView.setImageResource(row.getImageId());
        }
        @Override
        public int getItemCount() {
            return data2.size();
        }
    }


    Step(7)MainActivity-

    public class MainActivity extends AppCompatActivity {
        public static final String[] title = new String[]{"Inder tiwari :", "Raj :"};
        public static final String[] hour = new String[]{"22 Feb at 06:00 PM", "24 Feb at 06:00 PM"};
        public static final String[] comments = new String[]{"We are a team of 275+ technology evangelists, simply in love with the town we are headquartered in. This town has scenic beauty, talented pool of professionals, awesome weather... ", "We are a team of 275+ technology evangelists, simply in love with the town we are headquartered in. This town has scenic beauty, talented pool of professionals, awesome weather... "};
        public static final Integer[] images = {R.drawable.people, R.drawable.people};
    
        public List<Recycler_text_data> data2 = new ArrayList<>();
        private RecyclerView recyclerView;
        private Recycler_Text_comment_Adapter recyclerTextCommentAdapter;
        private LinearLayout main;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    
            data2 = new ArrayList<Recycler_text_data>();
            for (int i = 0; i < title.length; i++) {
                Recycler_text_data data = new Recycler_text_data();
                data.setImageId(images[i]);
                data.setTitle(title[i]);
                data.setHour(hour[i]);
                data.setComments(comments[i]);
                data2.add(data);
            }
            RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
            recyclerView.setLayoutManager(layoutManager);
    
            recyclerView.setItemAnimator(new DefaultItemAnimator());
            Recycler_Text_comment_Adapter recyclerTextCommentAdapter = new Recycler_Text_comment_Adapter(getApplicationContext(), data2);
            recyclerView.setAdapter(recyclerTextCommentAdapter);
        }
    }
    
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: