Establecer la altura de inicio de CollapsingToolbarLayout

Quiero poder desplazarme por el ImageView dentro de CollapsingToolbarLayout. Entonces, ¿cómo sería posible, y cómo establecer una altura inicial de esa vista de imagen?

Mi altura de ImageView es 280p, al comienzo de la actividad que quiero mostrar 200p y luego puedo desplazarme hacia abajo para ver el resto de la imagen. He visto algo similar en la aplicación de WhatsApp.

Aquí hay un enlace para ver lo que quiero:

Introduzca aquí la descripción de la imagen

Mi código :

<?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="com.example.yasser.version6.Profile"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:fitsSystemWindows="true" android:layout_height="@dimen/app_bar_height" android:layout_width="match_parent" android:theme="@style/MyMaterialTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="?attr/colorPrimary"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/tof" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" app:popupTheme="@style/MyMaterialTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include android:id="@+id/content" layout="@layout/content_profile" /> </android.support.design.widget.CoordinatorLayout> 

Código del perfil del contenido:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" app:layout_behavior="@string/appbar_scrolling_view_behavior" xmlns:card_view="http://schemas.android.com/apk/res-auto" tools:showIn="@layout/activity_profile" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.yasser.version6.Profile"> </android.support.v4.widget.NestedScrollView> 

Cheesesquare implementar su solicitud

Este es un diseño en cheesquare

 <?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginEnd="64dp"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingTop="24dp"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/card_margin"> <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Info" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/cheese_ipsum" /> </LinearLayout> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/card_margin" android:layout_marginLeft="@dimen/card_margin" android:layout_marginRight="@dimen/card_margin"> <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Friends" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/cheese_ipsum" /> </LinearLayout> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/card_margin" android:layout_marginLeft="@dimen/card_margin" android:layout_marginRight="@dimen/card_margin"> <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Related" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/cheese_ipsum" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:layout_height="wrap_content" android:layout_width="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" android:src="@drawable/ic_discuss" android:layout_margin="@dimen/fab_margin" android:clickable="true"/> </android.support.design.widget.CoordinatorLayout> 

En realidad AppBarLayout tiene un método especial para aplicar dicho desplazamiento:

 final int setAppBarTopBottomOffset(CoordinatorLayout coordinatorLayout, AppBarLayout appBarLayout, int newOffset, int minOffset, int maxOffset) 

Desafortunadamente, tiene un nivel de acceso de paquete privado, pero podemos invocarlo a través de una cadena intermedia como:

 private void setAppBarOffset(int offsetPx){ CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams(); AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior(); behavior.onNestedPreScroll(mCoordinatorLayour, mAppBarLayout, null, 0, offsetPx, new int[]{0, 0}); } 

