Android: Contraer Linearlayout en lugar de Contraer barra de herramientas

Estoy tratando de crear una transacción Master / Detail en un solo fragmento. Pensé en usar LinearLayout como el contenedor de mi edittext para mi encabezado. A continuación, un RecyclerView para más detalles.

¿Cómo implementar el colapso / expansión de LinearLayout similar a la del efecto CollapsingToolbar?

Aquí hay una captura de pantalla de lo que estoy tratando de hacer.

Introduzca aquí la descripción de la imagen

Mi código xml hasta ahora.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:background="@color/colorAccent" android:padding="@dimen/activity_horizontal_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/ic_date_range_black_24dp" android:tint="@android:color/darker_gray" /> <android.support.v4.widget.Space android:layout_width="@dimen/activity_horizontal_margin" android:layout_height="wrap_content" /> <android.support.design.widget.TextInputLayout android:id="@+id/date_til" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Date"> <android.support.design.widget.TextInputEditText android:id="@+id/date" android:layout_width="match_parent" android:layout_height="wrap_content" android:cursorVisible="false" android:focusable="false" android:longClickable="false" /> </android.support.design.widget.TextInputLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/ic_store_black_24dp" android:tint="@android:color/darker_gray" /> <android.support.v4.widget.Space android:layout_width="@dimen/activity_horizontal_margin" android:layout_height="wrap_content" /> <android.support.design.widget.TextInputLayout android:id="@+id/store_til" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Store"> <android.support.design.widget.TextInputEditText android:id="@+id/store" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/ic_place_black_24dp" android:tint="@android:color/darker_gray" /> <android.support.v4.widget.Space android:layout_width="@dimen/activity_horizontal_margin" android:layout_height="wrap_content" /> <android.support.design.widget.TextInputLayout android:id="@+id/location_til" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:id="@+id/location" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Location" /> </android.support.design.widget.TextInputLayout> </LinearLayout> </LinearLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" app:layoutManager="LinearLayoutManager" tools:listitem="@layout/list_car" /> </LinearLayout> 

Además, no estoy seguro de si esto se puede hacer con el CollapsingToolbar ya que he visto sólo el colapso de ImageView en la barra de herramientas.

Aprecie cualquier ayuda.

ACTUALIZACIÓN: Básicamente lo que quiero hacer aquí es ser capaz de contraer la vista de cabecera al desplazarse hacia arriba. A continuación, expanda al desplazarse hacia abajo.

Puede usar un temporizador y reducir gradualmente la altura / margen de LinearLayout de la barra superior (Editar: faltas en la respuesta de Anton Maiorov se fija aquí)

Introduzca aquí la descripción de la imagen

Consulte el siguiente fragmento (probado en los dispositivos)

Enfoque I: la respuesta de Anton Maiorov , los defectos fijos, esto es mucho más simple que la segunda implementación a continuación

 public class MainActivity extends AppCompatActivity { LinearLayout toolbar; int mOriginalHeight; boolean initialSizeObtained = false; boolean isShrink = false; Animation _hideAnimation = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) toolbar.getLayoutParams(); params.topMargin = -(int) (mOriginalHeight * interpolatedTime); toolbar.setLayoutParams(params); } }; Animation _showAnimation = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) toolbar.getLayoutParams(); params.topMargin = (int) (mOriginalHeight * (interpolatedTime - 1)); toolbar.setLayoutParams(params); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (LinearLayout) findViewById(R.id.toolbar); //Get the original height, which is measured according to WRAP_CONTENT toolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { if (initialSizeObtained) return; initialSizeObtained = true; mOriginalHeight = toolbar.getMeasuredHeight(); } }); _hideAnimation.setDuration(2000); _showAnimation.setDuration(2000); } //Click on the Olimpic image --> Toggles the top toolbar public void ToggleTopBar(View view) { isShrink = !isShrink; toolbar.clearAnimation(); //Important toolbar.startAnimation(isShrink? _hideAnimation : _showAnimation); } } 

