Created
October 19, 2014 20:02
-
-
Save ManuelPeinado/561748b9fa42d3b25661 to your computer and use it in GitHub Desktop.
Fading action bar effect using the new Toolbar class from the support library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
I'm having the same issue with @ramswaroop, when I go back, the action opacity doesn't return to normal
@nathaliepl thanks for your help it solved my issue.In parent activity just needed to ad this code
public void onResume(){
super.onResume();
updateColor();
}
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void updateColor() {
toolbarBackgroundDrawable.setAlpha(255); // 0% of transparency
toolbar.setBackground(toolbarBackgroundDrawable);
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
FYI: It's also possible to use the
android.support.v4.widget.NestedScrollView
bundled in the support library instead ofcom.github.manuelpeinado.toolbartest.ObservableScrollView
.