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
Retrieve Google Access Token After Authenticated Using Firebase Authentication
Camera Tutorial for Android (Using Surfaceview)
Android Vector Drawable App:Srccompat Not Showing Images
How to Get the Current Location in Google Maps Android API V2
Converting Activity into Fragment
Intent - If Activity Is Running, Bring It to Front, Else Start a New One (From Notification)
Auto-Scrolling Textview in Android to Bring Text into View
Set Android Ip,Dns,Gateway Setting Programmatically
What Method Should I Use Now Since Firebaseinstanceid.Getinstance().Gettoken() Is Deprecated
Difference Between Ontouch and Onclick Android
How to Make the Text Direction from Right to Left
What's Better? Notifydatasetchanged or Notifyitemchanged in Loop
Android Gcm: Same Sender Id for More Application
Android Webview Loading Data Performance Very Slow
Share Image and Text Through Whatsapp or Facebook
Session 'App': Error Launching Activity
Textinputlayout Not Showing Edittext Hint Before User Focus on It