layout di barra degli strumenti compresso come google play store

Voglio creare un layout di barra degli strumenti compresso come Google Play Store. in questo modo: https://sendvid.com/ugjspx8r layout di barra degli strumenti compresso come google play store

e qui è il mio layout: http://sendvid.com/s4mx3xem

come posso farlo con la nuova libreria di supporto Android?

qui è il mio layout di file xml:

<android.support.design.widget.CoordinatorLayout 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:focusableInTouchMode="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appBarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/seffafCollapsingToolbarLayout" 
      android:layout_width="match_parent" 
      android:layout_height="240dp" 
      app:expandedTitleMarginEnd="164dp" 
      app:expandedTitleMarginStart="148dp" 
      app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

      <ImageView 
       android:id="@+id/header" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 
       android:src="@drawable/haber_icerik_resim" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/haber_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:theme="@style/ToolbarColoredBackArrow" 
       app:layout_collapseMode="pin" 
       app:layout_scrollFlags="scroll|enterAlways"/> 

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



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


    <android.support.v7.widget.RecyclerView 
     android:id="@+id/newsRecyclerView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scrollbars="vertical" 
     android:clickable="true" 
     android:background="@color/mainBackground" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

fonte

2015-09-14 cimenmus

Eventuali duplicati di [Overlap scorrimento vista con AppBarLayout] (http://stackoverflow.com/questions/31039074/overlap-scrolling-view-with-appbarlayout) – bummi

View all'interno CollapsingToolbarLayout non c'è bisogno di impostare app: layout_scrollFlags. Nessun effetto. Base sul mio codice, il cambiamento app: layout_scrollFlags in CollapsingToolbarLayout a "app: layout_scrollFlags =" scroll | enterAlways | enterAlwaysCollapsed" e impostare MinHeight per esso

Come la vostra barra degli strumenti è. "Pin", in modo da enterAlwaysCollapsed chiamerà quando si scorre verso il basso.

<android.support.design.widget.CoordinatorLayout 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:focusableInTouchMode="true"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appBarLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/seffafCollapsingToolbarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="240dp" 
     android:minHeight="?attr/actionBarSize" 
     app:expandedTitleMarginEnd="164dp" 
     app:expandedTitleMarginStart="148dp" 
     app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

     <ImageView 
      android:id="@+id/header" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:src="@drawable/haber_icerik_resim" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/haber_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:theme="@style/ToolbarColoredBackArrow" 
      app:layout_collapseMode="pin"/> 

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

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


<android.support.v7.widget.RecyclerView 
    android:id="@+id/newsRecyclerView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:scrollbars="vertical" 
    android:clickable="true" 
    android:background="@color/mainBackground" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

fonte

2015-10-01 17:29:55

ti ho detto: https://sendvid.com/1k8ukqse ma non è corretto voglio. voglio proprio come la barra degli strumenti di Google Play Store. nella mia app la barra degli strumenti fa parte dell'immagine ma in Google Play la barra degli strumenti non fa parte dell'immagine, è verde. penso che ci dovrebbero essere due barre degli strumenti: quella trasparente; mostrerà quando viene mostrata l'immagine. e il secondo (quello verde); mostrerà quando l'immagine non viene mostrata e scorre verso il basso. ma non so come farlo. – cimenmus

aggiungi app: contentScrim = "? Attr/colorPrimary" al tuo collasso alla barra di navigazione. Non è necessaria la presenza di due barre degli strumenti per implementare questo effetto. –

@tongluencheah con contentscrim il colorprimary prende l'altezza più dell'altezza della barra degli strumenti. Sto anche cercando un comportamento esattamente come il playstore. L'altezza del colorprimary dovrebbe corrispondere esattamente all'altezza della barra degli strumenti, quindi se è necessario scorrere ulteriormente verso il basso, l'immagine dovrebbe essere visibile. – isudansh

Ecco il codice funziona, che cosa avete bisogno.

<?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.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/detail_backdrop_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <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="48dp" 
      app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

      <ImageView 
       android:id="@+id/backdrop" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:layout_scrollFlags="scroll|enterAlways|snap" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

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

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

    <fragment 
     android:name="com.support.android.designlibdemo.CheeseListFragment" 
     class="com.support.android.designlibdemo.CheeseListFragment" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

E qui è l'attività

public class SampleActivity extends AppCompatActivity { 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_sample); 
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 
    } 
}

Spero che questo risolverà il vostro problema. Per favore fatemi sapere, se avete bisogno di ulteriore aiuto !!!

fonte

2016-01-07 08:42:38

Ok, il tuo codice funziona, ma l'unica cosa che non funziona - statusbar. Google Play Store è trasparente fino a quando la barra degli strumenti non è compressa, come ottenere questo comportamento? – Den

E come posso rendere il testo visibile quando sto scorrendo solo verso il basso? – Den

L'ho implementato come mostrato di seguito. Non sono riuscito a trovare una soluzione migliore.

