Aggiungi layout personalizzato a ActionBar/Barra degli strumenti senza margini

Question

Voglio creare una barra degli strumenti altezza personalizzata e funziona bene fino a quando non aggiungo il contenuto ad esso. Quindi il mio contenuto è regolato per essere tra la freccia indietro e i pulsanti della barra delle azioni.

Come posso fare in modo che il mio contenuto occupi l'intera larghezza in modo da poter creare un layout come di seguito? Immagino che l'icona "+" debba trovarsi in un layout principale della barra degli strumenti?

La documentazione dicono:

La domanda può aggiungere viste bambino arbitrari alla barra degli strumenti. Appariranno in questa posizione all'interno del layout. Se Toolbar.LayoutParams di una vista secondaria indica un valore di gravità di CENTER_HORIZONTAL, la vista tenterà di centrare lo spazio disponibile rimanente nella barra degli strumenti dopo che tutti gli altri elementi sono stati misurati.

Ma io non ho la forza di gravità impostato CENTER_HORIZONTAL ...

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:iosched="http://schemas.android.com/apk/res-auto" 
     iosched:theme="@style/ActionBarThemeOverlay" 

     iosched:popupTheme="@style/ActionBarPopupThemeOverlay" 
     android:id="@+id/toolbar_actionbar" 
     android:background="@color/theme_primary" 
     iosched:titleTextAppearance="@style/ActionBar.TitleText" 
     iosched:contentInsetStart="16dp" 
     iosched:contentInsetEnd="16dp" 
     android:layout_width="match_parent" 
     android:layout_height="128dp" > 
     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

     ... My Content 

Attualmente il mio layout finisce in questo modo quando si esegue con margine sinistro impostata su 168:

Answer 1

Non so se hai ancora bisogno di aiuto con questo, ma ha il maggior numero di voti per una domanda senza risposta non solo nel tag android-5.0-lollipop, ma anche nel tag android-toolbar in questo momento. Quindi, pensavo di dargliene uno.

Questo layout è piuttosto semplice da raggiungere, in particolare con il nuovo Design Support Library.

Attuazione

La radice della gerarchia dovrà essere il CoordinatorLayout.

Come per la documentazione:

Figli di un CoordinatorLayout possono avere un ancoraggio. Questo ID vista deve corrispondere a un discendente arbitrario di CoordinatorLayout, ma è possibile che non sia il figlio ancorato stesso o un discendente del figlio ancorato . Questo può essere usato per posizionare viste mobili rispetto ad altri riquadri di contenuto arbitrario .

Quindi, useremo questo per posizionare il FloatingActionButton dove deve andare.

Il resto è piuttosto semplice. Utilizzeremo un verticale LinearLayout per posizionare il Toolbar, il contenitore di testo, il contenitore di linguette e quindi un ViewPager. Così, il layout completo è:

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#181E80" 
     android:orientation="vertical"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:minHeight="?attr/actionBarSize" /> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="48dp" 
      android:paddingTop="8dp"> 

      <ImageView 
       android:id="@android:id/icon" 
       android:layout_width="54dp" 
       android:layout_height="54dp" 
       android:layout_alignParentStart="true" 
       android:layout_marginStart="16dp" 
       android:importantForAccessibility="no" 
       android:src="@drawable/logo" /> 

      <TextView 
       android:id="@android:id/text1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignTop="@android:id/icon" 
       android:layout_marginStart="14dp" 
       android:layout_toEndOf="@android:id/icon" 
       android:text="Chelsea" 
       android:textColor="@android:color/white" 
       android:textSize="24sp" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignStart="@android:id/text1" 
       android:layout_below="@android:id/text1" 
       android:text="England - Premier League" 
       android:textColor="@android:color/white" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <FrameLayout 
      android:id="@+id/tab_container" 
      android:layout_width="match_parent" 
      android:layout_height="90dp" 
      android:background="#272F93"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       app:tabContentStart="70dp" 
       app:tabGravity="center" 
       app:tabIndicatorColor="#F1514A" 
       app:tabMode="scrollable" 
       app:tabSelectedTextColor="@android:color/white" 
       app:tabTextColor="#99ffffff" /> 

     </FrameLayout> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/pager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 

    </LinearLayout> 

    <android.support.design.widget.FloatingActionButton 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:layout_margin="16dp" 
     android:src="@drawable/ic_star_white_24dp" 
     app:backgroundTint="#F1514A" 
     app:borderWidth="0dp" 
     app:elevation="8dp" 
     app:layout_anchor="@id/tab_container" 
     app:layout_anchorGravity="top|right|end" /> 

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

Non c'è molto di più da aggiungere, l'unica altra cosa che vorrei sottolineare è come utilizzare il TabLayout.Se stai usando un ViewPager come noi, si sarebbe probabilmente chiamare uno dei due:

• TabLayout.setTabsFromPagerAdapter
• TabLayout.setupWithViewPager

Note

ho solo tipo di eyeballed le dimensioni, cercando di abbinare l'immagine il più possibile.

Risultati