I am trying to change height of android appBarLayout to make effect like this (example is from iOS but I am trying to do similar things in android):
When we scroll up appBar height of appBar should decrese and picture should scaled.
Example 1: http://take.ms/nxVJ7
Example 2: http://take.ms/jXQst
After some research and several attemptes I have some progress, but I have no idea what to do next.
This is my activity_profile:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
android:theme="@style/AppTheme.AppBarOverlay"
android:minHeight="250dp"
app:elevation="0dp"
app:layout_behavior=".utils.behaviors.DisappearBehavior"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<TextView
android:id="@+id/title"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:id="@+id/app_bar_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp">
<TextView
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="online"/>
<ImageButton
android:id="@+id/edit_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="@drawable/button_circle"
android:src="@drawable/ic_edit"
android:tint="@color/colorPrimary"
android:visibility="gone"/>
<ImageView
android:id="@+id/vip_status_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/status"
android:src="@drawable/ic_vip"
android:tint="@color/colorPrimary"/>
</RelativeLayout>
<ImageView
android:id="@+id/avatar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_avatar_placeholder"
android:adjustViewBounds="true"
android:layout_weight="1"/>
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="Демин Сергей"
android:textColor="@color/colorBlack"
android:textSize="18sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@drawable/ic_avatar_placeholder"
/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@drawable/ic_avatar_placeholder"
/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@drawable/ic_avatar_placeholder"
/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/frame_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
app:layout_behavior="@string/appbar_scrolling_view_behavio">
<ProgressBar
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible"/>
<android.support.v4.widget.NestedScrollView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
And DisappearBehavior:
public class DisappearBehavior extends CoordinatorLayout.Behavior<AppBarLayout> {
public DisappearBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onStartNestedScroll(
CoordinatorLayout coordinatorLayout, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes) {
if (nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL) {
return true;
} else {
return false;
}
}
@Override
public void onNestedPreScroll(
CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed) {
consumed = new int[2];
consumed[1] = dy;
ViewGroup.LayoutParams params = child.getLayoutParams();
Log.d("Behavior", "dy = " + dy);
params.height -= dy;
child.setLayoutParams(params);
}
@Override
public void onNestedScroll(
CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dxConsumed, int dyConsumed,
int dxUnconsumed,
int dyUnconsumed) {
ViewGroup.LayoutParams params = child.getLayoutParams();
child.setLayoutParams(params);
int xxx = child.getBottom();
Log.d("Behavior", "height = " + params.height + " " + xxx);
}
@Override
public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target) {
super.onStopNestedScroll(coordinatorLayout, child, target);
ViewGroup.LayoutParams params = child.getLayoutParams();
child.setLayoutParams(params);
int xxx = child.getBottom();
Log.d("Behavior", "stop height = " + params.height + " " + xxx);
}
}
In the result I have effect when both appBarLayout and FrameLayout with content scrolling simultaneously (I'll try to add images if I'll found a way how to do it. I need more than 10 reputation. image3, image4). Also there is some starnge effect. When you scroll up (for example) slowly you could see text on screen moving up and the again down. Smth like quake effect.
As you see I have logs in the code and they says me that dy is positive and negative when I scroll in one direction. Log for slow up scroll for example:
dy = 42
height = 924 1026
dy = -36
height = 960 984
dy = 43
height = 917 1020
dy = -37
height = 954 977
dy = 42
height = 912 1014
dy = -36
height = 948 972
dy = 48
height = 808 916
dy = -44
height = 852 868
dy = 46
height = 806 912
dy = -46
height = 852 866
stop height = 852 866
I understand that all problems come AppBarLayout$ScrollingViewBehavior but I do not understand what to change.
