Edge to Edge Feature in Android

Last Updated : 08 Sep, 2021

With the release of Android Q, users will be able to have an Edge-to-Edge experience with their favorite apps. This does not imply that you will have a concealed navigation panel or that the status bar will be hidden. Isn’t it fantastic? So, let’s go right in.

What exactly is Edge to Edge to App?

Edge to Edge apps takes up the whole height of the screen, including the Navigation and Status Area, from top to bottom. Consider using a translucent backdrop for your status and navigation panels to better comprehend it.

Let’s look at how we can accomplish that in our app.

Step #1: Your app should target Android Q, thus your target version should look like this:

targetSdkVersion 'Q'

Step #2: We utilize it to make the status and navigation bar transparent.

<style name="AppTheme" parent="...">
    <item name="android:navigationBarColor">@android:color/transparent</item>

    <!-- This is optional, however recommended -->
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

and to do so, use your activity file. Window.setNavigationBarColor() and Window.setStatusBarColor() are two methods for changing the colour of the navigation bar ()

Step #3: Finally, we must inform the Android system that the view layout is sufficient to support the Edge to Edge View. To do this, we will employ,

Finally, we must inform the Android system that the view layout is sufficient to support the Edge to Edge View. To do this, we will employ,

view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        or View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULL_SCREEN)

SYSTEM IU FLAG LAYOUT FULL SCREEN: This flag allows you to make the App full screen from top to bottom.
SYSTEM UI FLAG LAYOUT HIDE NAVIGATION: This flag indicates that the navigation is hidden in the layout. This will place the transparent Navigation bar on top of the App
SYSTEM UI FLAG LAYOUT STABLE: This flag is important for providing the program with a stable view.

That’s all there is to it when it comes to creating an app to make use of the Edge to Edge app functionality.

Insets

The phrase insets tend to frighten Android developers, owing to their previous attempts to draw behind the status bar in the days of Android Lollipop. Insets indicate which portions of the screen, such as the navigation or status bar, connect with the system UI. Intersecting might just mean being shown above your content, but it can also indicate system motions. We may utilize the insets to try to eliminate any conflicts, for as by shifting a view in from the boundaries.

How to get more screen estate?

We may give your app additional screen real estate by switching to a gesture paradigm for system navigation. This enables apps to provide more immersive experiences for their consumers. On most devices, users will be able to pick their preferred navigation mode. The present three-button navigation method (back, home, and recent) will be retained. It is necessary for all smartphones that debut with Android 10 or later.

Make your app full-screen

Add the following code in your app to make it full screen, it’s just the initial declaration which should go inside the onCreate() method

Kotlin

// Your onCreateMethod() in Kotlin 
  ... 
  super.onCreate(savedInstanceState) 
  WindowCompat.setDecorFitsSystemWindows(window, false) 
  ...

Java

// Your onCreateMethod() in Java 
... 
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false); 
...

GeekTip: To deactivate automatic content protection on Android 10 (API level 29) or higher, set android:enforceNavigationBarContrast, android:enforceStatusBarContrast, or both in your theme to false.

Changes for the Big Flexed Displays

Foldable gadgets have enabled several novel experiences and applications. We’ve implemented a number of improvements in Android Q to help your apps make use of this and other large-screen devices, including modifications to onResume and onPause to enable multi-resume and alert your app when it has attention. We’ve also modified the behavior of the resizable activity manifest parameter to let you customize how your app appears on foldable and big displays.

Conclusion

Mobile innovation is stronger than ever in 2021, with new technologies ranging from 5G to edge-to-edge displays and even foldable screens, and having your apps support edge-to-edge is a wonderful way to expand your user base!