I want to make the ActionBar transparent throughout the app and also change the text colour to white in the ActionBar. I tried setting the android:background to null but it had no effect. I am still getting a white ActionBar with Black text in the following code:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/app_white</item>
<!--item name="colorPrimaryDark">#color/colorPrimaryDark</item-->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!--item name="colorAccent">#color/colorAccent</item-->
<item name="colorAccent">#1da1f2</item>
<!-- <item name="actionBarStyle">#style/MyActionBar</item>-->
<!-- <item name="android:actionBarStyle">#style/MyActionBar</item>-->
</style>
<style name="MyActionBar" parent="#android:style/Widget.ActionBar">
<item name="android:background">#null</item>
<item name="background">#null</item>
<item name="fontFamily">#font/mukta_bold</item>
<item name="titleTextStyle">#style/MyActionBarTitle</item>
<item name="actionMenuTextColor">#color/app_white</item>
</style>
<!-- <style name="MyActionBar.MenuTextStyle"-->
<!-- parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">-->
<!-- <item name="android:textColor">#color/app_light_black</item>-->
<!-- </style>-->
<style name="MyActionBarTitle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/app_white</item>
</style>
<style name="Switch_Style">
<item name="android:textColor">#000000</item>
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="CustomTheme" parent="Theme.MaterialComponents.Light.NoActionBar"/>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />
<style name="Widget.MyApp.MyButton" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">?attr/colorSecondary</item>
</style>
</resources>
You should use colorControlNormal flag in your Theme for AppBar
<style name="appBarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
</style>
and in your AppBarLayout use background as transparent
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/appBarTheme">
...........
</com.google.android.material.appbar.AppBarLayout
Make your BaseTheme of app as NoActionBar so you can create a custom action bar in your activity/fragment -
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
Happy Coding !!
Related
Here is a dialog, how to change this color (unchecked)?
I try to set style but not work:
<style name="ThemeMyAppDialogAlertDay"
parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="colorPrimary">#color/color_secondary</item>
<item name="colorPrimaryVariant">#color/color_primary_variant</item>
<item name="colorOnPrimary">#color/color_secondary</item>
<item name="colorSecondary">#color/color_secondary</item>
<item name="colorAccent">#color/color_error</item>
</style>
You can use:
<style name="ThemeMyAppDialogAlertDay"
parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="colorSecondary">#color/selected</item> <!-- selected -->
<item name="colorControlNormal">#color/unselected</item> <!-- unselected -->
</style>
Try this , It should help
<style name="materialDiaog" parent="MaterialAlertDialog.MaterialComponents">
<item name="buttonTint">#color/colorPrimary</item>
<item name="colorPrimary">#color/color_secondary</item>
<item name="colorPrimaryVariant">#color/color_primary_variant</item>
<item name="colorOnPrimary">#color/color_secondary</item>
<item name="colorSecondary">#color/color_secondary</item>
<item name="colorAccent">#color/color_error</item>
</style>
<style name="AppTheme" parent="{set your parent theme here}">
<item name="materialAlertDialogTheme">#style/materialDiaog</item>
</style>
I am using Material Design in my Android app and I want to change Actionbar text color and back button color.
This code is not working:
<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:windowContentOverlay">#null</item>
<!--<item name="android:textSize">3sp</item>-->
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/titleColor</item>
</style>
Using the ActionBar in your theme you can use:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="actionBarTheme">#style/ThemeOverlay.Actionbar</item>
</style>
<style name="ThemeOverlay.Actionbar" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" >
<item name="android:textColorPrimary">#color/....</item>
</style>
How I can change the color of the header only in date range picker, I search didnt find exactly how, I just know how to change the color of all date range picker with changing the color of the colorPrimary and that will change the color of all the header and the selected dates, I want to change only the header color
and also if there is a way to change the size of title text, I know we can change the title but can we change the title size?
this is what I tried in style
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/shamrock_green</item>
<item name="colorPrimaryDark">#color/shamrock_green_dark</item>
<item name="colorAccent">#color/shamrock_green</item>
<item name="colorButtonNormal">#color/shamrock_green</item>
<item name="colorOnSecondary">#color/white</item>
<item name="colorOnSurface">#android:color/transparent</item>
<item name="bottomSheetDialogTheme">#style/AppBottomSheetDialogTheme</item>
<item name="materialCalendarFullscreenTheme">#style/CustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorOnSurface">#android:color/black</item>
<item name="colorPrimary">#color/black</item>
</style>
<style name="CustomThemeOverlay_MaterialCalendar_Fullscreen"
parent="#style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
<item name="materialCalendarStyle">#style/Custom_MaterialCalendar.Fullscreen</item>
</style>
<style name="Custom_MaterialCalendar.Fullscreen"
parent="#style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
<item name="android:windowFullscreen">false</item>
<item name="android:headerBackground">#color/shamrock_green</item>
</style>
<style name="ThemeMaterialCalendarButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#color/shamrock_green</item>
</style>
<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
<item name="android:textColor">#color/shamrock_green</item>
<item name="iconTint">#color/shamrock_green</item>
</style>
<style name="AppTheme.FullScreen" parent="#style/Theme.AppCompat">
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
</resources>
the thing that works now is its shows as dialog not full screen which what I want, but no text and background colors changes, the only way to change colors changes the colors like colorPrimary and these colors will affect all app
You can use a theme overlay:
MaterialDatePicker.Builder<Pair<Long, Long>> builderRange =
MaterialDatePicker.Builder.dateRangePicker();
builderRange.setTheme(R.style.CustomMaterialCalendarTheme);
with:
<style name="CustomMaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<!-- Header Layout -->
<item name="materialCalendarHeaderLayout">#style/customHeaderLayout</item>
<!-- Header title -->
<item name="materialCalendarHeaderTitle">#style/customHeaderTitle</item>
<!-- Header selection title -->
<item name="materialCalendarHeaderSelection">#style/CustomHeaderSelection</item>
</style>
<style name="customHeaderLayout" parent="#style/Widget.MaterialComponents.MaterialCalendar.HeaderLayout">
<item name="android:background">#color/.....</item>
</style>
<style name="customHeaderTitle" parent="#style/Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
<item name="android:textAppearance">#style/customTextAppearance</item>
</style>
<style name="customTextAppearance" parent="#style/TextAppearance.MaterialComponents.Overline">
<item name="android:textSize">xxsp</item>
</style>
<style name="CustomHeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
<item name="android:textSize">xxsp</item>
</style>
I am using android studio 3.0 and want to make actionbar transparent with activity's background.I just read all the questions about it but that doesen't work for me.help me guys.
minSdkVersion 20
targetSdkVersion 26
here is my style.xml code
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:background">#android:color/transparent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" >
</style>
Like This
Try this theme to make your Actionbar transparent
<style name="AppTheme.ActionBar.Transparent2" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#android:color/transparent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:homeAsUpIndicator">#mipmap/ic_left_back</item>
</style>
Option Menu show incorrectly on Custom Style map
The problem raised on an application in android
I have a custom theme on my app. The problem is that the option menu shows incorrectly ,so the option menu shows cut of on the screen.
I wondering why could happen?
This is my style file xml
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:typeface">normal</item>
<item name="android:typeface">sans</item>
<item name="android:typeface">serif</item>
<item name="android:typeface">monospace</item>
<item name="android:actionBarItemBackground">#drawable/selectable_background_example</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Example</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Example</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Example</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Example</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Example</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_example</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_example</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Example</item>
</style>
<style name="ActionBar.Solid.Example" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background">#drawable/ab_solid_example</item>
<item name="android:backgroundStacked">#drawable/ab_stacked_solid_example</item>
<item name="android:backgroundSplit">#drawable/ab_bottom_solid_example</item>
<item name="android:progressBarStyle">#style/ProgressBar.Example</item>
</style>
<style name="ActionBar.Transparent.Example" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/ab_transparent_example</item>
<item name="android:progressBarStyle">#style/ProgressBar.Example</item>
</style>
<style name="PopupMenu.Example" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example</item>
</style>
<style name="DropDownListView.Example" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_example</item>
</style>
<style name="ActionBarTabStyle.Example" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_example</item>
</style>
<style name="DropDownNav.Example" parent="#android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_background_ab_example</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example</item>
<item name="android:dropDownSelector">#drawable/selectable_background_example</item>
</style>
<style name="ProgressBar.Example" parent="#android:style/Widget.Holo.Light.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_example</item>
</style>
<style name="ActionButton.CloseMode.Example" parent="#android:style/Widget.Holo.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_example</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Example.Widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu.Example</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Example</item>
</style>
For any ones that have this same trouble, the solution , in my case , was solved by added this line in the manifest file.
<supports-screens
android:anyDensity="true" />