How to Make a Actionbar Like Google Play That Fades in When Scrolling

How to implement an ActionBar scroll animation like in Google Search?

I created a simple example of how it can be done. I did not optimize anything just threw some things together to see if it would work. You may need to play around with somethings to get it the way you want it. Although this is not optimized, it seems to perform better than the current search app.

Here is a GIF of what it looks like

Here is the code:

public class ScrollingActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {

LinearLayout titleContainer;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_24dp);
final AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
titleContainer = (LinearLayout) findViewById(R.id.titleContainer);
appBarLayout.addOnOffsetChangedListener(this);
}

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
int maxScroll = appBarLayout.getTotalScrollRange();
float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;
float holderAlpha = 1f - percentage;
titleContainer.setAlpha(holderAlpha);
}
}

xml

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="h.eugene.com.testingtoolbar.ScrollingActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="230dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay"
app:elevation="0dp">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="16dp"
app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/images"
app:layout_collapseMode="parallax" />

<View
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="end|bottom"
android:background="?attr/colorPrimary" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_scrolling" />

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

Next Part of xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
app:behavior_overlapTop="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="h.eugene.com.testingtoolbar.ScrollingActivity"
tools:showIn="@layout/activity_scrolling">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
android:orientation="vertical">

<LinearLayout
android:id="@+id/titleContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:orientation="vertical"
android:paddingBottom="16dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:text="Testing Pt1"
android:textColor="@android:color/white" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="32dp"
android:text="Testing Pt2"
android:textColor="@android:color/white" />
</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#eee"
android:padding="@dimen/text_margin"
android:text="@string/large_text" />

</LinearLayout>

</android.support.v4.widget.NestedScrollView>

Android: Creating an Item Fade Animation when Scrolling (Example Included)

For anyone else looking for this specific effect. It's known as a Parallax effect. Check this link:

How to do the new PlayStore parallax effect

How overlay an image on scrolling android

check out this one may help you https://github.com/ksoichiro/Android-ObservableScrollView

Android: Make Actionbar overlap Activity layout

You are probably looking for the ActionBar overlay mode. Enable it for a single Activity by calling requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY); before setContentView(). Or in a theme by setting android:windowActionBarOverlay to true.



Related Topics



Leave a reply



Submit