I've used the following in my style to make the status bar transparent:
<style name="TransparentStatusBar" parent="ThemeBase">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
But now there's a shadow at the top of the screen where the status bar was:
How can I remove this shadow?
Edit:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ToolbarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
Activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResource());
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(ContextCompat.getDrawable(this, R.drawable.ic_action_back));
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
}
}
ToolbarTheme:
<style name="ToolbarTheme" parent="ThemeBase">
<item name="android:textColorPrimary">#color/white</item>
</style>
Late to the party!
This black shadow is mainly due to
<item name="android:windowTranslucentStatus">true</item>
There are two ways you can handle that.
You only need to have the same color for status bar as the below view.
(This way is if you add a background image you gets caught.Because actually its two views,Status bar and its below View in same color.Yet some people need this! )
For this you do not need android:windowTranslucentStatus.It will make that black shadow!
Making <item name="android:statusBarColor">#color/asSameColorAsBelowViewColor</item> you can achieve it.Even this can be applied to OP's question here.But its for colors.Other wise you get trapped.
You really need to go your view behind StatusBarwithout that black shadow.
eg: In a situation that you need to use an image.
For this again if you are using <item name="android:windowTranslucentStatus">true</item> you can remove it and add <item name="android:statusBarColor">#color/transparent</item>
and add getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); in your Activity before setContentView().
Related
I'm using the Android component navigation for a DrawerLayout with NavigationView.
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
LoginActivity.toClose.finish();
LoginViewModel viewModel = ViewModelProviders.of(this).get(LoginViewModel.class);
Toolbar toolbar = findViewById(R.id.toolbar_menu);
setSupportActionBar(toolbar);
ActionBar actionbar = getSupportActionBar();
assert actionbar != null;
drawerLayout = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view_menu);
navigationView.inflateMenu(viewModel.setUserInterface());
NavController navController = Navigation.findNavController(this, R.id.fragment_main);
NavigationUI.setupWithNavController(navigationView, navController);
NavigationUI.setupActionBarWithNavController(this,navController,drawerLayout);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}
}
Everything's ok, except that the "Up button" are in a different color that my title in The action bar.
The XML for the Toolbar is:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:textColor="#FFF"
android:textColorPrimary="#FFF"
android:theme="#style/Toolbar"
app:layout_constraintTop_toTopOf="parent"
app:titleTextColor="#FFF"
app:title="#string/app_name"/>
The title is white, but the icon is black.
My question is: how can I change the color of this icon?
Even if I change the primary color to white and the theme editor show me the icon in white, when the app is running, the color is still black.
The app that I'm building has minSdkVersion 15
and I run it in a phone with API 7 SDK 24.
I didn't run in the emulator with SDK 15 yet.
use this style
<style name="ToolbarTheme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- Customize color of Toolbar -->
<item name="colorControlNormal">#color/WhiteColor</item>
</style>
and then use it in app:theme="#style/ToolbarTheme" in your Toolbar XML :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:textColor="#FFF"
android:textColorPrimary="#FFF"
app:theme="#style/ToolbarTheme"
app:layout_constraintTop_toTopOf="parent"
app:titleTextColor="#FFF"
app:title="#string/app_name"/>
Another option, with new Themes (Light/Dark modes) is to use styles and themes.
First approach.
This works if you use default icons and in a fragment (e.g.) you use following: toolbar.setupWithNavController(findNavController()), so then in layout you must do following:
In your app theme in xml:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<item name="drawerArrowStyle">#style/MyDrawerArrowToggleStyle</item>
Note: This solution is for your own toolbars, which you placed in your layout by yourself, that's why my main app theme is Theme.MaterialComponents.DayNight.NoActionBar. However, I haven't tried with default ActionBar, so maybe it will work as well.
Your drawer arrow/toggle style:
<style name="MyDrawerArrowToggleStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/your_color_here</item>
</style>
And now all default "<-" icons in toolbars will be in your color. It should work for Hamburger icons too. But I didn't check, as I don't have navigation drawer.
Second approach.
When you want your own icon or action in NavigationOnClickListener.
In the fragment:
toolbar.setNavigationOnClickListener {
findNavController().navigateUp()
//plus another actions if required
}
toolbar.setNavigationIcon(R.drawable.your_icon_here)
In main theme:
<item name="toolbarNavigationButtonStyle">#style/MyAppToolbarNavButtonStyle</item>
My style:
<style name="MyAppToolbarNavButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="tint">#color/your_color_here</item>
</style>
I' developing an android app and I need to use my custom title bar using a picture and two buttons. The thing is, immediately when I launch my app, during 1 or 2 seconds before my custom title bar appears, there is the ugly default one with "my application" displayed. The minimum targeted API is 15.
All the answers found on stack overflow didn't work, or succeed to make it disappear but was doing the same to my custom title bar.
Here is how I call it from my activity:
supportRequestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
super.onCreate(savedInstanceState);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,R.layout.topbarclassic);
Since my first view is a fragment I dont call SetContentView
And this is my custom styles.xml:
<resources>
<style name="theme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTitleSize">50dp</item>
<item name="android:windowNoTitle">false</item>
</style>
</resources>
Once again my custom title bar works properly. I just need to get rid of the default one displayed quickly when the app starts. Thanks a lot!
if you use this style the activity will load without an action bar
<style name="theme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then you should really be using a toolbar to set the action bar. For example :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize" />
</RelativeLayout>
Then in your activity you can set the action bar like this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(...);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
Dont forget to set your them in your AndroidManifest.xml
<activity
android:name=".path.MyActivity"
android:theme="#style/theme"/>
If found a workaround for my problem using Modge's link about splashscreen.
It doesn't solve the problem itself but remains a good workaround.
I created a small activity in charge of the splash screen, avoiding the white first screen to stay for too long. Then this splash redirect on my main activity.
This is also useful in my case since I can start some connection process during the splash screen. You can follow this example: http://www.androidhive.info/2013/07/how-to-implement-android-splash-screen-2/
I have an app that uses fitsSystemWindows to be able to draw an background behind Navigation- and Status-Bar - unfortunately the SnackBar seems to ignore the fitsSystemWindows=true from the container. I boiled the problem down to this minimal app:
the style:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowBackground">#color/accent_material_dark</item>
<item name="android:fitsSystemWindows">false</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
</resources>
the layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:text="#string/hello_world"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
the activity:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(final View v) {
Snackbar.make(v,"This Snackbar should fitSystemWindows",Snackbar.LENGTH_INDEFINITE).show();
}
});
}
}
Anyone knows some workaround?
I published the minimal app to show the problem here:
https://github.com/ligi/SnackBarFitsSystemWindowProblem
Snackbar will always look for a CoordinatorLayout to anchor itself in: when you don't have one, it uses the full content view (which in your case, includes the area under the status bar) - adding a CoordinatorLayout that has fitsSystemWindows=true should do it.
You can also use the following line in place of any CoordinatorLayout in Snackbar declaration with findViewById(android.support.design.R.id.design_navigation_view) .
Well The correct answer is add
android:paddingbottom="50dp" to your CoordinatorLayout
although i'm not sure if all navigation bar size's is 50 dp
I have just adopted Material Design Toolbar into my app. I have followed the guidance from Chris Banes blog for getting it working on pre-Lollipop devices
However, it seems that I can't get my action menu items to be vertically centered.
Here is a screenshot of what it looks like on Kitkat device.
As you can see the title and menu icons are not aligned. Somehow title is aligned correctly but not the action menus nor navigation icon. They are instead align to bottom.
Here is my toolbar layout
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimaryDark"/>
I tried putting android:gravity on the layout but it doesn't do anything.
Here is my abstract activity code that assign toolbar as action bar
public abstract class BaseMaterialActivity extends ActionBarActivity {
private Toolbar toolbar;
public abstract int getLayoutResources();
public abstract boolean isShowActionBar();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResources());
if (isShowActionBar()) {
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_drawer));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_nav_back);
}
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
}
}
public Toolbar getToolbar() {
return toolbar;
}
}
Here is my menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_filter"
android:icon="#drawable/ic_filter"
android:orderInCategory="1"
app:showAsAction="always|withText"
android:title="#string/filters" />
<item
android:id="#+id/action_cart"
app:actionLayout="#layout/action_cart_icon_layout"
android:orderInCategory="2"
app:showAsAction="always"
android:title="#string/cart" />
</menu>
Any help or pointer on how to get the action menu to be vertically centered would be appreciated. Thank you!
Instead of
android:layout_height="?android:attr/actionBarSize"
write
android:layout_height="?actionBarSize"
The second is defined by the AppCompat theme with correct height (56dp default, 48dp in normal landscape and 64dp on tablets).
Note: What you wrote would work correctly only on Android 5.0.
I am developing an Activity where I need to make the navigation bar opaque, and the status bar transparent on devices running 5.0+ (API 21+). The styles I am using are below, along with an explanation of my problem.
AppTheme extends Theme.AppCompat.Light.NoActionBar
<item name="android:statusBarColor">#color/transparent</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/welbe_red_transparent</item>
FullscreenTheme extends AppTheme
<item name="android:windowNoTitle">true</item>
<item name="android:statusBarColor">#color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
This makes the app look like this
If I remove the android:windowTranslucentNavigation style, or set it to false in Fullscreen, it fixes the navigation bar issue. The problem is the status bar turns completely white instead of staying transparent and displaying the content behind it.
I have tried using fitsSystemWindow="true" in my layouts, but it didn't fix the issue. Anyone know why this is happening?
android:windowTranslucentNavigation does one thing that android:statusBarColor doesn't do, which is requesting the SYSTEM_UI_FLAG_LAYOUT_STABLE and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags.
These are the ones that you need to request in order to draw behind the status bar.
Request them in the onCreate of your Activity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
Alternatively you can also simply set your apps theme background and that will also pop up behind your status bar.
More information here.
As far as I know there's no proper way to set the color of the status bar on APIs lower than 19.
For API 19+ you can use a similar attribute to windowTranslucentNavigation only for the status bar:
<item name="android:windowTranslucentStatus">true</item>
Notes:
The reason you were getting a white status bar is because of
<item name="android:statusBarColor">#color/transparent</item>
There are some hacks that work on specific manufacturer devices, but I wouldn't use them myself.
I struggle with this for over 3 hours. Wrap everything in a CoordinatorLayout it is the only one that seems to pay attention to the fitsSystemWindow="true" or "false"
This is my main activity fragment
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/layout_google_map"/>
<include layout="#layout/layout_toolbar_transparent"/>
<include layout="#layout/layout_action_buttons"/>
<include layout="#layout/layout_bottom_sheet"/>
</android.support.design.widget.CoordinatorLayout>
this is my toolbar layout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ToolbarTheme"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="?actionBarSize"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:srcCompat="#drawable/ic_fynd_logo_red"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
as you can see, my fragment layout makes the google map be drawn under the status bar.
I have an action bar where the company's logo goes.
And other ui buttons "layout_action_buttons" also wrapped in a Coordinator layout , so the fitsSystemsWindows works.
Check it out.
To achieve this in any activity
Add the style:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
Use CoordinatorLayout as root layout in XML
In oncreate() method, before setcontentview use
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
For the latest android version R and backward compatibility, this works for me.
WindowCompat.getInsetsController(window, window.decorView)?.isAppearanceLightStatusBars =false /* true for dark icon on StatusBar and false for white icon on StatusBar */
WindowCompat.setDecorFitsSystemWindows(window, false)
WindowCompat.getInsetsController(window, window.decorView)?.show(WindowInsetsCompat.Type.statusBars())
ViewCompat.setOnApplyWindowInsetsListener(findViewById(android.R.id.content)) { rootView, insets ->
val navigationBarHeight = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom
rootView.setPadding(0, 0, 0, navigationBarHeight)
insets
}
For Fragment, you can use activity?.window...