I've tried setting the action bar I custom-made for my application to be transparent. However instead of being completely transparent, it leaves a weird elevation shadow:
http://puu.sh/rdYyb/04ce0147f6.jpg
The XML for the bar:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/OverviewFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_alert" />
<RelativeLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
The styles XML for my themes:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"></style>
How I programatically try to remove the elevation and background in the activity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbarlayout);
appBarLayout.setElevation(0);
toolbar.setElevation(0);
appBarLayout.setBackgroundColor(ContextCompat.getColor(this, android.R.color.transparent));
toolbar.setBackgroundColor(ContextCompat.getColor(this, android.R.color.transparent));
But despite all this the box (shown in the link) still persists... I'm not sure what's going on? Does anyone see anything wrong in my code?
try putting inside app bar
app:elevation="0dp"
this inside your toolbar
android:background="#android:color/transparent"
I think you need to use "android:alpha="0.5" or use setAlpha() method.
i tried this and its worked for me and add this four line into toolbar widget in xml file.
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
Related
I'm trying to use a collapsingToolbarLayout to show an image and a bunch of options inside a recyclerview, what I have done is the followin
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="bottom"
app:expandedTitleMarginEnd="#dimen/activity_horizontal_margin"
app:expandedTitleMarginStart="#dimen/activity_horizontal_margin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="#string/app_name">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/ofertas_gradient" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This code, outputs this layout
Now, this is fine, and its working as espected in my fragment, the thing is that I also have the appbar configured my my NavigationController and is also poping above my toolbar
So, after swiping up, my toolbar collapses but I also have my appbar
So, what I did is this at my fragment to setup my toolbar
toolbar.apply {
setNavigationOnClickListener { findNavController().navigateUp() }
}
Now, I tried with actionBar.hide() to hide my actionbar and only let my toolbar to show up, but I cant get the actionBar, also I tried to setHomeDisplay as true with the toolbar but since I cant get the actionBar, I also cant add my navigationUp arrow to my toolbar
How can I also get the appBar from every fragment ?
Styles
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowLightStatusBar">true</item>
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/negro</item>
<item name="fontFamily">#font/cera_pro_light</item>
</style>
</resources>
Thanks
You're using Toolbar and ActionBar at the same time.
Change your styles.xml by changing DarkActionBar -> NoActionBar.
If you need ActionBar callbacks on your Activity or Fragment, you need to set your Toolbar as ActionBar.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowLightStatusBar">true</item>
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.NoActionBar">
<item name="android:textColorPrimary">#color/negro</item>
<item name="fontFamily">#font/cera_pro_light</item>
</style>
</resources>
Optional (In your Activity's onCreate())
setSupportActionBar(toolbar)
I am new to Android and working on my first android app. For my app I need a transparent Action Bar with a Navigation Drawer button. Everything is working fine except the color of the Action Bar. It is having blue color instead of transparent. I have tried various ways to make it transparent but its still blue. Can someone please help me out with my code:
custom_navigation_bar.xml:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
styles.xml:
<resources>
<!-- Themes for Navigation Drawer -->
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay"
parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#00000000</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#00000000</item>
</style>
</resources>
Java Code Snippet:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Setting Transparent Color for Action Bar
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));
You can just set the toolbar background to transparent :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00000000"/>
you have one item in base theme windowActionBarOverlay set it to true and set action bar color to transparent.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#color/text_color</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
</style>
</resources>
I use theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
And toolbar looks like this
But for CoordinatorLayour I need custom toolbar, not most-top-element (most top will be collapsing layout), so I use following style for Activity:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
And toolbar in activity.xml
<android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
But it does not populated with colors from AppTheme. And looks like this
Why? I need my theme colors and dots at the center of toolbar.
After some research I found, that toolbar theme is not AppCompat theme and sould be ThemeOverlay.*
For dark action bar theme I should use
<style name="BarTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
not from parent="Theme.AppCompat.Light.DarkActionBar"
This fixes all color problems.
To fix title and 3 dots (put it in the middle of toolbar) - AppBarLayout height should be wrap_content (was fixed size before), and collapsing size in pixels should be moved to CollapsingToolbarLayout under AppBarLayout.
try to add android:background="#color/primary" to your toolbar definiton.
Like:
android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
android:background="#color/primary"
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
Add following to your theme :
<!-- toolbar title and overflow menu color -->
<item name="android:textColorSecondary">#color/white</item>
And for the vertically center align you have to use height of toolbar as following :
<android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" <!-- Height change -->
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
There are a lot of questions about making transparent toolbar. but none of the given answers have solved my problem.
my issue here is that,i want to make transparent toolbar and it should has primary color background only when user scrolled up or down. But initially it has to be transparent until scroll up/down event occurred.
for that i have following theme:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
activity_main.xml :
<android.support.v4.widget.DrawerLayout
...
/>
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
.....
</android.support.v4.widget.DrawerLayout>
app_bar_main:
<android.support.design.widget.CoordinatorLayout
....
.... />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
....
....
</android.support.design.widget.CoordinatorLayout>
But instead of getting transparent toolbar, i got a toolbar with white background.
can you please check what is wrong in my theme.xml?
I am using design support library 23.1.1
Thanks
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" />