AppBarLayout is a vertical LinearLayout which implements various material design scrolling gestures.if you are not aware of Material Design refer here.
AppBarLayout children should provide scrolling behaviour by setScrollFlags(int) or in XML by app:layout_scrollFlags=””
Note: AppBarLayout depends heavily on being used as a direct child of Coordinator layout if you used with other ViewGroup its most of the scrolling functionality will not work.
So, Lets start:-
- Add following dependencies in build.gradle to work with AppBarLayout
compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1'
- Create a layout containing AppBarLayout
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.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways|snap" android:background="#6495ED" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#6495ED" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
app:layout_behavior describes the scroll behaviour of view pager it starts scroll below tab layout.
3.Now create a layout for fragment to show items
about.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent"/>
4. Now create a layout for recyclerview items
listitems.xml
<?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:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="8dp" android:paddingBottom="8dp" android:gravity="center_vertical"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" card_view:cardCornerRadius="4dp" android:elevation="8dp" > <TextView android:id="@+id/itemname" android:layout_height="wrap_content" android:layout_width="match_parent" android:padding="8dp" /> </android.support.v7.widget.CardView> </LinearLayout>
5.Now create a fragment and adapter for view pager
about.java
package com.coderzpassion.constitution.constitutionofindia; import android.content.Context; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.ArrayList; /** * Created by coderzpassion on 05/04/16. */ public class About extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { RecyclerView recyclerView=(RecyclerView) inflater.inflate(R.layout.about,container,false); setUpRecyclerView(recyclerView); return recyclerView; } private void setUpRecyclerView(RecyclerView rv) { rv.setLayoutManager(new LinearLayoutManager(rv.getContext())); rv.setAdapter(new AboutUsAdapter(rv.getContext(), getListForItems())); } public ArrayList<String> getListForItems() { ArrayList<String> list =new ArrayList<>(); list.add("First Item"); list.add("Second Item"); list.add("Third Item"); list.add("Fourth Item"); list.add("Fifth Item"); list.add("Six Item"); list.add("Seven Item"); list.add("8 Item"); list.add("9 Item"); list.add("10 Item"); list.add("11 Item"); list.add("12 Item"); list.add("13 Item"); list.add("14 Item"); list.add("15 Item"); list.add("16 Item"); list.add("17 Item"); list.add("18 Item"); list.add("19 Item"); list.add("20 Item"); list.add("21 Item"); return list; } public static class AboutUsAdapter extends RecyclerView.Adapter<AboutUsAdapter.ViewHolder> { ArrayList<String> aboutlist=new ArrayList<>(); Context aboutuscontext; public static class ViewHolder extends RecyclerView.ViewHolder { public final TextView items; public ViewHolder(View view) { super(view); items=(TextView)view.findViewById(R.id.itemname); } } public AboutUsAdapter(Context context,ArrayList<String> list) { aboutuscontext=context; aboutlist=list; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.listitems, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.items.setText(aboutlist.get(position)); } @Override public int getItemCount() { return aboutlist.size(); } } }
6.Now create a MainActivity and code for AppBarLayout
MainActivity.java
package com.coderzpassion.constitution.constitutionofindia; import android.database.DataSetObserver; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.Adapter; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar); final ActionBar actionBar=getSupportActionBar(); actionBar.setDisplayHomeAsUpEnabled(false); ViewPager viewPager=(ViewPager)findViewById(R.id.viewpager); if(viewPager!=null) { setUpViewPager(viewPager); } TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(viewPager); } private void setUpViewPager(ViewPager viewPager) { Adapter adapter=new Adapter(getSupportFragmentManager()); adapter.addFragment(new About(),"Article 1"); adapter.addFragment(new About(),"Article 2"); adapter.addFragment(new About(),"Article 3"); viewPager.setAdapter(adapter); } @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); } static class Adapter extends FragmentPagerAdapter { private final List<Fragment> mFragments = new ArrayList<>(); private final List<String> mFragmentTitles = new ArrayList<>(); public Adapter(FragmentManager fm) { super(fm); } public void addFragment(Fragment fragment, String title) { mFragments.add(fragment); mFragmentTitles.add(title); } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitles.get(position); } } }
Output