Collapsing Toolbar Layout With Viewpager

I am using CollapsingBarLayout with viewpager and the fragments of viewpager are having listview, gridview. Here is my code: <

Solution 1:

You need put your ViewPager inside AppBar section and setup layout_behavior :

<android.support.design.widget.AppBarLayout>>
    <android.support.design.widget.CollapsingToolbarLayout>
     // THIS VIEWS WILL BE COLLAPSED
    </android.support.design.widget.CollapsingToolbarLayout>

    // THIS VIEWS WILL BE PINNED
    <android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="match_parent"android:layout_height="300dp"app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager></android.support.design.widget.AppBarLayout>

If you using Fragments as children of ViewPager you need setup layout_behavior to each fragment inside ViewPager too.

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Solution 2:

collapsing toolbar with tabs using new material design support library

I used official collapsing toolbar feature of new material design support library.

here collapsed view height is 256dp and tabs height is 56dp

i made following path

i cut image into two parts one for collapsed view and one for tabs.

i cutted images according to dp to pixel sizes with high resolution drawable xxxhdpi and put into drawable folder so it will adjustable to all screen sizes

i have 2000x1246 image

top image 256dp= 2000x1024 pixel

bottom tab image 56dp= 2000x224 pixel

Here is the complete example with source code

Solution 3:

ListView and GridView are not equipped with NestedScrolling functions. And thats needed to work with the CollapsingToolbarLayout.

The easiest way to make it work, would be to change your ListView and GridView to RecyclerViews (RecyclerView implements NestedScrollingChild).

Solution 4:

i have achieved this i will put my code with the library used firstly this is the layout file

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/attraction_lay"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#f5f6f5"><RelativeLayoutandroid:id="@+id/bar"android:layout_width="match_parent"android:layout_height="47dp"><TextViewandroid:id="@+id/exp_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="16dp"android:text="See &amp; do"android:textColor="#1b7bba"android:textSize="17sp" /><RelativeLayoutandroid:id="@+id/relmenu"android:layout_width="40dp"android:layout_height="40dp"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"><ImageViewandroid:layout_width="17dp"android:layout_height="14dp"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"android:layout_marginBottom="17dp"android:layout_marginLeft="8dp"android:src="@drawable/menu_icon_blue" /></RelativeLayout><RelativeLayoutandroid:id="@+id/relsearch"android:layout_width="40dp"android:layout_height="40dp"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"><ImageViewandroid:layout_width="18dp"android:layout_height="18dp"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_marginBottom="17dp"android:layout_marginRight="8dp"android:src="@drawable/search_icon_blue" /></RelativeLayout></RelativeLayout><Viewandroid:id="@+id/div"android:layout_width="match_parent"android:layout_height="2px"android:layout_below="@+id/bar"android:background="#1b7bba" /><FrameLayoutandroid:id="@+id/layout_container"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/div"><ListViewandroid:id="@+id/listView"android:layout_width="match_parent"android:layout_height="wrap_content"android:clickable="true"android:divider="@null"android:focusable="false"android:focusableInTouchMode="false"android:listSelector="@android:color/transparent"android:scrollbars="none" /><FrameLayoutandroid:id="@+id/header"android:layout_width="match_parent"android:layout_height="290dp"android:layout_marginTop="0dp"android:orientation="vertical"><FrameLayoutandroid:id="@+id/images_header"android:layout_width="fill_parent"android:layout_height="250dp"android:layout_marginBottom="40dp"><android.support.v4.view.ViewPagerandroid:id="@+id/gallery"android:layout_width="fill_parent"android:layout_height="250dp"android:clickable="true"android:focusable="false"android:focusableInTouchMode="false"android:overScrollMode="never" /><RelativeLayoutandroid:id="@+id/gallery_back"android:layout_width="40dp"android:layout_height="60dp"android:layout_gravity="left|center_vertical"><ImageViewandroid:layout_width="20dp"android:layout_height="52dp"android:layout_alignParentLeft="true"android:layout_centerVertical="true"android:background="@drawable/arrow_back" /></RelativeLayout><RelativeLayoutandroid:id="@+id/gallery_next"android:layout_width="40dp"android:layout_height="60dp"android:layout_gravity="right|center_vertical"><ImageViewandroid:layout_width="20dp"android:layout_height="52dp"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:background="@drawable/arrow_next" /></RelativeLayout><Viewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginBottom="-150dp"android:layout_marginTop="170dp"android:background="@drawable/horizontal_gradient" /><TextViewandroid:id="@+id/pagenum"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right|bottom"android:layout_marginBottom="10dp"android:layout_marginRight="10dp"android:text="3/15"android:textColor="#FFF"android:textSize="14sp" /></FrameLayout><FrameLayoutandroid:id="@+id/header_text_layout"android:layout_width="match_parent"android:layout_height="@dimen/min_height_textheader_materiallike"android:layout_gravity="bottom"android:background="#FFF"><!--<TextView--><!--android:id="@+id/text_header"--><!--android:layout_width="match_parent"--><!--android:layout_height="wrap_content"--><!--android:layout_gravity="center_vertical"--><!--android:layout_marginLeft="70dp"--><!--android:text="ttttt"--><!--android:textColor="@android:color/white"--><!--android:textSize="18sp"--><!--android:textStyle="bold" />--><RelativeLayoutandroid:id="@+id/button_header"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_centerHorizontal="true"android:layout_centerVertical="true"android:layout_marginLeft="83dp"android:layout_marginRight="83dp"><RelativeLayoutandroid:id="@+id/photo"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:layout_weight="2.5"><ImageViewandroid:layout_width="17dp"android:layout_height="14dp"android:layout_centerInParent="true"android:background="@drawable/photo_blue_icon"

                            /></RelativeLayout><RelativeLayoutandroid:id="@+id/video"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="2.5"><ImageViewandroid:layout_width="14dp"android:layout_height="16dp"android:layout_centerInParent="true"android:background="@drawable/video_blue_icon" /></RelativeLayout><RelativeLayoutandroid:id="@+id/share"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="2.5"><ImageViewandroid:layout_width="15dp"android:layout_height="20dp"android:layout_centerInParent="true"android:background="@drawable/share_blue_icon" /></RelativeLayout><RelativeLayoutandroid:id="@+id/fav"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="2.5"><ImageViewandroid:layout_width="20dp"android:layout_height="19dp"android:layout_centerInParent="true"android:background="@drawable/fav_blue_icon" /></RelativeLayout></LinearLayout><Viewandroid:layout_width="match_parent"android:layout_height="2px"android:layout_alignParentBottom="true"android:background="#d7d7d7" /></RelativeLayout></FrameLayout></FrameLayout></FrameLayout>

