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.

1 Answer 1

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.

6
  • You are right, but that solution did not work. The bar is still invisible.
    – Tim Kranen
    Commented Jun 4, 2015 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? Commented Jun 4, 2015 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
    Commented Jun 5, 2015 at 6:40
  • @TimKranen See my answer, I edited it. The ImageView was above your Toolbar so that was the problem Commented Jun 5, 2015 at 7:20
  • This fixed the issue!! Thanks a lot! Do you know why 5.0+ did display it correctly?
    – Tim Kranen
    Commented Jun 5, 2015 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.