[Turbo-Android] Add an appbar button

1

Hey!

I am a rails and an iOS developer, and working with a very small team on a project where they decided to user Turbo-native for mobile apps.

I have been able to produce what was desired on iOS per my background, but I have been asked to investigate the Android version. Unfortunately I have not been able to find any tutorial, so I had to extrapolate from the demo.

Therefore, sorry for the silly questions from an android/kotlin noob:

For now, I am trying to add a button to the appbar above. I implemented a custom WebFragment view to inflate my own, which has this button.

When I start the app, I do have the button.

  • The first click does not work, though, only the second one
  • If I visit a link in the app, the button disappear ; it’s still there if I go back through the nav history

Where can I override this behaviour? (Are there other demo app or tutorials outthere to avoid annoying you?)

Here is the relevant code:

@TurboNavGraphDestination(uri = "turbo://fragment/web/home")
class WebHomeFragment : WebFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_web_home, container, false)
        val menuButton = view.findViewById(R.id.toggle_menu) as Button
        menuButton.visibility = View.VISIBLE
        menuButton.setOnClickListener { print("\nCLICKED") }
        return view
    }

    // [...]
}

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    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="56dp"
        android:background="#FFFFFF"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00FFFFFF"
            android:backgroundTint="#FFFFFF">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toStartOf="@id/toggle_menu"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/toggle_menu"
                android:layout_width="36dp"
                android:layout_height="0dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginBottom="10dp"
                android:background="#00FFFFFF"
                android:insetTop="0dp"
                app:icon="@drawable/ic_baseline_menu_24"
                app:iconTint="#000000"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

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

Thanks a lot in advance :heart:

1 Like
2

@Lomig did you manage to make the bottom navigation bar work?