public enum State { 
    EXPANDED, 
    COLLAPSED, 
} 
mCurrentState = State.EXPANDED; 
Boolean toolbarIsTransparent = true; 
// Calculate ActionBar height 
    TypedValue tv = new TypedValue(); 
    int actionBarHeight = 0; 
    if (mContext.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) { 
     actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics()); 
    } 

    AppBarLayout appBarLayout = (AppBarLayout) rootView.findViewById(R.id.appbar_layout); 
    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) rootView.findViewById(R.id.collapsible_toolbar); 
    if (appBarLayout != null) { 
     final int finalActionBarHeight = actionBarHeight; 
     appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
      @Override 
      public void onOffsetChanged(AppBarLayout appBarLayout, int i) { 
       if (i == 0) { 
        mCurrentState = State.EXPANDED; 
       } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) { 
        mCurrentState = State.COLLAPSED; 
       } 
       if ((collapsingToolbarLayout.getHeight() + i <= finalActionBarHeight) && mCurrentState.equals(State.COLLAPSED)) { 
        toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary)); 
        toolbarIsTransparent = false; 
       } else if (!toolbarIsTransparent) { 
        mCurrentState = State.EXPANDED; 
        toolbar.setBackgroundColor(ContextCompat.getColor(mContext, android.R.color.transparent)); 
        toolbarIsTransparent = true; 
       } 
      } 
     }); 
    }

e XML codice è `

<android.support.design.widget.CollapsingToolbarLayout 
    android:id="@+id/collapsible_toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     android:orientation="vertical" 
     android:src="@drawable/image" 
     app:layout_collapseMode="parallax" /> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     app:layout_collapseMode="pin"/> 
</android.support.design.widget.CollapsingToolbarLayout>

fonte

2016-01-07 10:05:16 isudansh

Funziona esattamente come la funzionalità di scorrimento prevista di Play Store. Se qualcuno si aspetta l'esatta funzionalità, allora questa risposta dovrebbe essere accettata Grazie a @isudansh –

c'è un modo per aggiungere la barra di stato? – DCoder

Qui è la mia realizzazione

codice layout

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appBarLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true" 
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsingToolbarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 


     <ImageView 
      android:id="@+id/img" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      android:layout_gravity="center_horizontal|top" 
      app:layout_collapseMode="parallax" /> 

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

    </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:clipToPadding="false" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    <!-- YOUR LAYOUT CODE ---> 

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


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

codice Java

all'interno onCreateView

if (toolbar != null) { 
      ((AppCompatActivity)getActivity()).setSupportActionBar(toolbar); 
      ((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
     }

// nel codice

img.setImageResource(R.drawable.img1); 
collapsingToolbarLayout.setTitle("<TITLE>");

fonte

2016-04-03 04:49:53

grazie, ha risolto il mio problema – Reoxey

ho provato quasi tutte le risposte per ottenere le stesse funzionalità, ma ce l'ha di funzionare dopo un piccolo ritocco.

Funziona in modo simile a PlayStore dove il titolo della barra degli strumenti viene visualizzato solo quando è collassato e nascosto in altro modo.

Ecco il layout

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

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <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="@color/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 
      app:titleEnabled="false"> 

      <ImageView 
       android:id="@+id/banner" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:src="@drawable/image" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/AppTheme.PopupOverlay" /> 
     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 

    <!--Add your views here--> 
    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler_view" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:clipToPadding="false" 
     android:fadeScrollbars="true" 
     android:paddingTop="10dp" 
     android:scrollbarStyle="insideOverlay" 
     android:scrollbars="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

Aggiungere questo codice al metodo onCreate della vostra attività

private Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
private AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar); 
appBarLayout = (AppBarLayout) findViewById(R.id.appbar); 
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
     @Override 
     public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
      if (verticalOffset <= -appBarLayout.getTotalScrollRange() + toolbar.getHeight()) { 
       //Toolbar Collapsed 
       toolbar.setTitle("Your title here"); 
      } else { 
       //Toolbar Expanded 
       toolbar.setTitle(" "); 
      } 
     } 
    });

Poche cose da notare

Non impostare qualsiasi sfondo alla Toolbar altro si sovrapporrà alla tua vista
contentScrim at tributo si prenderà cura del colore barra degli strumenti sul crollo
titleEnabled attributo è impostato su false per disabilitare collasso effetto titolo

Spero che questo sarà utile a persone in cerca dello stesso comportamento.

Per favore fatemi sapere come funziona. Saluti!

fonte

2017-04-12 16:43:03

Basta aggiungere il tag soffietto in CollapsingToolbarLayout

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

e rimuovere lo stesso tag sopra ImageView, non la sua là necessaria.

E funziona exaclty come si vede in Google Play

Spero che questo aiuti a qualcuno :)

fonte

2017-04-15 12:40:49

layout di barra degli strumenti compresso come google play store

risposta

Problemi correlati