So I've looked around and can't find an answer to this. I have a toolbar which shows up fine for anything lollipop and up but looks like the following for pre-lollipop devices:
Here is my code for the styles and everything:
style xml file
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:dropDownListViewStyle">#style/appStyleSpinner</item>
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowNoTitle">true</item>
<item name="actionModeStyle">#style/myActionMode</item>
</style>
<style name="myActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="background">#color/primaryColor</item>
</style>
toolbar xml file
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
...
I figured out the problem! In my xml file for the main screen, I had
<include layout="#layout/app_bar"
android:id="#+id/app_bar"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/parmesan_bg"
android:scaleType="centerCrop"
android:contentDescription="photo of delicious dinner"/>
which was causing the toolbar to load behind the image instead of in front of it. So move the "include layout" to after the imageview and voila, problem solved!
Related
I'm trying to set a transparent status bar (like on a preview), but it looks like on video: https://yadi.sk/i/HcYJa3VB3WYGvL
Preview:
I tried set in styles xml's
<item name="android:windowBackground">#android:color/transparent< /item>
in different Layouts, also set
fitsSystemWindows = "true"
MainActivity.xml:
<android.support.v4.widget.DrawerLayout
...
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_container"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:background="#color/color_primary">
<android.support.design.widget.CollapsingToolbarLayout
...
app:contentScrim="#color/color_primary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/user_photo"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_image_size"
android:scaleType="centerCrop"
android:src="#drawable/user_photo"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.PopupOverlay"
app:titleTextColor="#color/white"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_height="match_parent"
android:layout_width="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
.../>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
...>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
v21/style.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_accent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/color_accent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
There are two different cases:
1.If you want slightly transparent status bar(as you described in your question)
<style name="ThemeActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid">
<item name="android:background"> #null </item>
<!-- Support library compatibility -->
<item name="background">#null</item>
<item name="android:displayOptions"> showHome | useLogo</item>
<item name="displayOptions">showHome|useLogo</item>
2.For Completely transparent status bar:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
check this answer you understand how things works.
add this in your theme
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
Set android:fitsSystemWindows=”true” to root container
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
add in your Activity
All you need to do is set these properties in your theme:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
Your activity/container layout you wish to have a transparent status bar needs this property set:
android:fitsSystemWindows="true"
Already have answer od this question. Follow: Android Completely transparent Status Bar?
In my app I have two activities right now. The first one, LoginActivity, has Theme.AppCompat.Light.DarkActionBar as its theme. The other one, ClientesActivity, has an <item name="windowActionBar">false</item> and a custom android.support.v7.widget.Toolbar. They used to behave correctly. When I updated to Build Tools 27.0.1, Gradle 3.0.1 and Support Library 27.0.2, they all started looking like this:
LoginActivity
ClientesActivity
Here's the code:
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#FAFAFA</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppThemeNoBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
clientes_activity.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/AppThemeNoBar"
tools:context="melamed.soldeloesteapp.ClientesActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/tb_clientes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_clientes"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Carrito">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- Some more irrelevant stuff -->
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Please someone tell me how to fix them back!
PS: They were blue and with white text, as any toolbar (the custom one had white buttons).
OK, I found the solution by myself while removing stuff. I discovered that from some support library version, android:background in a style affects only the Toolbar (WTF?). I removed the <item name="android:background">#FAFAFA</item>
and it worked. Now, how can I default a background colour from a theme? (Answer in the comments, cba to make a whole new question about this)
I just updated android.support:appcompat lib to 22.1.1.
Toolbar is visible on a Lollipop device but not on a 4.X device.
I have even tried extending AppCompatActivity, but still no luck. If anything else is required please let me know.
Here is my project styles and base activity xml file.
styles.xml
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primarydark</item>
<item name="colorAccent">#color/primary</item>
<item name="colorControlHighlight">#color/primary</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="windowActionModeOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#color/activity_bg</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
activity_base.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fulllayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/primary">
</android.support.v7.widget.Toolbar>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container">
</FrameLayout>
</RelativeLayout>
Update :
Issue is with layout inflated in container part. it is overlapping toolbar so i have removed all views and it worked.
Thanks all...
I'm trying to switch over an app to use Theme.Material, I have a toolbar setup with fitsSystemWindows set to true yet my activity extends below the navigation bars!!
Here's my theme
<style name="FlowTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowFullscreen">false</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="cpvColor">#color/accent</item>
<item name="cpvStrokeWidth">3dp</item>
<item name="cpvCircleAnimDuration">1400</item>
<item name="cpvSweepAnimDuration">950</item>
</style>
Nothing is triggerend in my activity to flag fullscreen
What's going on? how do I fix this so that it's not fullscreen?
Edit: Here's my main activity XML
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
android:orientation="vertical">
<include
android:id="#+id/toolbar_actionbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ActMain"
tools:ignore="MergeRootFrame"
android:layout_below="#+id/toolbar_actionbar" />
</LinearLayout>
<fragment
android:id="#+id/fragment_drawer"
android:name="com.metalab.flow.ui.fragments.FrNavigationDrawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fr_navigation_drawer" />
this is the reason
Theme.AppCompat.Light.NoActionBar // i show no actionbar..
put this in your activity xml layout, if its linearLayout let it be the first child, if its RelativeLayout let it be on top and all children should align to it..
<android.support.v7.widget.Toolbar 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="wrap_content"
android:minHeight="?attr/actionBarSize"
app:theme="#style/FlowTheme" />
style
<style name="FlowTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowFullscreen">false</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="cpvColor">#color/accent</item>
<item name="cpvStrokeWidth">3dp</item>
<item name="cpvCircleAnimDuration">1400</item>
<item name="cpvSweepAnimDuration">950</item>
</style>
As it turns out I was using this class, for a core WebView bug fix https://github.com/madebycm/AndroidBug5497Workaround
Removing it's use fixed my issue, however the WebView resize bug lives on...
You are using wrap_content in your toolbar, and if you havent given support to it, then it hasn't content to show. I recomend you that change the height of the toolbar to:
android:layout_height="?attr/actionBarSize"
And you should give support in your java file to show the title and buttons:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
setSupportActionBar(toolbar);
EDIT: I read some of other replies, and I add more info because I suppose that you had the toolbar defined in other xml. This is an example of toolbar that you should include:
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:translationZ="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Is there a way to make the ActionBar transparent in Material Design via Appcompat-v7 21? This is not working unfortunately.
<item name="colorPrimary">#android:color/transparent</item>
Also not the old:
<style name="Widget.Styled.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ACTION BAR STYLES -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_background</item>
<item name="windowActionBarOverlay">true</item>
</style>
Actually, it's quite easy and simple.
Just ensure that you use RelativeLayout to lay Toolbar and the body.
Put the Toolbar in the last.
Put transparent color for android:background attribute of the Toolbar
This is an example of a working code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical">
<fragment
android:id="#+id/fragment_editor"
android:name="ichsan.myapp.HelloFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragment_editor" />
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#10000000"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
Hope it answers the question.
Step:
1. put below style into v21\styles.xml
<style name="TransperantToolbar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
2. Your toolbar xml code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/TransperantToolbar"/>
None of the above did the trick for me (or at least not by themselves)
using appcompat v7 23 and a CoordinatorLayout, which is most likely the culprit. If you are going that route, then you probably have a main activity layout that looks like
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.farmdog.farmdog.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--android:theme="#style/AppTheme.AppBarOverlay">-->
...
Notice the two layout anchor lines above - those did it for me.