How to hide the action bar?

[programthis]

I am attempting to hide the action bar (title bar) in my Turbo Native application in Android Studio but the usual way doesn't seem to be working.

I am using the call inside my MainActivity.kt:

supportActionBar?.hide()

Full code:

package com.strategiccoach.winstreak

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import dev.hotwire.turbo.activities.TurboActivity
import dev.hotwire.turbo.delegates.TurboActivityDelegate

class MainActivity : AppCompatActivity(), TurboActivity {
    override lateinit var delegate: TurboActivityDelegate

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportActionBar?.hide()
        setContentView(R.layout.activity_main)
        delegate = TurboActivityDelegate(this, R.id.main_nav_host)
    }
}

And I've also made sure the themes.xml has no action bar set like so:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.myapp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.myapp" parent="Base.Theme.myapp" />
</resources>

But neither of these seem to work. Is something in Turbo setting the action bar?

[LeeGoTech]

Here's how to hide the action bar based on the documentation of Turbo Android.

In WebFragment.kt,

package YOUR_PACKAGE

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import dev.hotwire.turbo.fragments.TurboWebFragment
import dev.hotwire.turbo.nav.TurboNavGraphDestination

@TurboNavGraphDestination(uri = "turbo://fragment/web")
class WebFragment : TurboWebFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.web_fragment, container, false)
    }

    override fun shouldObserveTitleChanges(): Boolean {
        return false
    }
}

In res\layout\web_fragment.xml,

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        layout="@layout/turbo_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/app_bar" />
</androidx.constraintlayout.widget.ConstraintLayout>

[programthis]

@LeeGoTech Thanks for your reply. I'm a bit confused as to the package line. Should I be using line "package com.strategiccoach.winstreak" in the first file (which is in my MainActivity.kt)?

When I do so, I'm getting an error "Unresolved reference: WebFragment" when I try to build based on this code.

[LeeGoTech]

Please provide me a screenshot so I can assess the issue further.

[programthis]

@LeeGoTech Sure, here is my code sample

package com.strategiccoach.winstreak

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import dev.hotwire.turbo.fragments.TurboWebFragment
import dev.hotwire.turbo.nav.TurboNavGraphDestination

@TurboNavGraphDestination(uri = "turbo://fragment/web")
class WebFragment : TurboWebFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.web_fragment, container, false)
    }

    override fun shouldObserveTitleChanges(): Boolean {
        return false
    }
}

And here's what the build error looks like

[programthis]

One that shows the error clearer

[LeeGoTech]

I see the problem. There's no need to import the WebFragment class since it's already included in the registeredFragments method.

Let me know if there are still any problems related to hiding the action bar.

[programthis]

@LeeGoTech So I did try removing this line as well, which does remove the action bar, but then I'm left with this giant space on my app so I put the line back in. Any ideas?

[programthis]

It's easy to trigger said space, just by clicking into any input box and then clicking out of it.

[LeeGoTech]

Refer to this issue: #215

[programthis]

@LeeGoTech This method does work to remove the space but it then prevents the screen from shifting up when clicking into the input that's lower in the page. Here's a demo (note: I'm trying to click into the second input down the page which makes the typepad cover it up). Previously, it would shift the whole page up:

screen-20240821-100232.mp4

[LeeGoTech]

Use this in your web_fragment.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@android:color/transparent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </com.google.android.material.appbar.AppBarLayout>

    <include
        layout="@layout/turbo_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/app_bar" />

</androidx.constraintlayout.widget.ConstraintLayout>

[programthis]

@LeeGoTech I tried this code block but no change unfortunately.

[LeeGoTech]

I forgot something. Change adjustPan to adjustResize in AndroidManifest.xml.

[RSeven]

Ok, so after a lot of research I finally solved this.

First of all, I needed to overwrite hotwire's default web fragment, which is defined here.

To do that, I needed to create a new layout in res/layout called hotwire_fragment_web.xml with the following content:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include
        layout="@layout/hotwire_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/app_bar" />

</androidx.constraintlayout.widget.ConstraintLayout>

That code is just a copy of hotwire's default web fragment removing the definition of the action bar.

I also added android:fitsSystemWindows="true" so that the system bar (clock, notifications, etc...) does not overlap with my app content.

Threads that helped me:
https://discuss.hotwired.dev/t/how-to-hide-apps-title-toolbar-in-turbo-native-app/5516/12
hotwired/hotwire-native-android#126

EDIT:
Actually, using android:fitsSystemWindows="true" was breaking the layout when the keyboard was shown.

My final solution was to remove android:fitsSystemWindows="true" and add this to MainActivity.kt:

ViewCompat.setOnApplyWindowInsetsListener(findViewById<View>(R.id.main_nav_host)) { view, insets ->
    val systemBarsInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())

    // Apply padding so content doesn’t overlap system bars
    view.setPadding(
        systemBarsInsets.left,
        systemBarsInsets.top,
        systemBarsInsets.right,
        systemBarsInsets.bottom
    )

    // Return insets as consumed or not consumed
    insets
}