Как добавить изображение в фрагмент, с эффектом параллакса?

Question

Я пытаюсь добавить изображение в верхней части фрагмента, он должен иметь эффект параллакса при прокрутке для просмотра деталей изображения.

Something like this

Я попытался это с помощью разборной панели инструментов, но проблема в том, что изображение не заполняя всю панель оставляя пустое пространство на вбок, если изображение находится в портретном режиме. а также параллакса нет.

Это xml-код того, что я делал до сих пор.

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/coordinatorlayout" 
    android:layout_width="fill_parent" 
    android:layout_height="match_parent" 
    app:expandedTitleMarginStart="70dp"> 

    <android.support.design.widget.AppBarLayout 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     android:layout_width="fill_parent" 
     android:id="@+id/actionbarlayout" 
     android:layout_height="207dp"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/CollapsingToolbarLayout1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:contentScrim="@color/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      > 

      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:id="@+id/details_Image" 
       app:layout_collapseMode="parallax" 
       /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar1" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
       app:layout_collapseMode="pin" 
       android:minHeight="?attr/actionBarSize"/> 

     </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" 
     android:fillViewport="true" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 



     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 

      <android.support.v7.widget.CardView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       card_view:cardElevation="3dp" 
       card_view:cardCornerRadius="7dp" 
       android:layout_margin="5dp" 
       android:id="@+id/new_order" 
       card_view:cardBackgroundColor="@color/cardview_shadow_end_color" 
       > 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="vertical"> 

        <RelativeLayout 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content"> 

         <LinearLayout 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:gravity="center" 
          android:orientation="horizontal" 
          android:layout_marginTop="15dp"> 

          <RelativeLayout 
           android:layout_width="match_parent" 
           android:layout_height="match_parent" 
           android:layout_weight="1"> 

           <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/download" 
            android:background="@null" 
            android:src="@drawable/ic_action_ic_file_download_white_36dp" 
            android:layout_centerInParent="true" 
            /> 

          </RelativeLayout> 
          <RelativeLayout 
           android:layout_width="match_parent" 
           android:layout_height="match_parent" 
           android:layout_weight="1"> 

           <ImageView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/favourite" 
            android:layout_centerInParent="true" 
            /> 

          </RelativeLayout> 
          <RelativeLayout 
           android:layout_width="match_parent" 
           android:layout_height="match_parent" 
           android:layout_weight="1"> 


           <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/zoom" 
            android:background="@null" 
            android:src="@drawable/ic_action_ic_zoom_out_map_white_36dp" 
            android:layout_centerInParent="true" 
            /> 

          </RelativeLayout> 



         </LinearLayout> 

        </RelativeLayout> 

        <ScrollView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_margin="20dp"> 

         <TextView 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:id="@+id/imageDescription" 
          android:text="Sample text" 

          /> 



        </ScrollView> 


       </LinearLayout> 

      </android.support.v7.widget.CardView> 

     </LinearLayout> 

    </android.support.v4.widget.NestedScrollView> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:visibility="gone" 
     android:id="@+id/fullimage"/> 

</android.support.design.widget.CoordinatorLayout> 

This is what it looks like now.

Пожалуйста, предложите мне, какие изменения мне нужно сделать для того, чтобы достичь того, что я хочу, спасибо большое заранее.

Answer 1

Использование android:scaleType="centerCrop" для ImageView