Una cosa a ser mencionada – este método debe ser llamado después de mAppBarLayout ya está preparado y medido. Así que la forma correcta es llamarlo a través del método post de la vista.

 mCoordinatorLayour = (CoordinatorLayout) findViewById(R.id.root_coordinator); mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout); mAppBarLayout.post(new Runnable() { @Override public void run() { int heightPx = findViewById(R.id.iv_header).getHeight(); setAppBarOffset(heightPx/2); } }); 
  <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapse_toolbar" android:layout_width="match_parent" android:layout_height="@dimen/_240sdp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:orientation="vertical" android:scaleType="centerCrop" app:layout_collapseMode="parallax"> <ImageView android:id="@+id/ASD_banner_image" android:layout_width="match_parent" android:layout_height="@dimen/_150sdp" android:scaleType="fitXY" android:src="@drawable/banner1" /> <TextView android:id="@+id/ASD_restaurant_status" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:paddingTop="@dimen/_2sdp" android:paddingBottom="@dimen/_2sdp" android:layout_alignParentRight="true" android:layout_marginEnd="@dimen/_20sdp" android:layout_marginRight="@dimen/_20sdp" android:layout_marginTop="@dimen/_5sdp" android:background="@drawable/btn_green_bg" android:gravity="center" android:paddingLeft="@dimen/_5sdp" android:paddingRight="@dimen/_5sdp" android:text="open" android:textColor="@color/clr_white" android:textSize="@dimen/_10sdp" /> <RelativeLayout android:id="@+id/ASD_cardlayout" android:layout_width="match_parent" android:layout_height="@dimen/_100sdp" android:layout_marginLeft="@dimen/_20sdp" android:layout_marginRight="@dimen/_20sdp" android:layout_marginTop="@dimen/_100sdp" android:background="@drawable/btn_bg_white_withour_radius" android:elevation="@dimen/_5sdp" android:orientation="vertical"> <ImageView android:id="@+id/ASD_iconimage" android:layout_width="@dimen/_80sdp" android:layout_height="@dimen/_80sdp" android:layout_marginBottom="@dimen/_10sdp" android:layout_marginLeft="@dimen/_15sdp" android:layout_marginTop="@dimen/_10sdp" android:scaleType="fitXY" android:src="@drawable/ic_splash" /> <TextView android:id="@+id/ASD_shopname" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/_20sdp" android:layout_marginTop="@dimen/_10sdp" android:layout_toEndOf="@+id/ASD_iconimage" android:layout_toRightOf="@+id/ASD_iconimage" android:text="Shop name" android:textAllCaps="true" android:textColor="@color/clr_block" android:textSize="@dimen/TextSize_14" /> <TextView android:id="@+id/ASD_category" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/ASD_shopname" android:layout_marginLeft="@dimen/_20sdp" android:layout_toEndOf="@+id/ASD_iconimage" android:layout_toRightOf="@id/ASD_iconimage" android:text="category" android:textColor="@color/clr_gray" android:textSize="@dimen/TextSize_12" /> <TextView android:id="@+id/ASD_minorder" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/ASD_category" android:layout_marginLeft="@dimen/_20sdp" android:layout_toEndOf="@+id/ASD_iconimage" android:layout_toRightOf="@id/ASD_iconimage" android:text="Mins.Order" android:textColor="@color/clr_gray" android:textSize="@dimen/TextSize_12" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/ASD_minorder" android:layout_marginBottom="@dimen/_10sdp" android:layout_marginLeft="@dimen/_20sdp" android:layout_toRightOf="@+id/ASD_iconimage" android:orientation="horizontal"> <ImageView android:layout_width="@dimen/_20sdp" android:layout_height="@dimen/_20sdp" android:layout_marginEnd="@dimen/_5sdp" android:layout_marginRight="@dimen/_5sdp" android:scaleType="fitXY" android:src="@drawable/ic_kd_money" /> <ImageView android:layout_width="@dimen/_20sdp" android:layout_height="@dimen/_20sdp" android:layout_marginEnd="@dimen/_5sdp" android:layout_marginRight="@dimen/_5sdp" android:src="@drawable/ic_knet" /> <ImageView android:layout_width="@dimen/_20sdp" android:layout_height="@dimen/_20sdp" android:layout_marginEnd="@dimen/_5sdp" android:layout_marginRight="@dimen/_5sdp" android:src="@drawable/ic_visa" /> <ImageView android:layout_width="@dimen/_20sdp" android:layout_height="@dimen/_20sdp" android:layout_marginEnd="@dimen/_5sdp" android:layout_marginRight="@dimen/_5sdp" android:src="@drawable/ic_mastercard" /> </LinearLayout> </RelativeLayout> <RatingBar android:id="@+id/AVL_rating" style="?android:attr/ratingBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/ASD_cardlayout" android:layout_centerHorizontal="true" android:layout_marginTop="@dimen/_10sdp" android:isIndicator="true" android:numStars="5" android:rating="5.0" android:secondaryProgressTint="@color/clr_red" android:stepSize="1.0" /> <TextView android:id="@+id/ASD_rating_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/AVL_rating" android:layout_marginLeft="@dimen/_10sdp" android:layout_marginStart="@dimen/_10sdp" android:layout_toEndOf="@+id/AVL_rating" android:layout_toRightOf="@+id/AVL_rating" android:text="4000 KD" android:textColor="@color/clr_block" android:textSize="@dimen/TextSize_12" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="1dp" android:background="@android:color/transparent" android:gravity="top" android:minHeight="?attr/actionBarSize" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> 

Solo agrega:

 android:fitsSystemWindows="true" app:layout_collapseMode="parallax" 

Al ImageView en el CollapsingToolbarLayout.

Puedes encontrar más aquí .

  • ¿Cómo cambiar la propiedad y el tamaño de CollapsingToolbarLayout?
  • La expansión CollapsingToolbarLayout no funciona con RecyclerView
  • Problema con CoordinatorLayout y ImageView que ajusta el ancho mientras se desplaza
  • Problema de barra de estado de diseño de barra de herramientas de despliegue
  • ¿Qué es layout_collapseParallaxMultiplier utilizado en CollapsingToolbarLayout?
  • CollapsingToolbarLayout no funciona correctamente
  • Cheesesquare: enterAlways produce un diseño incorrecto
  • Las transiciones de elementos compartidos no funcionan cuando se combinan con un CoordinatorLayout y CollapsingToolbarLayout
  • La barra de herramientas no se muestra desde la barra de herramientas de contracción
  • CollapsingToolbarLayout setTitle () no se actualiza a menos que se colapse
  • CollapsingToolbarLayout y posición de botón de acción flotante dentro de CollapsingToolbarLayout
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.