Home » Android » android – Overlay toolbar on top of activity content

android – Overlay toolbar on top of activity content

Posted by: admin June 15, 2020 Leave a comment

Questions:

I’m using the AppCompat v21 library to create a Lollipop-like interface in my android app.
So far it’s working great.

Now I want to have to toolbar appear on top of my content in one of my activities.
However, I cannot get it to work. This is what I have so far:

Layout of activity:

<LinearLayout
    android:id="@+id/main_parent_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/myAppTheme">
    <include layout="@layout/toolbar_setlist_top"/>
    <ImageView
        android:id="@+id/image"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>
</LinearLayout>

Layout of toolbar:

<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"
    app:theme="@style/MyActionBar"
    app:popupTheme="@style/MyActionBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:layout_marginTop="0dp" />

Theme:

<resources>
    <style name="myAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
        <item name="android:activatedBackgroundIndicator">@drawable/list_selector</item>
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@color/primaryColor2</item>
        <item name="android:windowActionBarOverlay">true</item>
        <!-- Support library compatibility -->
        <item name="background">@color/primaryColor2</item>
        <item name="windowActionBarOverlay">true</item>
    </style>
</resources>

Code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_setlist);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}
How to&Answers:

If you want to place the toolbar on top of your content you can use a FrameLayout like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/main_parent_view"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <ImageView
            android:id="@+id/image"
            android:layout_height="100dp"
            android:layout_width="40dp"
            android:background="#000"/>
    </LinearLayout>
    <include layout="@layout/toolbar_setlist_top"/>
</FrameLayout>

Answer:

It doesn’t appear that you’re acquiring a reference to the toolbar view in your layout anywhere. You need to find the view first, then pass that reference to the setSupportActionBar method:

setContentView(R.layout.activity_setlist);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Answer:

Assuming that when you say “Now I want to have to toolbar appear on top of my content in one of my activities” you are trying to use the Toolbar as your activity’s ActionBar (instead of the old/original ActionBar) you must make your theme’s parent theme “Theme.AppCompat.NoActionBar” instead of your current setting *.Light.DarkActionBar. Hope this helps.