Wie fügt man ein Bild in einem Fragment mit Parallax-Effekt hinzu?

Question

Ich versuche, ein Bild an der Spitze eines Fragments hinzuzufügen, sollte es Parallax-Effekt beim Scrollen haben, um Bilddetails anzuzeigen.

Something like this

Ich habe versucht, dies mit zusammenklappbar Symbolleiste zu bekommen, aber das Problem ist, dass das Bild nicht die ganze Werkzeugleiste füllt auf seitlich Leerzeichen zu verlassen, sollte das Bild im Hochformat ist. und auch keine Parallaxe ist da.

Dies ist der XML-Code von dem, was ich bisher gemacht habe.

<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.

Bitte empfehlen Sie mir, welche Änderungen ich, um zu brauchen, um zu erreichen, was ich will, ich danke Ihnen sehr viel fortschrittlicher.

Answer 1

android:scaleType="centerCrop" Verwenden der ImageView