Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fading action bar effect using the new Toolbar class from the support library
<FrameLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@null"
tools:context=".MainActivity">
<com.github.manuelpeinado.toolbartest.ObservableScrollView
android:id="@+id/scrollview"
android:text="@string/hello_world"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/header"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:adjustViewBounds="true"
android:src="@drawable/nyc" />
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?android:colorBackground"
android:padding="16dp"
android:text="@string/loren_ipsum" />
</LinearLayout>
</com.github.manuelpeinado.toolbartest.ObservableScrollView>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_gravity="top"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
package com.github.manuelpeinado.toolbartest;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.View;
import com.readystatesoftware.systembartint.SystemBarTintManager;
public class MainActivity extends ActionBarActivity implements OnScrollChangedCallback {
private Toolbar mToolbar;
private Drawable mActionBarBackgroundDrawable;
private View mHeader;
private int mLastDampedScroll;
private int mInitialStatusBarColor;
private int mFinalStatusBarColor;
private SystemBarTintManager mStatusBarManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mActionBarBackgroundDrawable = mToolbar.getBackground();
setSupportActionBar(mToolbar);
mStatusBarManager = new SystemBarTintManager(this);
mStatusBarManager.setStatusBarTintEnabled(true);
mInitialStatusBarColor = Color.BLACK;
mFinalStatusBarColor = getResources().getColor(R.color.primary_color_dark);
mHeader = findViewById(R.id.header);
ObservableScrollable scrollView = (ObservableScrollable) findViewById(R.id.scrollview);
scrollView.setOnScrollChangedCallback(this);
onScroll(-1, 0);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onScroll(int l, int scrollPosition) {
int headerHeight = mHeader.getHeight() - mToolbar.getHeight();
float ratio = 0;
if (scrollPosition > 0 && headerHeight > 0)
ratio = (float) Math.min(Math.max(scrollPosition, 0), headerHeight) / headerHeight;
updateActionBarTransparency(ratio);
updateStatusBarColor(ratio);
updateParallaxEffect(scrollPosition);
}
private void updateActionBarTransparency(float scrollRatio) {
int newAlpha = (int) (scrollRatio * 255);
mActionBarBackgroundDrawable.setAlpha(newAlpha);
mToolbar.setBackground(mActionBarBackgroundDrawable);
}
private void updateStatusBarColor(float scrollRatio) {
int r = interpolate(Color.red(mInitialStatusBarColor), Color.red(mFinalStatusBarColor), 1 - scrollRatio);
int g = interpolate(Color.green(mInitialStatusBarColor), Color.green(mFinalStatusBarColor), 1 - scrollRatio);
int b = interpolate(Color.blue(mInitialStatusBarColor), Color.blue(mFinalStatusBarColor), 1 - scrollRatio);
mStatusBarManager.setTintColor(Color.rgb(r, g, b));
}
private void updateParallaxEffect(int scrollPosition) {
float damping = 0.5f;
int dampedScroll = (int) (scrollPosition * damping);
int offset = mLastDampedScroll - dampedScroll;
mHeader.offsetTopAndBottom(-offset);
mLastDampedScroll = dampedScroll;
}
private int interpolate(int from, int to, float param) {
return (int) (from * param + to * (1 - param));
}
}
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="windowActionBar">false</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:fitsSystemWindows">true</item>
<item name="colorPrimary">@color/primary_color</item>
<item name="colorPrimaryDark">@color/primary_color_dark</item>
<item name="colorAccent">#f77</item>
</style>
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment