I tried to remove the shadow below the toolbar with the Theme.AppCompat.Light.NoActionBar, using every recommendation of people who have ever answer it before, but no one worked. I tried
<item name="android:windowContentOverlay">#null</item>
and
<item name="android:windowContentOverlay">#drawable/solid_line</item> ....
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<solid android:color="#color/accueil_color" />
<size android:height="15dp" />
</shape>
and with this,
android:elevation="0dp"
the shadow goes from the top of the screen but not disapear.
Have you any idea for totally remove this shadow line ??
I'm not an expert but I run into the same problem just a few hours ago. So the idea here is that with AppCompat we have to manage the library attributes rather than Android attributes. In other words, instead of android:elevation try app:elevation:
<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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
EDIT :
I just tried another option without AppBarLayout. This way works perfectly fine for me, the shadow is completely gone. So I suspect the problem is in your other View. I don't think it's your ToolBar drops the shadow.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp" />
use app:elevation="0dp" instead of android:elevation
I had the same problem. Applying app:elevation="0dp" on android.support.design.widget.AppBarLayout solves the issue
Add app:elevation="0dp" in AppBarLayout and shadow will be hide.
I had the same problem.
If your Toolbar is inside android.support.design.widget.AppBarLayout
Adding app:elevation="0dp" on android.support.design.widget.AppBarLayoutwill solve your problem.
Else add app:elevation="0dp" on Toolbar.
<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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Hope it helps :)
Just use after the super.onCreate(savedInstanceState);
if(getSupportActionBar() != null)
{
getSupportActionBar().setElevation(0);
}
Just put your AppBarLayout inside of a LinearLayout on a separated XML file, and then, include this XML to your main XML.
#DmitryO
Hum my xml is like this, i don't have android.support.design.widget.AppBarLayout, just the toolbar widget,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:theme="#style/AppThemeAccueil">
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/statusBarHeight"
android:background="#color/accueil_colorDark"
android:elevation="#dimen/statusBarElevation"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:popupTheme="#style/AppThemeAccueilToolbar"
android:theme="#style/AppThemeAccueilToolbar"
android:id="#+id/toolbarAccueil"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
materialdesign:elevation="0dp"
android:elevation="0dp"
android:outlineProvider="background"
android:layout_marginTop="#dimen/appBarTopMargin" >
</android.support.v7.widget.Toolbar>
</RelativeLayout>
Have I to had this ? (I think this will not change the result)
If your are not using Toolbar on the Layout and you have the default toolbar from AppCompactActivity this can help you
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().setElevation(0);
At least it worked for me.
Regards,
In Kotlin, use:
supportActionBar!!.elevation = 0.0f
Regards!
Related
I'm new to Android Studio and it is creating a lot of problem to me while setting my toolbar in and activity,the problem is whenever i change it layout width and height to the following
layout_width=match_parent
layout_height=attr/actionBarsize
it is getting back to change to the following
layout_width=368dp
layout_height=56dp
No matter how many times it tried to change it is giving me the same result again and again.
Yeah this was really annoying me too. I presume you are trying to put the toolbar within a ConstraintLayout.
ConstraintLayout doesn't support match_parent and it expects every view to be constrained. When you click in the design mode of the Android Studio, the editor will kick in and try to 'fix' any issues with your xml. In this case it finds your toolbar is not constrained and is incorrectly using match_parent and so tries to fix this for you (and you should see a warning that the toolbar is not constrained).
I think you have 2 options:
1 Constrain the toolbar in your layout and replace 'match_parent' with '0dp'
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp" />
2 Put the toolbar within a co-ordinator layout. You used to have to do this for scrolling functionality with the toolbar, but with the new ConstraintLayout I'm not sure if this still applies
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CoordinatorLayout>
XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/coach_bar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#F4B702"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!--<Your Design>-->
</RelativeLayout >
Java
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.drawable.my_icon);
setSupportActionBar(toolbar);
if(getSupportActionBar()!=null)
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Manifest.xml
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:screenOrientation="portrait"
android:theme="#style/AppTheme.NoActionBar"/>
I had this problem and finally I found that I didn't saved style.xml after it changed.
I am developing a tabbed application and for some tabs I want to hide the toolbar. I am setting the visibility as gone to accomplish that. Below is my XML file,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="#+id/main_content"
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:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
But I am seeing some item still on the top section of the screen. please check the screen shot. Am i doing it correctly? Is there any better way to hide Toolbar.
Thanks.
You can hide the toolbar programmatically using the following code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setVisibility(View.GONE);`
And if that doesn't fix the problem, try removing from your AppBarLayout,
android:paddingTop="#dimen/appbar_padding_top"
and change your toolbar to this
app:layout_scrollFlags="scroll"
This would fix your problems
To hide the toolbar in your App, just add two lines in your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
I'm trying to achieve something like this
. I want a transparent toolbar/statusbar with an ImageView underneath them.
I wasn't able to make the toolbar transparent so I tried using CollapsingToolbarLayout and removing the scroll behaviour. It worked but I wasn't able to make the status bar transparent.
Is there a way to make the toolbar transparent and put an ImageView beneath it or is there a better way to implement it?
Edit:
Standard xml-layout. I didn't change anyhting so far.
<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"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" /> </android.support.design.widget.CoordinatorLayout>
Try this.
toolbar.getBackground().setAlpha(0);
Or better -
transparent Actionbar with AppCompat-v7 21
I created a project to try the transparent status bar.
you need add the following to the styles (for v19 and v21)
<!-- Make the status bar traslucent -->
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowTranslucentStatus">true</item>
</style>
This is the layout xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/AppTheme.AppBarOverlay">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sun"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
... the rest of my xml
this is the output from the layout of a v19 device.
create_account.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"
tools:context="io.sleeko.board.CreateAccountActivity">
<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"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_create_account" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
I need to make the above ToolBar transparent. so that we can see the background Image.I have tried different methods. but couldn't find correct solution.
please help.thanks
Most of the times we want the toolbar to be translucent because we want to show content behind it. The problem is that the colors of the content behind the toolbar can collide with the color of the toolbar elements/text (up/back arrow for example).
For that reason you'll see in a lot of implementations that the toolbar is actually not transparent but translucent with a gradient.
You can obtain this with the next code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/background_toolbar_translucent" />
background_toolbar_translucent.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/black_alpha_40"/>
</shape>
colors.xml
<color name="black_alpha_40">#66000000</color>
You can play with different values on the gradient, what I've found is that for white elements, the black 40% works fine.
Another thing that you might want to do is to hide the title of the toolbar.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
And show the up affordance...
getSupportActionBar().setDisplayShowTitleEnabled(false);
Don't worry if you see something like this in the layout preview panel...
It looks very different when is actually overlapping the content:
Here is my solution.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:background="#00000000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
That is my version of how to get the transparent Toolbar without shadow in AppBarLayout. The major problem with the above solutions was when I made the toolbar transparent, the shadow was still cast under it. To make the transparent toolbar with the back navigationIcon in Fragment:
layout_transparent_toolbar_fragment.xml:
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/general_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:navigationIcon="#drawable/ic_arrow_back_black_24dp"></android.support.v7.widget.Toolbar>
and in TransparentToolbarFragment:
override fun onCreateView(inflater: LayoutInflater, vg: ViewGroup?, savedInstanceState: Bundle?): View? {
val layout = inflater.inflate(R.layout.layout_transparent_toolbar_fragment, vg, false)
val toolbar = layout.findViewById<View>(R.id.toolbar) as Toolbar
val appBar = layout.findViewById<View>(R.id.general_appbar) as AppBarLayout
appBar.outlineProvider = null
val appCompatActivity = (activity as AppCompatActivity)
appCompatActivity.setSupportActionBar(toolbar)
val actionBar = appCompatActivity.getSupportActionBar()
if (actionBar != null) actionBar!!.setDisplayHomeAsUpEnabled(true)
toolbar.setNavigationOnClickListener { appCompatActivity.finish() }
return layout
}
Actually, the line
appBar.outlineProvider = null
does the job of hiding the toolbar shadow.
Try that:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
and remove that with end tag:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
But don't make it full transparent, you can use color have transparency like #93000000 so it will be like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#93000000"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
I'm trying to create an extended toolbar, something like:
My activity xml:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" >
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="128dp"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
From some reason, the elevation is not at the bottom of the Toolbar:
Any idea?
Thanks!
Finally found it - there are two toolbars displayed, the decor one and the one I've added. Changed my theme to inherit from "Theme.AppCompat.Light.NoActionBar" and now only my toolbar is visible.
Thanks anyway!