Aggiungi layout personalizzato alla barra degli strumenti

Question

Ho seguito questo tutorial per dare alla mia app una barra degli strumenti regolare con alcune schede.

voglio cambiare la barra degli strumenti in modo che appaia più simile a questo:

Voglio aggiungere un testo e le immagini nella barra degli strumenti. Come posso fare questo?

activity_main.xml:

<?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: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="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     app:elevation="0dp"> 

     <android.support.v7.widget.Toolbar 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="@color/primary" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:theme="@style/ToolbarTheme" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabTextAppearance="@style/TabLayout" 
      app:tabSelectedTextColor="@color/white" 
      /> 

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

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

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

Answer 1

si può provare questo: -

<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:id="@+id/main_container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 


     <!- Your view --> 


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


     <android.support.v7.widget.Toolbar 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:id="@+id/toolbar" 
     android:layout_height="?attr/actionBarSize" 
     android:elevation="6dp" 
     app:layout_collapseMode="pin" 
     app:layout_scrollFlags="scroll|enterAlways" 
     app:popupTheme="@style/AppTheme"> 

      <LinearLayout 
       android:id="@+id/llContainer" 
       android:layout_width="match_parent" 
       android:orientation="vertical" 
       android:background="@android:color/black" 
       android:gravity="center" 
       android:layout_height="300dp"> 

       <!- Your TextView/ImageView --> 

      </LinearLayout> 

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

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabTextAppearance="@style/TabLayout" 
      app:tabSelectedTextColor="@color/white"/> 

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

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

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

Answer 2

L'ActionBar Android è ora più facile da personalizzare che mai, a causa del fatto che il vecchio elemento ActionBar è stato sostituito con la barra degli strumenti più versatile. per ulteriori detail reference link 1 e detail reference link 2

Answer 3

È possibile definire il layout personalizzato della barra degli strumenti utilizzando il layout dei vincoli come mostrato di seguito, vedere http://www.zoftino.com/android-toolbar-tutorial per ulteriori informazioni.

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 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" 
    tools:context="zoftino.com.toolbar.MainActivity"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:minHeight="?attr/actionBarSize" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent"> 
     <android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginBottom="8dp"> 
      <TextView 
       android:id="@+id/title_m" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginEnd="8dp" 
       android:layout_marginStart="8dp" 
       android:layout_marginTop="16dp" 
       android:text="Tennis" 
       android:textAppearance="@android:style/TextAppearance.Material.Title" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintRight_toRightOf="parent" 
       app:layout_constraintTop_toTopOf="parent"/> 
      <TextView 
       android:id="@+id/women_s" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginEnd="8dp" 
       android:layout_marginStart="8dp" 
       android:layout_marginTop="8dp" 
       android:text="W Singles" 
       android:textAppearance="@android:style/TextAppearance.Material.Medium" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintRight_toRightOf="parent" 
       app:layout_constraintTop_toBottomOf="@+id/title_m" /> 
      <TextView 
       android:id="@+id/wm_name" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginEnd="8dp" 
       android:layout_marginStart="8dp" 
       android:layout_marginTop="8dp" 
       android:textAppearance="@android:style/TextAppearance.Material.Title" 
       android:text="Serena" 
       app:layout_constraintLeft_toRightOf="@+id/women_s" 
       app:layout_constraintRight_toRightOf="parent" 
       app:layout_constraintTop_toBottomOf="@+id/title_m" /> 

     </android.support.constraint.ConstraintLayout> 
    </android.support.v7.widget.Toolbar> 


</android.support.constraint.ConstraintLayout>