Android Material Part: Toolbar vs DisplayCutout

Photograph by way of Christian Wiediger on Unsplash

With Android 9 (API degree 28), Google formally began supporting what’s famously referred to as the notch, a cutout show on the most sensible (since the remaining two years have been the years of the notch?). I will be able to’t declare that however with the notch make stronger, many of the manufacturers got here out with their model of a cutout show and with that, we as builders wish to take into consideration but every other edge case, particularly if we’re operating with a fully immersive revel in.

To provide you with slightly wisdom of what I’ve researched, what I spotted whilst coping with the notch is that the units’ notch are both the scale of the standing bar or the standing bar is adjusted vertically is the notch is a little bit longer. So because the standing bar isn’t technically part of your app, it’s nearly at all times looked after by way of Android.

However..

What occurs when you wish to have to cover the standing bar to make your view fullscreen? This is one thing you want to unravel as a developer.

And because I’ve already taken my time fixing it remaining week, I considered it as the easiest new instructional for everybody of you to save lots of your time coping with it.

Let’s get began.

Prerequisite ☝️

Mission Setup ⚙️

First issues first. We wish to have the issue to unravel the issue. To be able to disable the standing bar to move immersive in an app. Do the next:

1. Open a brand new undertaking.

2. Choose an Empty Job Mission Template. This could create an empty display screen with an Motion Bar.

3. Kind any identify for the undertaking and make a selection Kotlin from the language

4. Click on End.

5. Run the undertaking to peer the glance of your preliminary app.

Material Dependency 😍

Since we wish to taste our app a little bit, we’d like Android’s Material library which isn’t a part of the app these days, so very first thing is so as to add the Material library to our undertaking. To take action:

  1. Open construct.gradle (Module)
    implementation 'com.google.android.materials:materials:1.1.0'
    
  2. Upload this line within the dependency phase:

3. Sync the undertaking.

Including a customized Toolbar 🖌

You should be considering if we have already got a toolbar arrange, why upload every other. It’s because the default toolbar that’s arrange by way of the undertaking is from a guardian format that we do not need a regulate of, so after we permit fullscreen at the app, the toolbar hides in conjunction with different gadget components, however we need to have regulate over it as a way to now not conceal it mechanically. Right here’s tips on how to set it up:

1. Open types.xml.

2. Exchange your guardian theme from Theme.AppCompat.Mild.DarkActionBar to Theme.MaterialComponents.NoActionBar.Bridge (operating the app at this degree must now not show any toolbar).

3. Open activity_main.xml.

4. Upload the next strains rather than the placeholder TextView so as to add a toolbar (operating the app at this degree must show an empty toolbar).

<androidx.appcompat.widget.Toolbar android:identity="@+identity/toolbar" android:minHeight="?attr/actionBarSize" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" app:layout_constraintTop_toTopOf="guardian" app:layout_constraintStart_toStartOf="guardian" app:layout_constraintEnd_toEndOf="guardian"/>

5. Open MainActivity.kt.

6. Upload this line after setContentView() to setup our personal toolbar and show the app identify.

setSupportActionBar(findViewById(R.identity.toolbar))

Enabling fullscreen 🌅

1.Open types.xml.

2. Upload a brand new taste underneath the AppTheme:

<taste identify="AppTheme.Fullscreen" guardian="AppTheme"> <merchandise identify="android:windowFullscreen">true</merchandise> <merchandise identify="android:windowLayoutInDisplayCutoutMode" equipment:targetApi="p">shortEdges</merchandise>
</taste>

3. Open AndroidManifest.xml

4. Within the MainActivity attributes, upload the android:theme characteristic with the types that you simply created:

<process android:identify=".MainActivity" android:theme="@taste/AppTheme.Fullscreen"> <intent-filter> <motion android:identify="android.intent.motion.MAIN" /> <class android:identify="android.intent.class.LAUNCHER" /> </intent-filter>
</process>

5. Now to your MainActivity.kt, upload the next strains:

 override amusing onWindowFocusChanged(hasFocus: Boolean)  tremendous.onWindowFocusChanged(hasFocus) if (hasFocus)   personal amusing hideSystemUIAndNavigation(process: Job)  val decorView: View = process.window.decorView decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE // Set the content material to seem below the gadget bars in order that the // content material does not resize when the gadget bars conceal and display. or View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // Conceal the nav bar and standing bar or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_FULLSCREEN) 

6. Run the app and also you’re excellent to move!

Aside from that you simply’re now not.

When you run the app at this second on a tool with a notch / cutout show, you’d understand that the toolbar is hidden by way of the notch:

And that’s the issue this tale is all about.

The Repair 🔧

Manner I:

To be able to resolve the issum, the primary means you could be considering to take it to easily upload padding to the toolbar to put it underneath the notch. However since we now have in several heights on other units, we will’t hardcode a relentless worth (for example, 24dp or 48dp) as a way to upload a margin on most sensible of the toolbar.

However there should be some way the peak of the standing bar is about by way of the gadget, you should suppose. Sure there may be, and also you get entry to it by way of @android:dimen/status_bar_height however since that’s a non-public worth, including a android:layout_marginTop=”@android:dimen/status_bar_height” in your toolbar throws a construct error:

AAPT: error: useful resource android:dimen/status_bar_height is personal.

And even though you probably did upload a relentless worth, it would paintings for the notch however now not for no-notch units:

Manner II and the magic: 🎩

The means that I needed to take to unravel this factor is to easily paintings on it programmatically: so as to add padding most effective when wanted. And because Google has a couple of new APIs to take care of the notch, reaching this hack is rather simple:

1. For your MainActivity.kt, upload a brand new means:

@SuppressLint("NewApi")
personal amusing adjustToolbarMarginForNotch() 

2. Name this system good underneath hideSystemUIAndNavigation(this) in onWindowFocusChanged to let the exchange have an effect on after we conceal the gadget UIs.

Observe: Since one of the most strategies that we name listed below are rather new to the Google APIs (for example, rootViewInsets, displayCutout, and so on), they’re most effective supported by way of Android 9. And because the notch is rather a brand new pattern in units, the entire new units with the notch do run Android ≥ 9, so we’re all excellent right here. 👌

When you run the app now, you spot that the margin is most effective added after we do have a notch:

Additional: Styling 🎨

Thus far so excellent, we simply wish to upload some taste to the empty space or lengthen our toolbar to the highest to make it now not glance very unusual. To take action:

1. For your activity_main.xml, upload a brand new view with a dimension of the toolbar (?attr/actionBarSize) on most sensible of toolbar, like:

<View android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_constraintTop_toTopOf="guardian" app:layout_constraintStart_toStartOf="guardian" app:layout_constraintEnd_toEndOf="guardian"/>

2. Run the app to peer the adjustments.

And so, you’ll be able to mess around with the background of the view and/or the toolbar to regulate the way in line with your style:

Glad coding! 💻

Supply code for the Ultimate Model

As at all times, let me know if my instructional helped you in any respect and the issues I will be able to give a boost to in writing tutorials by way of sending a DM or a Tweet at: twitter.com/waseefakhtar ✌️

Up to now printed at https://proandroiddev.com/android-material-toolbar-vs-displaycutout-6ae99b2b7ef0

(Visited 2 times, 1 visits today)

Leave a Reply