hotwired / turbo-android

Android framework for making Turbo native apps
MIT License
431 stars 49 forks source link

Blinking visit #181

Closed ermolaev closed 3 years ago

ermolaev commented 3 years ago

Hello, I know very little about android development. I have Rails application with Turbolinks, it works very fast (average server response is 70ms). But when I made android app, based on turbo-android, I noticed that the transition between pages became visually slower due to the appearance of white page, the interface blinks, is it possible to fix it?

Pressing the back button works fine.

after click link white page new page
jayohms commented 3 years ago

Each new page is loaded in a new Fragment that is pushed onto the navigation stack. The contents of the new page can't be displayed until the url has fully loaded in the WebView, so the content area will be blank (just like a fully native app) until the content has loaded.

There are a couple options you can use to tweak things to your liking, though. Such as changing the Fragment transitions to give a different effect. You can also provide your own custom progress view by overriding the createProgressView() function in your web Fragment.

Using these options may require some experience with Android development. The bottom navigation tabs in the WebView in your last screenshot is probably not a design that I would recommend long-term, since it will not provide the illusion of being persistent. To have a more native-feeling app, you could use Android's bottom navivigation view.

MichalSznajder commented 1 year ago

I struggled a little to get this working and avoid white flash or blinking. Key thing was to use "screenshots_enabled": true otherwise you will always get white flash. There is one caveat: API used to make screenshots will not capture any overlays (so eg. BadgeDrawable will disappear during transition).

Than implement getNavigationOptions as described. To get started I suggest use this for enter:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

and for exit something like this:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="1.0"/>
</set>

For exit I just keep existing fragment in view until new one pops in thus avoiding white flash.

Please note that this solution doesn't work with "presentation": "replace_root" as you cannot customize animations for this transition right now.