Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use CollapsingToolbar with RecyclerView

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 759
    Comment on it

    In the below example I have created a Collapsing toolbar. When you scoll your recycler items then your header image will hide. Here In actvity_main.xml I have first created CoordinatorLayout as root element, In CoordinatorLayout I have added AppBarLayout, CollapsingToolbarLayout, Toolbar and RecyclerView as child elements. 
    In next step I have created card_view.xml layout, Here I have added a CardView with in CardView I have added a LinearLayout, ImageView, TextView. 
    After this I have created CardAdapter and Names class. In CardAdapter class I have uesd View holder class and onBindViewHolder meyhod. In MainActivity class I have initialize image and text. You can see below example code it clearly describe you How to use Collapsing Toolbar in RecyclerView.

    Step(1)I have added first RecyclerView, CardView and Design dependency to Grandle file.

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


      Step(2)activity_main.xml-

    <android.support.design.widget.CoordinatorLayout 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="match_parent"
        android:fitsSystemWindows="true">
    
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/iconlarge"
                app:layout_collapseMode="parallax" />
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
                android:title="Collapsing Toolbar"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>
    
    </android.support.design.widget.CoordinatorLayout>

        Step(3)- Created a cardView.xml layout
     

       <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        card_view:cardPreventCornerOverlap="false"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="2dp"
        card_view:contentPadding="10dp">
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/rel">
    
            <ImageView
                android:id="@+id/cardimage"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:scaleType="fitCenter"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="title"
                android:layout_marginLeft="10dp"
                android:textStyle="bold"
                android:textSize="20sp"
                android:id="@+id/cardtitle"
                android:layout_gravity="center_vertical"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>

    Step(4)-Created a new bin class

     public class Names
        {
            String name;
            int id;
    
            public Names(String name, int id) {
                this.name = name;
                this.id = id;
            }
            public String getName(){
                return name;
            }
            public void setName(String name) {
                this.name = name;
            }
            public int getId() {
                return id;
            }
            public void setId(int id) {
                this.id = id;
            }
        }


        Step(5)-Created a new CardAdapter class
       

     public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {
        List<Names> list = new ArrayList<>();
        public CardAdapter(List<Names> list) {
            this.list = list;
        }
        @Override
        public int getItemCount() {
            return list.size();
        }
        public Names getItem(int i) {
            return list.get(i);
        }
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.card_view, parent, false);
            return new ViewHolder(itemView);
        }
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            holder.Names =getItem(position);
            holder.cardtitle.setText(list.get(position).name);
        }
        @Override
        public void onAttachedToRecyclerView(RecyclerView recyclerView) {
            super.onAttachedToRecyclerView(recyclerView);
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
            ImageView cardimage;
            TextView cardtitle;
            Names Names;
            public ViewHolder(View itemView) {
                super(itemView);
                cardimage = (ImageView) itemView.findViewById(R.id.cardimage);
                cardtitle = (TextView) itemView.findViewById(R.id.cardtitle);
            }
        }
    }


    Step(6)MainActivity-
     

    public class MainActivity extends AppCompatActivity {
    
        //ui control
        Toolbar toolbar;
        CollapsingToolbarLayout collapsingToolbarLayout;
        RecyclerView recyclerView;
        FloatingActionButton floatingActionButton;
    
        CardAdapter adapter;
        List<Names> names;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            collapsingToolbarLayout = (CollapsingToolbarLayout)     findViewById(R.id.collapsing_toolbar);
            recyclerView=(RecyclerView)findViewById(R.id.recyclerView);
            toolbar = (Toolbar) findViewById(R.id.toolbar);
    
    
            setSupportActionBar(toolbar);
    
            //recyclerview
            LinearLayoutManager llm = new LinearLayoutManager(this);
            llm.setOrientation(LinearLayoutManager.VERTICAL);
            recyclerView.setLayoutManager(llm);
            recyclerView.setHasFixedSize(true);
    
            initializeData();
    
            adapter = new CardAdapter(names);
    
            //set adapter
            recyclerView.setAdapter(adapter);
    
        }
        private void initializeData() {
            names = new ArrayList<>();
            names.add(new Names("Raj", R.drawable.g1));
            names.add(new Names("Vikky", R.drawable.g2));
            names.add(new Names("Amit", R.drawable.g3));
            names.add(new Names("Omi", R.drawable.g4));
            names.add(new Names("Tarun", R.drawable.g6));
            names.add(new Names("Aman", R.drawable.g7));
            names.add(new Names("Shekhar", R.drawable.g8));
            names.add(new Names("Deepak", R.drawable.g9));
            names.add(new Names("Kapil", R.drawable.g1));
            names.add(new Names("Rohit", R.drawable.g2));
            names.add(new Names("Abhi", R.drawable.g4));
            names.add(new Names("Sandeep", R.drawable.g9));
        }
        @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);
        }
    }
    
    

     

 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: