Issues when toolbar and appbarLayout work with transparent navigation bar - android

In my activity I have a list, I want my list under transparent navigation bar.
I define a 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>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
Here is my layout :
<?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:id="#+id/coordinator_layout_base"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- only for test -->
<RelativeLayout
android:id="#+id/containerContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="2000dp"
android:background="#FF00FF"/>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.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"
app:srcCompat="#android:drawable/ic_dialog_email"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
But I got toolbar and appbar under status bar : Toobar and Appbar layout under status bar
I try to add fitSystem = "true" to toolbar, I got some weired height of toolbar : Wrong toolbar height
Anyone how to know to fix this? Thanks a lot!
I use :
implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'
implementation 'androidx.core:core-ktx:1.1.0-alpha04'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'com.google.android.material:material:1.1.0-alpha03'

Related

Android status bar is shadow

I just want bring my navigation drawer under status bar every thing works fine but problem is my status bar is shadow .
How can i change it to transparent , like play store app .
Here is my app theme
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#android:color/white</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">?attr/colorControlHighlight</item>
and main activity xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"/>
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:headerLayout="#layout/nav_header"
android:fitsSystemWindows="false"
android:layout_gravity="start"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
You can simply change Android status bar color as transparent.
this will help you.
Window window = activity.getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
/*----set color----*/
window.setStatusBarColor(activity.getResources().getColor(R.color.my_statusbar_color));
ok i fix it my self if you have similar problem remove all these lines from your theme
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
and just add
android:fitsSystemWindows="true"
to your main liniear layout

Toolbar/Actionbar not showing in API16

In my app, I currently have 2 activities. I'm able to get the toolbar to display in the second one, but on the main one it won't show up in earlier APIs. If I run it on a Marshmallow device, it works fine, but I've tried running it on an emulator with API16 (4.1) and the toolbar just isn't there. I can open my second activity, and the toolbar for that appears, but not in the main one even though I have them implemented exactly the same. In my activity xml I have:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
android:background="#fafafa"
tools:context=".Quotr">
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_quoter" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainFab"
android:src="#drawable/ic_add_white_24dp"
android:layout_margin="#dimen/fab_margin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:layout_gravity="end|bottom"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change colors"
android:id="#+id/button"
android:visibility="invisible"
android:layout_above="#+id/mainFab"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom"
android:layout_marginBottom="50dp"/>
</android.support.design.widget.CoordinatorLayout>
Then in my onCreate I have
Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(toolbar);
This is my styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.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.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="NoActionBarTransparentNav" parent="AppTheme.NoActionBar" >
<item name="android:windowTranslucentNavigation">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
If I'm forgetting to post anything, the full source is at:
https://github.com/Ashanmaril/Quotr
For some reason the toolbar will display on Marshmallow and whatnot, but not in Jellybean.
In .java use
public class MainActivity extends Activity
or
public class MainActivity extends ActionBarActivity??
And try to force
if (android.os.Build.VERSION.SDK_INT > 13) {
ActionBar bar = getSupportActionBar();
bar.setLogo(R.drawable.myicon);
bar.setDisplayUseLogoEnabled(true);
bar.setDisplayShowHomeEnabled(true);
}
Finally figured it out. I had to wrap my toolbar in a LinearLayout for it to work
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
And that fixed it.

Unable to run the android app without setting "window no title" to "true"

Something is making my app crash. I am not sure why I need to run a drawing app
my styles.xml file:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
this is my styles.xml v21 file
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">true</item>
**<item name="windowNoTitle">true</item>**
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
If I set the above to false, my drawing app will crash.
My drawingcontent.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/drawing_main"
tools:context=".DrawingActivity">
android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/toolbar_bottom" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:visibility="gone"/>
<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" />
</RelativeLayout>
The other is my drawing_main.xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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=".DrawingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<com.example.kahheng.smartchat.CustomView
android:id="#+id/custom_view"
android:layout_below="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/toolbar_bottom" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</RelativeLayout>
Please tell me what wrong with my code and why I must remove the statusbar?
anyone got a idea?
I got code from here
http://www.valokafor.com/android-drawing-app-tutorial-pt-2/
You are using a Toolbar in your XML, and I presume you are using that Toolbar as your ActionBar. Therefore, you can't have another action bar from the theme (there can be only 1 action bar in one activity). So to use the Toolbar as action bar, you have to either use "window no title" or inherit from one of the .NoActionBar themes.

center align the toolbar items when height of toolbar is changed

i am trying to reduce the height of toolbar but when i have declared particular height items inside toolbar doesn't formatted centered.how to arrange them centered in my case.Below are my complete details
Toolbar.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#414e5b"
/>
</LinearLayout>
Themes.xml
<style name="Orange" parent="Theme.AppCompat.Light.NoActionBar">
----------------
<item name="actionButtonStyle">#style/ActionButtonStyle</item>
------------------
</style>
<style name="ActionButtonStyle" parent="Widget.AppCompat.ActionButton">
<item name="android:minWidth">0dip</item>
<item name="android:maxWidth">40dip</item>
<item name="android:paddingLeft">0dip</item>
</style>
Try below xml code to create your Toolbar. Which gives you to get your Toolbar at centre position :
<?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="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_centerInParent="true"
android:background="#414e5b"
/>
</RelativeLayout>

How to make Toolbar transparent?

It is self Q&A post
I have transparent ActionBar which overlays layout. After migration to the latest support library I have been forced to get rid off the ActionBar in favor of the Toolbar. The old ways to make it transparent and overlay that layout doesn't work anymore.
<style name="CustomActionBarTheme" parent="#android:style/Theme.AppCompat">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/TransparentActionBar</item>
</style>
<style name="TransparentActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
Create your toolbar.xml file with background of AppBarLayout is #null
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/general_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Login"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
and here is result:
All you need to is to define theme which hide action bar, define action bar style with transparent background and set this style to the toolbar widget. Please note that toolbar should be drawen as last view (over all view tree)
<style name="Theme.Custom" parent="#android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="CustomActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar should be above content-->
<include layout="#layout/toolbar" />
</RelativeLayout>
Toolbar layout:
<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"
app:theme="#style/CustomActionBar"/>
Checking Google's example Source Code I found out how to make the toolbar completely transparent. It was simpler than I thought. We just have to create a simple Shape drawable like this.
The name of the drawable is toolbar_bg
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:startColor="#android:color/transparent"
android:endColor="#android:color/transparent"
android:type="linear" />
</shape>
And then in the fragment or activity.. Add the toolbar like this.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/toolbar_bg"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
And here we will have a fully transparent toolbar.
Don't add the <android.support.design.widget.AppBarLayout > if you do, this won't work.
Note: If you need the AppBarLayout, set the elevation to 0 so it doesn't draw its shadow.
The Toolbar works like a View, so the answer it's very simple.
toolbar.getBackground().setAlpha(0);
Only this worked for me (AndroidX support library):
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:theme="#style/AppTheme.AppBarOverlay"
android:translationZ="0.1dp"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#null"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
This code removes background in all necessary views and also removes shadow from AppBarLayout (which was a problem)
Answer was found here: remove shadow below AppBarLayout widget android
Add the following line in style.xml
<style name="Base.Theme.AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme" parent="Base.Theme.AppTheme">
</style>
Now add the following line in style-v21,
<style name="AppTheme" parent="Base.Theme.AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
and set the theme as
android:theme="#style/AppTheme"
It will make the status bar transparent.
Just add android:background="#android:color/transparent" like below in your appbar layout
<android.support.design.widget.AppBarLayout
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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>`
Just use the following xml code:
Code for the layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/def_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/toolbarTransparent"
android:layout_alignParentTop="true" />
And add the following code in the colors.xml:
<color name="toolbarTransparent">#00FFFFFF</color>
This will give you the desired output.
Perhaps you need to take a look at this post transparent Actionbar with AppCompat-v7 21
Points that the post suggest are
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 should solve the problem without too much hassle.
The simplest way to put a Toolbar transparent is to define a opacity in #colors section, define a TransparentTheme in #styles section and then put these defines in your toolbar.
#colors.xml
<color name="actionbar_opacity">#33000000</color>
#styles.xml
<style name="TransparentToolbar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
#activity_main.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="#color/actionbar_opacity"
app:theme="#style/TransparentToolbar"
android:layout_height="?attr/actionBarSize"/>
That's the result:
Screenshot transparent toolbar
I implemented translucent Toolbar by creating two Theme.AppCompat.Light.NoActionBar themes and setting colorPrimary attribute to transparent color.
1) Create one theme for opaque Toolbar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Toolbar background color -->
<item name="colorPrimary">#ff212cff</item>
</style>
Second theme for transparent/overlay Toolbar:
<style name="AppTheme.Overlay" parent="AppTheme">
<item name="colorPrimary">#color/transparent</item>
</style>
2) In your activity layout, put Toolbar behind content so it can be displayed in front of it:
<RelativeLayout
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:orientation="vertical">
<fragment
android:id="#+id/container"
android:name="com.test.CustomFragment"
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:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</RelativeLayout>
3)
Apply the transparent theme to your acivity in AndroidManifest.xml
<activity
android:name="com.test.TransparentActivity"
android:parentActivityName="com.test.HomeActivity"
android:theme="#style/AppTheme.Overlay" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.test.HomeActivity" />
</activity>
I know am late for the party. I've created a simple class to manage the Toolbar transparency.
import android.annotation.SuppressLint;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.widget.Toolbar;
public class TransparentToolbarManager {
private Toolbar mToolbar;
private ColorDrawable colorDrawable;
public static final int MAX_ALPHA = 255, MIN_ALPHA = 0;
public TransparentToolbarManager(Toolbar mToolbar) {
this.mToolbar = mToolbar;
this.colorDrawable = new ColorDrawable(mToolbar.getContext().getResources().getColor(R.color.colorPrimary));
}
public TransparentToolbarManager(Toolbar mToolbar, ColorDrawable colorDrawable) {
this.mToolbar = mToolbar;
this.colorDrawable = colorDrawable;
}
//Fading toolbar
public void manageFadingToolbar(int scrollDistance) {
if (mToolbar != null && colorDrawable != null) {
//FadeinAndOut according to the horizontal scrollValue
if (scrollDistance <= MAX_ALPHA && scrollDistance >= MIN_ALPHA) {
setToolbarAlpha(scrollDistance);
} else if (scrollDistance > MAX_ALPHA) {
setToolbarAlpha(MAX_ALPHA);
}
}
}
#SuppressLint("NewApi")
public void setToolbarAlpha(int i) {
colorDrawable.setAlpha(i);
if (CommonHelper.isSupport(16)) {
mToolbar.setBackground(colorDrawable);
} else {
mToolbar.setBackgroundDrawable(colorDrawable);
}
}
}
and the CommonHelper.isSupport()
public static boolean isSupport(int apiLevel) {
return Build.VERSION.SDK_INT >= apiLevel;
}
Just Add android:background="#10000000" in your AppBarLayout tag It works
https://stackoverflow.com/a/37672153/2914140 helped me.
I made this layout for an activity:
<?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"
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:background="#color/transparent" <- Add transparent color in AppBarLayout.
android:theme="#style/AppTheme.AppBarOverlay"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="#style/ToolbarTheme"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ToolbarTheme"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
<- Remove app:layout_behavior=...
/>
</android.support.design.widget.CoordinatorLayout>
If this doesn't work, in onCreate() of the activity write (where toolbar is #+id/toolbar):
toolbar.background.alpha = 0
If you want to set a semi-transparent color (like #30ff00ff), then set toolbar.setBackgroundColor(color). Or even set a background color of AppBarLayout.
In my case styles of AppBarLayout and Toolbar didn't play role.
try below code
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.Transparent"
>
<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>
style.xml
<style name="AppTheme.Transparent" parent="ThemeOverlay.AppCompat.Light">
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorControlActivated">#color/colorWhite</item>
<item name="colorControlNormal">#color/colorWhite</item>
</style>
for Support Toolbar v7 android.support.v7.widget.Toolbar:
code
toolbar.setBackground(null);
// or
toolbar.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
xml (android:background="#null" or android:background="#android:color/transparent")
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#null"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:ellipsize="start"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
</android.support.v7.widget.Toolbar>
if Title is invisible, set textColor
Add below code to styles.xml file
<style name="LayoutPageTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/TransparentActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="TransparentActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
<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" />
Don't forget to write: android:background="#android:color/transparent"
Go to res package and open color.xml.
Set color primary to #00000000.

Categories

Resources