How to Disable the Title Bar in Hotwire Native for Android

If you’re using Hotwire Native for Android and want to remove the default title bar (action bar) for a more immersive UI, the solution is straightforward: create your own custom layout that doesn’t include a title bar.

Step 1: Create a Custom Layout

Create a file named hotwire_fragment_web.xml in your res/layout directory 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">

    <include
        layout="@layout/hotwire_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Key Points:

• No <Toolbar>, <AppBarLayout>, or other app bars are present in this layout.
• The included @layout/hotwire_view fills the screen between the parent’s top and bottom.

Step 2: Use Your Custom Layout

Ensure your Hotwire fragment or activity uses hotwire_fragment_web.xml as its layout:

package com.example.myapplication // update to match your project

import android.os.Bundle
import android.view.View
import androidx.activity.enableEdgeToEdge
import dev.hotwire.navigation.activities.HotwireActivity
import dev.hotwire.navigation.navigator.NavigatorConfiguration
import dev.hotwire.navigation.util.applyDefaultImeWindowInsets

class MainActivity : HotwireActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<View>(R.id.main_nav_host).applyDefaultImeWindowInsets()
    }

    override fun navigatorConfigurations() = listOf(
        NavigatorConfiguration(
            name = "main",
            startLocation = "https://hotwire-native-demo.dev",
            navigatorHostId = R.id.main_nav_host
        )
 

That’s it! No need to modify themes or hide the action bar in code. By using a minimal layout, the title bar is gone, and you have full control over the screen’s content.

---

Tip:
If you ever want to add your own custom toolbar, just add it to this layout above the included hotwire_view and adjust the constraints accordingly.