AppBarLayout и панель инструментов невидимы на Android 4.x

Question

Я использую новую панель AppbarLayout и панель инструментов из библиотеки поддержки дизайна v22. Но они кажутся невидимыми на устройствах 4.x. Это известная проблема? Как это исправить?

Вот мой XML:

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

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

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

Они в RelativeLayout. Перемещение их в CoordinatorLayout не решило проблему.

AppbarLayout и панель инструментов есть, так как есть «тень», когда вы тянете основной прокрутки, но они невидимы.

Мой полный макет:

<RelativeLayout 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/setting_appbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/setting_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:background="#fff" 
     app:title="inSight Source" /> 

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

<ImageView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/setting_bg_img" 
    android:layout_centerVertical="true" 
    android:layout_centerHorizontal="true" 
    android:src="@drawable/baseimg" 
    android:scaleType="centerCrop" /> 

<ScrollView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_below="@+id/setting_appbar" > 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     android:padding="10dp"> 

     <com.devspark.robototextview.widget.RobotoTextView 
      android:id="@+id/login_insight_label" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:typeface="roboto_thin" 
      android:text="inSight Source" 
      android:textSize="40dp" 
      android:textColor="#fff" 
      android:layout_marginTop="20dp" 
      android:layout_gravity="center_horizontal" /> 

     <com.devspark.robototextview.widget.RobotoTextView 
      android:id="@+id/login_companion_label" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:typeface="roboto_thin" 
      android:text="companion app" 
      android:textSize="20dp" 
      android:layout_marginTop="6dp" 
      android:textColor="#fff" 
      android:layout_below="@id/login_insight_label" 
      android:layout_gravity="center_horizontal" /> 

     <!-- invisible view for margin --> 
     <View 
      android:layout_width="match_parent" 
      android:layout_height="30dp" /> 

     <include 
      android:id="@+id/setting_card_driver" 
      layout="@layout/include_setting_card" /> 

     <!-- invisible view for margin --> 
     <View 
      android:layout_width="match_parent" 
      android:layout_height="30dp" /> 

     <include 
      android:id="@+id/setting_card_vehicle" 
      layout="@layout/include_setting_card" /> 

     <!-- invisible view for margin --> 
     <View 
      android:layout_width="match_parent" 
      android:layout_height="30dp" /> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:padding="10dp" 
      android:background="#fff" > 

      <com.devspark.robototextview.widget.RobotoTextView 
       android:id="@+id/setting_info_label" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       app:typeface="roboto_regular" 
       android:text="Deze instellingen kunt u aanpassen in inSight Source" 
       android:textSize="13dp" 
       android:layout_marginTop="6dp" 
       android:textColor="@color/insight_antraciet" 
       android:layout_centerInParent="true" /> 

     </RelativeLayout> 


     <Button 
      android:id="@+id/setting_logout_button" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="20dp" 
      android:text="LOG UIT" 
      android:theme="@style/ButtonStyle" 
      android:textColor="#fff" 
      android:layout_marginBottom="5dp"/> 

    </LinearLayout> 
</ScrollView> 
</RelativeLayout> 

Я также попытался поместить AppBarLayout в CoordinatorLayout, но это не решило проблему.

Answer 1

Почему вы используете тему на AppBarLayout? Если вы удалите, то ваш Toolbar, вероятно, появится снова. Вы можете переместить тему на панель инструментов:

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 

Редактировать

Добавьте это в ImageView:

android:layout_below="@id/setting_appbar" 

Ваш ImageView был выше вашей Toolbar так вот почему вы не могли видеть Это. Еще одна вещь, которую вы могли бы сделать, это положить Toolbar в нижней части макета, чтобы она выглядела выше ImageView.