0

I am using the new AppbarLayout and Toolbar from the v22 design support library. But they appear invisible on 4.x devices. Is this a known issue? How do I fix it?

Here's my 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>

They're in a relativelayout. Moving them into a CoordinatorLayout did not fix the issue.

The AppbarLayout and Toolbar are there, since there is a 'shade' when you pull the underlying scrollview, but they are invisible.

My full layout:

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

I have also tried placing the AppBarLayout in a CoordinatorLayout but that did not solve the problem.

Tim Kranen
  • 4,202
  • 4
  • 26
  • 49

1 Answers1

3

Why are you using a theme on the AppBarLayout? If you remove that your Toolbar will probably appear again. You can move the theme to the Toolbar:

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

Edit

Add this to your ImageView:

android:layout_below="@id/setting_appbar"

Your ImageView was above your Toolbar so that's why you couldn't see it. One other thing you could do is put the Toolbar at the bottom of the layout so it appears above the ImageView.

Kevin van Mierlo
  • 9,554
  • 5
  • 44
  • 76
  • You are right, but that solution did not work. The bar is still invisible. – Tim Kranen Jun 04 '15 at 15:01
  • @TimKranen What is your primary color? Also try android before `actionBarSize` like this: `?android:attr/actionBarSize`. Perhaps you can send the entire layout so I can check it out? – Kevin van Mierlo Jun 04 '15 at 15:05
  • I stripped the toolbar of all properties, gave it a static height and static color but that did not work. It's still invisible. I've posted my full layout. – Tim Kranen Jun 05 '15 at 06:40
  • @TimKranen See my answer, I edited it. The `ImageView` was above your `Toolbar` so that was the problem – Kevin van Mierlo Jun 05 '15 at 07:20
  • This fixed the issue!! Thanks a lot! Do you know why 5.0+ did display it correctly? – Tim Kranen Jun 05 '15 at 07:23
  • @TimKranen Not sure, I would've thought it would be the same. But maybe 5.0+ puts the `AppBarLayout` on top or something. Glad this fixed it! – Kevin van Mierlo Jun 05 '15 at 07:24