Skip to content

Commit

Permalink
Parallax Header with Tabs
Browse files Browse the repository at this point in the history
On scroll Parallax Header with ViewPager
  • Loading branch information
Suleiman19 committed Sep 14, 2015
1 parent d799059 commit 45a6519
Show file tree
Hide file tree
Showing 9 changed files with 298 additions and 11 deletions.
13 changes: 8 additions & 5 deletions MaterialSample/app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.suleiman.material" >
package="com.suleiman.material">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/MyTheme" >
android:theme="@style/MyTheme">
<activity
android:name=".activities.LaunchScreenActivity"
android:label="@string/app_name" >
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

Expand Down Expand Up @@ -51,8 +51,11 @@
android:label="@string/title_activity_reveal_animation" />
<activity
android:name=".activities.GmailStyleActivity"
android:label="@string/title_activity_gmail_style" >
</activity>
android:label="@string/title_activity_gmail_style" />
<activity
android:name=".activities.TabsHeaderActivity"
android:label="@string/title_activity_tabs_header"
android:theme="@style/MyTheme.Detail" />
</application>

</manifest>
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.suleiman.material.activities;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
Expand Down Expand Up @@ -90,7 +91,7 @@ private void setupViewPager(ViewPager viewPager) {

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
getMenuInflater().inflate(R.menu.menu_tab_switch, menu);
return true;
}

Expand All @@ -100,7 +101,9 @@ public boolean onOptionsItemSelected(MenuItem item) {
case android.R.id.home:
finish();
return true;
case R.id.action_settings:
case R.id.action_switch:
Intent intent = new Intent(TabAnimationActivity.this, TabsHeaderActivity.class);
startActivity(intent);
return true;
}
return super.onOptionsItemSelected(item);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
package com.suleiman.material.activities;

import android.annotation.SuppressLint;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
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.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.Toast;

import com.suleiman.material.R;
import com.suleiman.material.adapter.SimpleRecyclerAdapter;
import com.suleiman.material.model.VersionModel;

import java.util.ArrayList;
import java.util.List;

public class TabsHeaderActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs_header);

final Toolbar toolbar = (Toolbar) findViewById(R.id.htab_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Parallax Tabs");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

final ViewPager viewPager = (ViewPager) findViewById(R.id.htab_viewpager);
setupViewPager(viewPager);


TabLayout tabLayout = (TabLayout) findViewById(R.id.htab_tabs);
tabLayout.setupWithViewPager(viewPager);

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.htab_collapse_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);

ImageView header = (ImageView) findViewById(R.id.header);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.header);

Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@SuppressWarnings("ResourceType")
@Override
public void onGenerated(Palette palette) {

int vibrantColor = palette.getVibrantColor(R.color.primary_500);
int vibrantDarkColor = palette.getDarkVibrantColor(R.color.primary_700);
collapsingToolbarLayout.setContentScrimColor(vibrantColor);
collapsingToolbarLayout.setStatusBarScrimColor(vibrantDarkColor);
}
});

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {

viewPager.setCurrentItem(tab.getPosition());

switch (tab.getPosition()) {
case 0:
showToast("One");
break;
case 1:
showToast("Two");

break;
case 2:
showToast("Three");

break;
}
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
}


void showToast(String msg) {
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}

private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new DummyFragment(getResources().getColor(R.color.accent_material_light)), "CAT");
adapter.addFrag(new DummyFragment(getResources().getColor(R.color.ripple_material_light)), "DOG");
adapter.addFrag(new DummyFragment(getResources().getColor(R.color.button_material_dark)), "MOUSE");
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) {
switch (item.getItemId()) {
case android.R.id.home:
finish();
return true;
case R.id.action_settings:
return true;
}
return super.onOptionsItemSelected(item);
}

static class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();

public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}

@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}

@Override
public int getCount() {
return mFragmentList.size();
}

public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}

@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}

public static class DummyFragment extends Fragment {
int color;
SimpleRecyclerAdapter adapter;

public DummyFragment() {
}

@SuppressLint("ValidFragment")
public DummyFragment(int color) {
this.color = color;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.dummy_fragment, container, false);

final FrameLayout frameLayout = (FrameLayout) view.findViewById(R.id.dummyfrag_bg);
frameLayout.setBackgroundColor(color);

RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.dummyfrag_scrollableview);

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity().getBaseContext());
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.setHasFixedSize(true);

List<String> list = new ArrayList<String>();
for (int i = 0; i < VersionModel.data.length; i++) {
list.add(VersionModel.data[i]);
}

adapter = new SimpleRecyclerAdapter(list);
recyclerView.setAdapter(adapter);

return view;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ protected void onCreate(Bundle savedInstanceState) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
getWindow().setStatusBarColor(getResources().getColor(R.color.black_trans80));
getWindow().setStatusBarColor(getResources().getColor(R.color.black_trans80,null));

statusBarHeight = Utils.getStatusBarHeight(this);
isStatusBarTransparent = true;
Expand Down
60 changes: 60 additions & 0 deletions MaterialSample/app/src/main/res/layout/activity_tabs_header.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:id="@+id/htab_appbar"
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/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:id="@+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar
android:id="@+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp" />

<android.support.design.widget.TabLayout
android:id="@+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="@android:color/white" />

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>
9 changes: 6 additions & 3 deletions MaterialSample/app/src/main/res/menu/menu_main.xml
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.suleiman.material.activities.GmailStyleActivity">
<item android:id="@+id/action_settings" android:title="@string/action_settings"
android:orderInCategory="100" app:showAsAction="never" />
tools:context="com.suleiman.material.activities.TabsHeaderActivity">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
</menu>
10 changes: 10 additions & 0 deletions MaterialSample/app/src/main/res/menu/menu_tab_switch.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.suleiman.material.activities.TabsHeaderActivity">

<item
android:id="@+id/action_switch"
android:title="Switch"
app:showAsAction="ifRoom" />
</menu>
1 change: 1 addition & 0 deletions MaterialSample/app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@
<string name="title_activity_reveal_animation">Reveal Animation</string>
<string name="title_activity_launch_screen">LaunchScreenActivity</string>
<string name="title_activity_gmail_style">Gmail List</string>
<string name="title_activity_tabs_header">Header Tabs</string>
</resources>
4 changes: 4 additions & 0 deletions MaterialSample/app/src/main/res/values/styles.xml
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
<item name="overlapAnchor">true</item>
</style>

<style name="CollapsedTitleSpaceFix" parent="Base.TextAppearance.AppCompat.Title">
<item name="android:layout_marginTop">23dp</item>
</style>

<style name="MyTheme.Detail" parent="MyTheme"></style>

</resources>

0 comments on commit 45a6519

Please sign in to comment.