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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 441
    Comment on it

    In the below example I have created Collapsing Toolbar function. Here I have created CoordinatorLayout and created all layout in CoordinatorLayout. Now I have added AppBarLayout, CollapsingToolbarLayout, ImageView, Toolbar, RecyclerView and FloatingActionButton. Now I have created CardView.xml layout here I have added CardView. Next step I have created CardAdapter class for using recyclerview & cardview. In cardAdapter I have also used Toast function to get item Position. In next step I have created Collepse class for set recycler view item name and id. In MainActivity I have used setOnClickListener for floatingActionButton. You can see below program it will clearly describe How to create CollapsingToolbar function.

    Step(1)-main_activity.xml layout-

    <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"
                pp: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/nature"
                    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.FloatingActionButton
                  android:id="@+id/fab"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_margin="16dp"
                  android:clickable="true"
                  android:src="@drawable/ic_edit"
                  app:layout_anchor="@id/recyclerView"
                  app:layout_anchorGravity="bottom|right|end" />
          </android.support.design.widget.CoordinatorLayout>

     

    Step(2)-Created card_view.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(3)- Adding Support Library in build.graddle file-

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


    Step(4)- Created Collepse class-

     public class Collepse {
    
            String name;
            int id;
            public Collepse(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 CardAdapter class-

    public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {
        ImageView imageView;
        LinearLayout rel;
        List<Collepse> list = new ArrayList<>();
    
        public CardAdapter(List<Collepse> list) {
            this.list = list;
        }
        @Override
        public int getItemCount() {
            return list.size();
        }
        public Collepse 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.Collepse=getItem(position);
            holder.cardtitle.setText(list.get(position).name);
            holder.cardimage.setImageResource(list.get(position).id);
        }
        @Override
        public void onAttachedToRecyclerView(RecyclerView recyclerView) {
            super.onAttachedToRecyclerView(recyclerView);
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
            ImageView cardimage;
            TextView cardtitle;
            Collepse Collepse;
            ImageView image;
            LinearLayout rel;
            CollapsingToolbarLayout collapsing_toolbar;
            public ViewHolder(final View itemView) {
                super(itemView);
                collapsing_toolbar =(CollapsingToolbarLayout)itemView.findViewById(R.id.collapsing_toolbar);
    
                cardimage = (ImageView) itemView.findViewById(R.id.cardimage);
                image=(ImageView)itemView.findViewById(R.id.image);
                cardtitle = (TextView) itemView.findViewById(R.id.cardtitle);
                rel=(LinearLayout)itemView.findViewById(R.id.rel);
                rel.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v  ) {
                        Toast.makeText(itemView.getContext(), "Position:" + Integer.toString(getPosition()), Toast.LENGTH_SHORT).show();
                        
    
                    }
                });        }
        }
    }

     


    Step(6)-MainActivity

    public class MainActivity extends AppCompatActivity {
    
            //ui control
            Toolbar toolbar;
            CollapsingToolbarLayout collapsingToolbarLayout;
            RecyclerView recyclerView;
            FloatingActionButton floatingActionButton;
            CardAdapter adapter;
            List<Collepse> collepse;
            CardView cardView;
            ImageView image;
    
            @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);
                floatingActionButton=(FloatingActionButton)findViewById(R.id.fab);
                image = (ImageView)findViewById(R.id.image);
    
                collapsingToolbarLayout.setTitle("Demo");
                setSupportActionBar(toolbar);
    
    
                //recyclerview
                LinearLayoutManager llm = new LinearLayoutManager(this);
                llm.setOrientation(LinearLayoutManager.VERTICAL);
                recyclerView.setLayoutManager(llm);
                recyclerView.setHasFixedSize(true);
    
                initializeData();
    
           
                //set adapter
                recyclerView.setAdapter(adapter);
                floatingActionButton.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Snackbar.make(v, "You clicked on the fab", Snackbar.LENGTH_SHORT).show();
                    }
                });
            }
            private void initializeData() {
                collepse = new ArrayList<>();
                collepse.add(new Collepse("London", R.drawable.three));
                collepse.add(new Collepse("Japan 2", R.drawable.four));
                collepse.add(new Collepse("India 3", R.drawable.five));
                collepse.add(new Collepse("USA 4", R.drawable.six));
                collepse.add(new Collepse("France 5", R.drawable.seven));
                collepse.add(new Collepse("China 6", R.drawable.eight));
                collepse.add(new Collepse("Dubai 7", R.drawable.nine));
                collepse.add(new Collepse("Russia 8", R.drawable.ten));
    
    
            }
    
    
            @Override
            public boolean onCreateOptionsMenu(Menu menu) {
                getMenuInflater().inflate(R.menu.menu_main, menu);
                return true;
            }
            @Override
            public boolean onOptionsItemSelected(MenuItem item) {
              
                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: