Wie kann ich eine erweiterte Symbolleiste mit Hintergrundbild und zentriertem Miniaturbild erstellen?

Question

Ich bin bereit, eine benutzerdefinierte Symbolleiste für das Hauptmenü einer App, an der ich arbeite, wie folgt zu erstellen: https://i.stack.imgur.com/GJdjn.png.

Es enthält ein Hintergrundbild und ein anderes zentriertes Bild als Miniaturansicht. Es wird nicht minimiert und bleibt statisch, bis ein Element auf einer der Registerkarten ausgewählt wird.

Ich benutze Android Studio in der Entwicklung, die ein wenig rau sein kann, um mit Layout umzugehen, aber ich glaube, es gibt eine Lösung, die die Material-Design-Funktionen verwendet, aber ich konnte nichts darüber finden (außer die Symbolleiste mit einem Hintergrundbild).

Vielen Dank im Voraus.

Answer 1

Sie können das Toolbar-Widget an Ihre Bedürfnisse anpassen. Verwenden Sie etwas wie folgt:

<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar_top" 
android:layout_height="wrap_content" 
android:layout_width="match_parent" 
android:minHeight="?attr/actionBarSize" 
android:background="@color/action_bar_bkgnd" 
app:theme="@style/ToolBarTheme" > 


<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Toolbar Title" 
    android:layout_gravity="center" 
    android:id="@+id/toolbar_title" > 

    //...your code here 

    </RelativeLayout> 

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

Und dann fügen Sie diese Symbolleiste an den Anfang Ihrer Benutzeroberfläche.

Answer 2

Basierend auf dem von Ihnen verwendeten Beispiel sieht es so aus, als würden sie eine CollapsingToolbarLayout verwenden, bei der der Kollabierungseffekt deaktiviert ist. Das Layout könnte etwa so aussehen:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_width="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     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/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:layout_scrollFlags="enterAlways"> 

      <FrameLayout 
       android:id="@+id/header_frame" 
       android:layout_width="match_parent" 
       android:layout_height="@dimen/height_header" 
       app:layout_collapseMode="pin"> 

       <ImageView 
        android:id="@+id/header_image" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:adjustViewBounds="true"/> 

       <ImageView 
        android:id="@+id/square_image" 
        android:layout_width="@dimen/size_square_image" 
        android:layout_height="@dimen/size_square_image" 
        android:layout_gravity="center|bottom" 
        android:scaleType="centerCrop"/> 

      </FrameLayout> 

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

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

     <android.support.design.widget.TabLayout 
      android:id="@+id/tab_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"/> 

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

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

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