SoFunction
Updated on 2025-03-09

Toolbar with ScrollView Sliding Transparency Gradient Effect Implemented in Android

Toolbar with ScrollView Sliding Transparency Gradient Effect Implemented in Android

1. Ideas:Listen to the ScrollView sliding event and constantly modify the transparency of the Toolbar

2. Pay attention

There was no (l) method before 6.0, so you need to customize the ScrollView to listen in onScrollChanged()

6.0 (23) There was no () method before, so we need to customize the ScrollView implementation. In order to prevent the Toolbar from covering the ScrollView, we set paddingTop for the ScrollView.

However, after ScrollView sets paddintTop, the Toolbar transparency becomes 0 and it will still occupy space. The solution is blank.

Set two properties for ScrollView:

 1〉.

android:clipToPadding="false" 

Indicates whether the drawing range of the control is not in padding. False means that the drawing of the space can be drawn into padding.

 2〉

android:clipChildren="false" 

Indicates whether the child control cannot exceed the padding area (for example: false: When ScrollView is sliding up, child can slide out of the padding area; true: When ScrollView is sliding up, child cannot slide out of the padding area)

The layout file is as follows:

<RelativeLayout xmlns:andro 
 xmlns:app="/apk/res-auto" 
 xmlns:tools="/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 < 
  android: 
  android:clipToPadding="false" 
  android:clipChildren="true" 
  android:paddingTop="?attr/actionBarSize" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
  <LinearLayout 
   android:orientation="vertical" 
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content"> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_blue_dark" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_green_light" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_orange_light" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_blue_dark" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_green_light" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_orange_light" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_blue_dark" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_green_light" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_orange_light" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_blue_dark" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_green_light" 
    /> 
   <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="400dp" 
    android:background="@android:color/holo_orange_light" 
    /> 
  </LinearLayout> 
 </> 
 <. 
  android: 
  android:layout_width="match_parent" 
  android:background="?attr/colorPrimary" 
  android:layout_height="?attr/actionBarSize" > 
 </.> 
</RelativeLayout> 

Three. Steps

1. Create a callback interface:

public interface TranslucentListener { 
/**
  * Transparency callback
  * @param alpha
  */ 
public void onTranslucent(float alpha); 
} 

2. Customize ScrollView to call back the TranslucentListener interface method in the onScrollChange method and pass back the value of alpha:

@Override 
protected void onScrollChanged(int l, int t, int oldl, int oldt) { 
 (l, t, oldl, oldt); 
 if (translucentListener!=null) { 
  //(alpha); 
 } 
} 

Worth calculating:

// alpha = the height of the slide out/(screenHeight/3);float heightPixels = getContext().getResources().getDisplayMetrics().heightPixels; 
float scrollY = getScrollY();//This value is greater than 0float alpha = 1-scrollY/(heightPixels/3);// 0~1 Transparency is 1~0//Selected herescreenHeightof1/3 yesalpha改变of速率 (根据你of需要你可以自己定义)

Finally, MainActivity

@Override 
public void onTranslucent(float alpha) { 
 (alpha); 
} 

The above is the gradient effect of Toolbar in Android introduced to you as ScrollView slide transparency with ScrollView. The editor will reply to you in time. Thank you very much for your support for my website!