Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating complex Lists and Cards using Material design style.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 904
    Comment on it

    To create complex list and cards we have to use RecyclerView and CardView.

    RecyclerView is a view that shows items in scrolling list (vertical/horizontal) or in grid layout. RecyclerView have advanced features over ListView. RecyclerView provides maximum flexibility to design different kind of views. RecyclerView provides build-in Layout managers like LinearLayoutManager for vertical and horizontal scrolling list, GridLayoutManager for grid view, and StaggeredGridLayoutManager for items in a staggered grid look. Similar like list view RecyclerView also uses adapter class which extends RecyclerView.Adapter class.

    Card view can have consistent look across the platform. Card view helps to wrap other UI elements like TextView, EditText, Buttons, ImageView as Google style cards. CardView widgets can have elevation, background color, shadows, rounded corners and compact padding.

    MainActivity Layout

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        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"
        android:fitsSystemWindows="true"
        tools:context=".MainActivity">
    
        <!-- A RecyclerView with some commonly used attributes -->
        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#C4AC79"
            android:scrollbars="vertical" />
    
    </LinearLayout>
    

    MainActivity using Recycler View

    import android.os.Bundle;
    import android.app.Activity;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.Menu;
    import android.view.MenuItem;
    
    import java.util.ArrayList;
    
    public class MainActivity extends Activity {
    
        private RecyclerView mRecyclerView;
        private RecyclerView.Adapter mAdapter;
        private RecyclerView.LayoutManager mLayoutManager;
        private ArrayList<MyList> list = new ArrayList<MyList>();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
    
            mRecyclerView.setHasFixedSize(true);
    
            // LinearLayoutManager shows items in a vertical or horizontal scrolling list.
            mLayoutManager = new LinearLayoutManager(this);
            mRecyclerView.setLayoutManager(mLayoutManager);
    
            for (int i=1;i<5;i++){
                list.add(new MyList(i +". Android Developers","Evon-Tech",R.drawable.download+i));
            }
    
            // Attach an adapter for the data to be displayed
            mAdapter = new MyAdapter(list);
            mRecyclerView.setAdapter(mAdapter);
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
    
        // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
    
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
    
            int id = item.getItemId();
        //noinspection SimplifiableIfStatement
            if (id == R.id.action_settings) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }
    

    Card View Layout

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <!-- A CardView that contains a TextView -->
        <android.support.v7.widget.CardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="225dp"
            android:layout_gravity="center"
            card_view:cardBackgroundColor="#497AB8"
            card_view:cardCornerRadius="10dp"
            card_view:cardElevation="10.5sp"
            card_view:cardMaxElevation="0dp"
            card_view:cardPreventCornerOverlap="true"
            card_view:cardUseCompatPadding="true"
            card_view:contentPadding="5dp">
    
            <ImageView
                android:id="@+id/ivImage"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="2dp"
                android:layout_alignParentTop="true" />
    
            <TextView
                android:id="@+id/tvText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="5dp"
                android:text="@string/forest"
                android:textSize="15dp"
                android:layout_marginBottom="12dp"
                android:textColor="#FFFFFF"
                android:layout_gravity="bottom|center" />
    
        </android.support.v7.widget.CardView>
    
        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"/>
    
        <TextView
            android:id="@+id/tvSubtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:padding="2dp"
            android:layout_marginLeft="10dp" />
    
    </LinearLayout>
    

    Creating Recycler View Adapter

    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import java.util.ArrayList;
    
    
    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    
        private ArrayList<MyList> list;
    
        public static class ViewHolder extends RecyclerView.ViewHolder {
            // each data item is just a string in this case
            public View view;
    
            public ViewHolder(View v) {
                super(v);
                view = v;
            }
        }
    
        // Provide a suitable constructor (depends on the kind of dataset)
        public MyAdapter(ArrayList<MyList> list) {
            this.list = list;
        }
    
        // Create new views (invoked by the layout manager)
        @Override
        public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_my_adapter, parent, false);
    
        // set the view's size, margins, paddings and layout parameters
            ViewHolder viewHolder = new ViewHolder(v);
            return viewHolder;
        }
    
            // Replace the contents of a view (invoked by the layout manager)
            @Override
            public void onBindViewHolder(ViewHolder holder, int position) {
    
    
                TextView title = (TextView) holder.view.findViewById(R.id.tvTitle);
                TextView desc = (TextView) holder.view.findViewById(R.id.tvSubtitle);
                final ImageView imageView = (ImageView) holder.view.findViewById(R.id.ivImage);
    
                title.setText(list.get(position).getTitle());
                desc.setText(list.get(position).getSubtitle());
                imageView.setImageResource(list.get(position).getSrc_image());
            }
    
            // Return the size of your dataset (invoked by the layout manager)
            @Override
            public int getItemCount() {
                return list.size();
            }
        }
    

    MyList class for adding data

    public class MyList {
    
        String title;
        String subtitle;
        int src_image;
    
        public int getSrc_image() {
            return src_image;
        }
    
        public String getTitle() {
            return title;
        }
    
        public String getSubtitle() {
            return subtitle;
        }
    
        public MyList(String title, String subtitle, int src&#95;image) {
            this.title = title;
            this.subtitle = subtitle;
            this.src_image = src_image;
        }
    }
    

    Add Dependencies:-

    The RecyclerView and CardView widgets are part of the v7 Support Libraries. Android Studio users can add the following graddle dependency to project build.graddle file.

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

 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: