I have added an splash screen on my flutter app (on Android side) like this:
Opening the values/styles.xml and adding the following:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="LaunchTheme" parent="#android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<!--following 2 lines modified by me-->
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name= "android:windowFullscreen">true</item>
</style>
</resources>
However, when I run the app in real device, the splash screen shows a weird behaviour:
I am not sure how many seconds the splash is shown but, for the example, let's say it lasts for 3 seconds, well, on the first 1 or 1.5 seconds, the bottom of the screen looks like this, showing the bottom software buttons:
After these 1 or 1.5 secs, the bottom bar goes away and the splash screen is shown as expected for another 1 or 1.5 secs, then the app starts.
How to fix this so that the splash covers the whole screen from the beginning?
In MainActivity.java
write this:
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
this.getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
Related
Flutter Splash Screen
Pubspec.YAML code-
flutter_native_splash: ^2.0.1+1
flutter_native_splash:
image: assets/images/splashScreen.png
color: "#c988be"
Styles.xml -
style name="LaunchTheme" parent="#android:style/Theme.Light.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">#drawable/launch_background</item>
<item name="android:windowFullscreen">true</item>
</style>
if you want to hide the action bar you need to go to app manifests and then set the theme of the splash screen layout to no action bar as so:
android:theme="#style/Theme.AppCompat.NoActionBar"
if you want also to hide the status bar you use flags in the splash screen activity as so:
#Suppress("DEPRECATION")
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
window.insetsController?.hide(WindowInsets.Type.statusBars())
}else{
window.setFlags(
WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN
)
}
You have to check this package flutter_native_splash, in this package you just need to set your splash screen image path.
Add this code into your pubspec.yaml file
flutter_native_splash:
background_image: "assets/images/splash_bg.png"
Make sure to run this command:
flutter pub run flutter_native_splash:create
When you config flutter_native_splash like this:
After run command: "flutter pub run flutter_native_splash:create", flutter_native_splash package will generate some drawable files on android/ios folder like below:
In android, to display that image in fullscreen. open generated launch_background file and change gravity="center" to gravity="fill"
After modify gravity, run your app again, you will see splash screen displayed as full screen.
hello Vietnamese compatriot Trung Đoan, in my case just leave the "image: assets/splash.png" is fine, add
<item>
<bitmap android:gravity="center" android:src="#drawable/splash"/>
</item>
in launch_background.xml file, and do the rest as you said, thank you <3
Unfortunately Android does not have good support for filling the screen without distorting the image. One way you can fix this problem is to make the splash screen image larger than it needs to be, set it as centered, and then the splash image will be clipped by the size of the screen.
Good morning Stackers!
I recently became a proud owner of a Galaxy S8.
However, I was kind of dissapointed in Samsungs Edge Lighting feature.
So, I decided to throw myself into the world of android applications, and try to write a similar app myself.
Proud to say that I got pretty far, but, I'm not just here to share my successess.
My problem concerns the navigationbar. Since this is my first question on Stack, I'm not sure how to make this question organized, so I'll just put photo's here, with exeplenation underneath them.
I apologize for using links instead of posting images directly. I'm new to Stack and therefor don't have enough reputation points to post images. Sadlife.
This is a screenshot from my version of such a ring, without the navigationbar.
My app without navigation-bar
Looks pretty good in my opinion! :3
However, if I take that to an application that forces the navigationbar to be shown, my "overlay" gets pushed up, like so:
My app with navigation-bar
Let me now explain what I have tried so far.
Basically, I tried every combination of both View flags, as well as WindowManager.LayoutParams flags. I also messed around a lot with just the style of the overlay, in the XML file.
The screenshots you see above were taken with the following configuration:
For the LayoutParams:
WindowManager.LayoutParams params = new WindowManager.LayoutParams(
WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
| WindowManager.LayoutParams.FLAG_LAYOUT_ATTACHED_IN_DECOR
| WindowManager.LayoutParams.FLAG_FULLSCREEN
| WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
PixelFormat.TRANSLUCENT
);
For the View flags:
mTopView.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
);
And the XML style for the overlay:
<style name="OverlayDialog" parent="android:style/Theme.Translucent.NoTitleBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowFrame">#null</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
The overlay Layout file itself looks like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/notification"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/navigationBarBackground"
android:background="#android:color/transparent"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:focusable="false"
android:orientation="vertical"
android:theme="#style/OverlayDialog" >
<ImageView
android:id="#+id/vector_drawable_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:background="#drawable/vector_drawable"
android:backgroundTint="#android:color/holo_blue_bright"
android:backgroundTintMode="src_in"
android:focusable="false"
android:theme="#style/OverlayDialog"
android:visibility="visible" />
I have also tried the WindowManager.LayoutParams with an offset on the y-axis, to force it down. This does work, but when you then, when you open an app that doesn't have the notification-bar, the overlay get's pushed back down, going below the screen (wish I could post a screenshot).
Here is the code for that anyway:
WindowManager.LayoutParams params = new WindowManager.LayoutParams(-1, -1, 0, -100,
WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
| WindowManager.LayoutParams.FLAG_LAYOUT_ATTACHED_IN_DECOR
| WindowManager.LayoutParams.FLAG_FULLSCREEN
| WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
PixelFormat.TRANSLUCENT
);
So, to wrap things up, I leave you with the question:
How do I create my layout such that it doesn't get pushed up by the navigationbar.
If you need any more information, please don't hesitate to ask!
Thanks in advance and take care!
I didn't get much of your problem but i think you want that your bottom navigation bar should not interfere with the other parts of layout so i suggest you should go for per made bottom navigation activity given in Android studio 2.2 and above or you can use Coordinator layout which includes other layouts....
Source of images from http://www.androidauthority.com/using-coordinatorlayout-android-apps-703720/
I have searched everywhere but didn't get any help. I want to use a background image as full screen which will cover status bar and the footer navigation also which having a back button with home button and a task switcher button.
Like below image:
Transparent navigation bar work for Android 4.4+ (API 19) (just like status bar).
values/styles.xml
<style name="FullScreenEffectTheme" parent="Theme.AppCompat.NoActionBar">
<!-- ... -->
</style>
values-v19/styles.xml
<style name="FullScreenEffectTheme">
<!-- StatusBar -->
<item name="android:statusBarColor">#android:color/transparent</item>
<!-- NavigationBar -->
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
In code set flags:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
}
Don't forget to set this style to activity :)
Then you need to add padding or Space to your layout.
Important: If you want to have landscape orientation for phones translucent navigation bar cause ugly issue and in this case you should off this feature. I solved it like Tanner Perrien explained here.
An app that uses immersive mode leaves a black bar at the bottom of the screen when the app is returned to after waiting a while (activity is destroyed).
What is happening: (I have enabled the developer option: "Don't keep activities" to reproduce this).
First time launch of the app. Immersive mode works as expected.
Swipe up to reveal the 'immersive sticky' nav bar, and use the 'Home' button to leave the app. The background of the nav bar briefly shows a black background before the app closes.
Use the 'Recents' button, and select the app to resume it.
The app opens to briefly reveal the nav bar over a black bar. The system ui collapses into immersive mode but the black bar remains.
This bug also only appears on Lollipop, not KitKat.
I have stripped back the app to simply launching a dummy activity with no functionality apart from setting System UI flags:
public class DummyActivity extends FragmentActivity {
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
setSystemUiVisibility();
}
}
public void setSystemUiVisibility() {
if (getWindow() != null && getWindow().getDecorView() != null) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}
}
EDIT:
After creating a new fresh project with only this Activity I have seen this issue reproduced when using an app theme extending "android:Theme.Holo"..., and fixed the issue in this sample project when I extend the Material theme instead:
Change
<style name="AppTheme" parent="android:Theme.Holo.Light.NoActionBar.Fullscreen">
</style>
to
<style name="AppTheme"parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
</style>
Unfortunately this fix hasn't solved the issues in my main project, but it brings me closer to a solution and might help others with the same issue.
I was having the same problem. Here are a few updates I made which made it go away. Hopefully one of these works for you!
activity_main.xml
android:fitsSystemWindows="false"
style-v21
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowSharedElementsUseOverlay">false</item>
MainActivity.java
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
| View.SYSTEM_UI_FLAG_FULLSCREEN
);
For me it was a black bar at the top. Key thing was this in the activity style:
// Important to draw behind cutouts
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
Here is my code:
1- In Activity
private fun hideSystemUI() {
sysUIHidden = true
// Enables regular immersive mode.
// For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
// Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
// Hide the nav bar and status bar
or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // Hide nav bar
or View.SYSTEM_UI_FLAG_FULLSCREEN // Hide status bar
)
}
private fun showSystemUI() {
sysUIHidden = false
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
// Set the content to appear under the system bars so that the
// content doesn't resize when the system bars hide and show.
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION // layout Behind nav bar
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // layout Behind status bar
)
}
2- In root view of xml layout
android:fitsSystemWindows="false"
3- Style for the Full screen Activity:
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:statusBarColor">#50000000</item>
<item name="android:navigationBarColor">#50000000</item>
// Important to draw behind cutouts
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/sysTransparent</item>
</style>
Using
<style name="AppTheme"parent="android:Theme.Material.Light.NoActionBar.Fullscreen"> </style>
does solved the problem, but it only work for api:21.
In order to make it works for all system. You can create a directory called style-v21 in res directory, and put that style.xml there. Android system is smart enough to pick which one to use for new or old phone.
I have an app that I want to run in fullscreen. If i have a device with 4.4 KitKat it is easy to set the SYSTEM_UI_FLAG_IMMERSIVE to make the app go pure fullscreen.
However if i have a device with a lower API than 4.4. I have no idea how to make it fullscreen as if it was a KitKat with Immersive support.
I can set the Fullscreen, and hide navigation flags to make the app go fullscreen, but as soon as the screen is clicked, these flags are reset and will now show both navbar and statusbar.
Is there a solution where i can "simulate" the immersive mode on devices with JB and possibly ICS (not necesserily below).
I have a method hideSystemUI which runs when OnSystemUiVisibilityChangeListener triggers which look like this at the moment.
private void hideSystemUI() {
actionBar.hide();
isMenuVisible = false;
if (currentapiVersion >= android.os.Build.VERSION_CODES.KITKAT){
mDecorView.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE);
}
else{
mDecorView.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN);
}
}
What changes do I need to make to make the app go fullscreen and not showing navbar and statusbar on every click, but rather on slide from top or bottom.
This is as close as you're going to get:
if (Build.VERSION.SDK_INT >= 19) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
} else {
if (Build.VERSION.SDK_INT > 10) {
findViewById(android.R.id.content).setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);
}
}
And don't support devices with an SDK less than 10. Those jokers need to get a modern android anyway.
I had faced the same situation and after some research i figured out it is not possible below 4.4 because of security issues, and so old APIs wont support hiding navigation bar the way you want.
Even though from API 4.1 your use of SYSTEM_UI_FLAG_LAYOUT_STABLE flag your layout won't resize and it will inflate behind navigation bar, but you need to make sure none of your important UI components are covered by it.
https://developer.android.com/training/system-ui/immersive.html
Hope this helps..:)
just copy past below code into value/style.xml.
<resources>
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
There are two method for immersive mode
To make it remain immersive do change thid line
View.SYSTEM_UI_FLAG_IMMERSIVE
By this line-
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY