ツールバーにカスタムレイアウトを追加する

Question

私はこれに続いてtutorialを使って、いくつかのタブを持つ通常のツールバーを提供します。

私はそれがより次のようになりますので、ツールバーを変更したい：

私はツールバーにいくつかのテキストや画像を追加したいです。これどうやってするの？

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

あなたがこの試すことができます： - Androidのアクションバーが古いアクションバーの要素に置き換えられているという事実による、今、これまで以上にカスタマイズしやすい

<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

をより使い勝手の良いツールバー以下に示すように、よりdetail reference link 1とdetail reference link 2

Answer 3

のためにあなたは、制約レイアウトを使用して、ツールバーのカスタムレイアウトを定義することができます詳細についてはhttp://www.zoftino.com/android-toolbar-tutorialを参照してください。

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