To create this, we need 1 Activity and 3 Fragment s.
In Activity , TabLayout and a ViewPager will be placed ViewPager this:
<LinearLayout 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:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
Since we only need to perform the sliding behavior for the first Fragment , the first Fragment gets an XML layout, for example:
<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/appBarLayout" android:layout_width="match_parent" android:layout_height="400dp" android:orientation="vertical" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <com.google.android.gms.maps.MapView android:id="@+id/mapView" app:layout_collapseMode="parallax" android:layout_height="400dp" android:layout_width="match_parent" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>
You can do another Fragment , but you like that I just created fake data and a simple RecyclerView in another Fragment s.
Then call these views in your Activity and Fragment like this:
activity
public class MainActivity extends AppCompatActivity { private TabLayout mTabLayout; private ViewPager mViewPager; private SampleViewPagerAdapter mViewPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.another_activity); mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs); mViewPager = (ViewPager) findViewById(R.id.viewpager); mViewPagerAdapter = new SampleViewPagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mViewPagerAdapter); mTabLayout.setupWithViewPager(mViewPager); } }
ViewPager Adapter
public class SampleViewPagerAdapter extends FragmentPagerAdapter { public SampleViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return new MapFragment(); case 1: return new ScrollFragment(); case 2: return new ScrollFragment(); default: return new ScrollFragment(); } } @Override public int getCount() { return 3; } @Override public CharSequence getPageTitle(int position) { String[] tabNames = {"Stops", "Planner", "Alerts"}; return tabNames[position]; } }
Fragment of a card with a sliding RecyclerView
public class MapFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View root = inflater.inflate(R.layout.activity_main, null); initCollapsingToolbar(root);
Then you should get something like this:
Position setting:
You can programmatically collapse the toolbar ( CollapsingToolbarLayout ) using the following code:
public void collapseToolbar(){ CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mFrameLayout.getLayoutParams(); AppBarLayout.ScrollingViewBehavior behavior = (AppBarLayout.ScrollingViewBehavior) params.getBehavior(); if (behavior != null) { behavior.onNestedFling(rootLayout, appbarLayout, null, 0, 10000, true); } }
This means that when the user first sees the map, the map is partially minimized to your default state.