and in the java code you should add this

  StikkyHeaderBuilder.ListViewBuilder.stickTo(mListView)
                .setHeader(R.id.header, (ViewGroup) contentView)
                .minHeightHeaderDim(R.dimen.min_height_textheader_materiallike)
                .animator(new ParallaxStikkyAnimator())
                .attatch_Acitivty(Attractions.this)
                .castTo("Attractions")
                .build();

and here is the library used

but i have modified this library to work as i want

the modification is add method in stcikylistview builder to know the activity used and pass a delegate for scrolling i used this because i added a blur for images in the viewpager

and her is my modification

i will upload the modified version of the library here you are https://drive.google.com/file/d/0BxdN8PyW5nmHMmFFeFY2aW9zdlk/view?usp=sharing

Solution 5:

I had this issue as well. You'll need to used RecyclerView. Now I understand you must use ListView and GridGiew, but you can use that within a RecyclerView.

For example, I'll show you how to implement a GridLayout within in a RecyclerView.

In your fragment layout (that you'd want to implement GridView in), add the following XML

<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/recyclerviewGRID"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

Then on your fragment java,

on your fragment onCreateView, define the RecyclerView,

RecyclerViewrv= (RecyclerView) v.findViewById(R.id.recyclerviewGRID);
setupRecyclerView(rv);

Create the method setupRecyclerView,

privatevoidsetupRecyclerView(RecyclerView recyclerView) {
        recyclerView.setHasFixedSize(true);

            recyclerView.setLayoutManager(newGridLayoutManager(recyclerView.getContext(), 2));
            mAdapter = newAdapterGridView(getActivity().getApplicationContext(), mItems);
            recyclerView.setAdapter(mAdapter);

    }

You must define mAdapter as RecyclerView.Adapter first. Then create your the adapter for the RecyclerView. Note that, mItems is an ArrayList that will contain contents of your list.

AdapterGridView.java

publicclassAdapterGridViewextendsRecyclerView.Adapter<AdapterGridView.ViewHolder> {

    ArrayList<AdItem> mItems;
    Context context, contxt;

    publicAdapterGridView(Context context, ArrayList<AdItem> mItems) {
        this.context = context;
        this.mItems = mItems;
    }

    @Overridepublic ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {

//attach your list item layout here, mine in this case is called list_item_grid_itemViewv= LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.list_item_grid_item, viewGroup, false);
        ViewHolderviewHolder=newViewHolder(v);
        return viewHolder;
    }

    @OverridepublicvoidonBindViewHolder(ViewHolder viewHolder, int i) {
AdItemsingleItem= mItems.get(i);

//attach data to your layout as the following manner
viewHolder.tvspecies.setText(singleItem.getName());

    }

    @OverridepublicintgetItemCount() {

//return the number of list itemsreturn mItems.size();
    }

    classViewHolderextendsRecyclerView.ViewHolder implementsView.OnClickListener{

        public ImageView imgThumbnail, avatar;
        public TextView tvspecies, adIDLBL;


        publicViewHolder(View itemView) {
            super(itemView);
            itemView.setClickable(true);
            itemView.setOnClickListener(this);

//define your list item views, basically the stuff in list_item_grid_item
            imgThumbnail = (ImageView)itemView.findViewById(R.id.img_thumbnail);
            tvspecies = (TextView)itemView.findViewById(R.id.tv_species);

        }

        @OverridepublicvoidonClick(View v) {
            //handle item click events
        }
    }
}