Enfoque II: mi respuesta original cambiando la altura de la barra de herramientas, y también usando el temporizador manualmente, que está más involucrado:

 public class MainActivity extends AppCompatActivity { LinearLayout toolbar; int mOriginalHeight; boolean initialSizeObtained = false; int currentHeight; boolean isShrink = false; Timer timer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (LinearLayout) findViewById(R.id.toolbar); toolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { if (initialSizeObtained) return; initialSizeObtained = true; mOriginalHeight = toolbar.getMeasuredHeight(); currentHeight = mOriginalHeight; Log.d("Demo", "Original height is " + mOriginalHeight); } }); } //Click on the Olimpic image --> Toggles the top toolbar public void ToggleTopBar(View view) { isShrink = !isShrink; Resize(isShrink, toolbar, 250); } void Resize(final boolean isShrink, final LinearLayout layout, final int minHeight) { final int H0 = mOriginalHeight; timer = runTimerAction(10, new Runnable() { public void run() { Log.d("demo", "Current Height= " + currentHeight); if (isShrink && currentHeight > minHeight) { currentHeight -= 10; layout.getLayoutParams().height = currentHeight; refreshToolbar(); } else if (!isShrink && currentHeight < H0) { currentHeight += 10; layout.getLayoutParams().height = currentHeight; refreshToolbar(); } else { layout.getLayoutParams().height = isShrink ? minHeight : H0; refreshToolbar(); if (timer != null) timer.cancel(); } } } ); } public void refreshToolbar() { runOnUiThread(new Runnable() { @Override public void run() { toolbar.requestLayout(); } }); } 

Mejoré mi respuesta usando el comentario de David.

Animaría "topMargin" de su cabecera:

 LinearLayout _headerLayout; // expected to be set in "onCreateView" int _headerHeight; // expected to be set in "onCreateView" as _headerHeight = getHeaderHeight(); Animation _hideAnimation = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) _headerLayout.getLayoutParams(); params.topMargin = -(int) (_headerHeight * interpolatedTime); _headerLayout.setLayoutParams(params); } }; Animation _showAnimation = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) _headerLayout.getLayoutParams(); params.topMargin = (int) (_headerHeight * (interpolatedTime - 1)); _headerLayout.setLayoutParams(params); } }; private int getHeaderHeight() { _headerLayout.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); return _headerLayout.getMeasuredHeight(); } 

Ocultar encabezado:

 _headerLayout.clearAnimation(); _headerLayout.startAnimation(_hideAnimation); 

Mostrar encabezado:

 _headerLayout.clearAnimation(); _headerLayout.startAnimation(_showAnimation); 

También puedes configurar fácilmente la duración de tus animaciones:

 _hideAnimation.setDuration(2000) // will hide in 2 seconds _showAnimation.setDuration(2000) // will show in 2 seconds 

Intentar esto agregé Coordinador y CollapsingToolbarLayput

 <?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" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="15dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorAccent" android:orientation="vertical" android:padding="@dimen/activity_horizontal_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/ic_date_range_black_24dp" android:tint="@android:color/darker_gray" /> <android.support.v4.widget.Space android:layout_width="@dimen/activity_horizontal_margin" android:layout_height="wrap_content" /> <android.support.design.widget.TextInputLayout android:id="@+id/date_til" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Date"> <android.support.design.widget.TextInputEditText android:id="@+id/date" android:layout_width="match_parent" android:layout_height="wrap_content" android:cursorVisible="false" android:focusable="false" android:longClickable="false" /> </android.support.design.widget.TextInputLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_store_black_24dp" android:layout_gravity="center" android:tint="@android:color/darker_gray" /> <android.support.v4.widget.Space android:layout_width="@dimen/activity_horizontal_margin" android:layout_height="wrap_content" /> <android.support.design.widget.TextInputLayout android:id="@+id/store_til" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Store"> <android.support.design.widget.TextInputEditText android:id="@+id/store" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/ic_place_black_24dp" android:tint="@android:color/darker_gray" /> <android.support.v4.widget.Space android:layout_width="@dimen/activity_horizontal_margin" android:layout_height="wrap_content" /> <android.support.design.widget.TextInputLayout android:id="@+id/location_til" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:id="@+id/location" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Location" /> </android.support.design.widget.TextInputLayout> </LinearLayout> </LinearLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:listitem="@layout/list_car" app:layoutManager="LinearLayoutManager" /> 

Espero que esto te ayude.

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.