I have just started learning Android, currently going through the tutorials on the Google Android developer website, so far not that impressed as there are a lot of things that go unexplained.
On the tutorial "Styling the Action Bar", it has the following XML style resource:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_background</item>
</style>
</resources>
(Android 2.1+ support)
At no point does it mention what the #drawable/actionbar_background is meant to be? As it is #drawable is this an image? I wouldn't understand why it would be as it's meant to be colouring the action bar background.
Any help would be greatly appreciated!!!!!!! :)
The line
<item name="background">#drawable/actionbar_background</item>
translates to English like
Add to this style an item representing a property called "background".
As the value of this property, set a resource of type "drawable" with
name "actionbar_background".
In this case the script will look for an image in the resources folder "drawable" the name of which matches the given one. If the line was
<item name="text">#string/actionbar_title</item>
The script would look in res/values for a resource defined as <string> with "name" property "actionbar_title".
In the layout files for Android, the '#' symbol followed by a word like 'drawable' or 'style', refers to a path and file in the res or resource folder.
http://developer.android.com/guide/topics/resources/drawable-resource.html
<item name="android:background">#drawable/actionbar_background</item> sets your actionBar's background to drawable(image) resource which is located in your project -> drawable folders.
I guess you can also use color to set your background like this:
<item name="android:background">#android:color/black</item>
Related
I am getting this issue only for samsung galaxy devices- Galaxy Tab A, Galaxy A03 Core, Galaxy A02, Galaxy A32
Fatal Exception: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.myapp.application/com.myapp.application.ui.MainActivity}: android.content.res.Resources$NotFoundException: Drawable com.app.application:drawable/compat_splash_screen_no_icon_background with resource ID #0x7f0801b6
My configuration->
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">#color/white</item>
<item name="windowSplashScreenAnimatedIcon">#drawable/splash_icon</item>
<item name="postSplashScreenTheme">#style/Theme.Triva.NoActionBar</item>
<item name="windowSplashScreenIconBackgroundColor">#color/blue</item>
<item name="windowSplashScreenAnimationDuration">800</item>
<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
</style>
</resources>
This is the resource in read only file ->
This is currently an issue. You will have to wait a bit for the fix to ship, then update the core-splashscreen dependency to the latest version.
It is tracked here https://issuetracker.google.com/issues/229645249
See if the call order they suggest there helps you mitigate the problem.
Try to rename the resource file.
Looks like it interferes with some of Samsung's resource files and you have such runtime error.
The background must be a color value, drawables are not supported (at least for now). You can review the example in docs (https://developer.android.com/guide/topics/ui/splash-screen)
working example:
<item name="windowSplashScreenBackground">#color/colorPrimary</item>
I've been cracking my head to fix my app to work in Light Mode even when user changes phones UI to Dark Mode ie I want this pic layout to be fixed in This Light Mode
But when I select Dark Mode in my phone all I get isThis Dark Modeand it looks really bad.
This is what my styles file look like
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
I've literally tried everything like
> android:forceDarkAllowed="false" (In xml File)
> AppCompatDelegate.setDefaultNightMode() (In Kotlin file)
> val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK (In Kt file)
Help me find the solution.
You just want a light theme? You're using a dark one, change it to this
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
I'm trying to change some colors of the components of my application by setting a custom theme for day mode and night mode, like this:
in values/styles.xml (day mode):
<resources>
<!-- Base application theme. -->
<style name="MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
...
</resources>
Same file in values/styles.xml (night)
I want to change the color of some parts of the UI (seekbar bar, toolbar, action bar title, floating buttons etc.) but I don't know which color corresponds to each element and I'm kinda going crazy googling here and there for tricky solutions for any component I need to change the color too. Is there any guideline or good visual example on where to check all of this? For instance, right now it's taking a long time for me to figure out how to change the popupmenu background or the actionbar menu background since there's no attributes in the menu files. I'm new to android development so any kind of guidance regarding this would be very welcomed.
You used Theme.MaterialComponents.DayNight.... where DayNight is more of a adaptive dynamic theme which changes to material design default color. If you need more control to color and styles, do as follows:
Your Day theme inside values/styles.xml should extend from Theme.MaterialComponents.Light.DarkActionBar
Your Night theme inside values-night/styles.xml should extend from Theme.MaterialComponents as it is well-suited for the Dark Mode.
I want to change the color of some parts of the UI (seekbar bar, toolbar, action bar title, floating buttons etc.)
Regarding this, if you want app-wide changes then you can follow this method of styling(almost all views styling can be done this way):
<resources>
<!-- Base application theme. -->
<style name="MyTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="seekBarStyle">#style/MySeekBarStyle</item>
<item name="toolbarStyle">#style/MyToolBarStyle</item>
<item name="actionBarStyle">#style/MyActionBarStyle</item>
<item name="floatingActionButtonStyle">#MyFloatingActionButtonStyle</item>
<!-- a sample toolbar styling, choose parent with care -->
<!-- your AppTheme inheriting from MaterialComponents but toolbar
<!-- inheriting from platform theme-->
<!-- may case weird visual effects-->
<style name="MyToolBarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">#color/lightWhite</item>
<item name="subtitleTextColor">#color/lightWhite</item>
</style>
</resources>
If you want to style each for eg. ToolBar differently, you can use style="#style/MyToolBarStyle" attributes in your layout files to give each of them different shape, colour and other material effects as you want.
About Colors:
Normally, you can play with these colour attributes in your styles.xml to change the complete look and feel of your app.
<!-- primary colour of your brand and its variants -->
<item name="colorPrimary">#color/colorPrimary700</item>
<item name="colorPrimaryDark">#color/colorPrimary900</item>
<item name="colorPrimaryVariant">#color/colorPrimary500</item>
<!-- colour which contrasts from your primary colour -->
<item name="colorAccent">#color/colorAccent</item>
<!--secondary colour of your brand and its variants -->
<item name="colorSecondary">#color/colorSecondary700</item>
<item name="colorSecondaryVariant">#color/colorSecondary500</item>
<!--background color for your root layout file -->
<item name="android:colorBackground">#android:color/white</item>
<!--background color of children view -->
<item name="colorSurface">#color/lightWhite</item>
<!--color to show error mostly it will be red or orange
<item name="colorError">#color/colorErrorAlternate</item>
<!-- These are colors which constrasts colors defined for -->
<!-- primary, secondary, bg, surface, error respectively. -->
<!-- For eg: TextViews in Toolbar colored with colorPrimary -->
<!-- will use colorOnPrimary as their text color -->
<item name="colorOnPrimary">#color/lightWhite</item>
<item name="colorOnSecondary">#color/lightDark</item>
<item name="colorOnBackground">#color/lightDark</item>
<item name="colorOnSurface">#color/lightDark</item>
<item name="colorOnError">#color/lightDark</item>
Important Links:
Official Material Design guide for designing dark theme
Official Material Design guide for developing dark theme
Using switchpreference to switch theme
Nick Butcher's Medium Blog : you will know more about colours here
I changed the manifest's android:targetSdkVersion value and still have the same problem :
Is it problem with parent file or should I delete all this lines?
Check your style.xml. You haven't declared alertbox and DialogWindowTitle there but you are mentioning it in Manifest. First Declare it. I am giving you an example to show you How to do it:
<style name="MyAlertDialogStyle"parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#color/button_background</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#color/editTextColor</item>
<!-- Used for the background -->
<item name="android:background">#color/alertPopupColor</item>
</style>
Simply declare like this in your style.xml for alertbox and DialogWindowTitle. Hope it works..
I have been wrestling with trying to get my PreferenceFragment to have the same Material-based theme and styling (via AppCompat) as the rest of my application. The PreferenceFragment that I am using to manage all of my application settings is shown below:
As you can see from the screenshot above, I was able to customize the PreferenceFragment by using colorAccent, colorPrimary, and a few other attributes. My theme for the PreferenceFragment is as follows:
<style
name="settingsTheme"
parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/blue_grey_500</item>
<item name="colorAccent">#color/blue_grey_500</item>
<item name="android:textColor">#color/black_text_alt</item>
<item name="android:textColorSecondary">#color/black_secondary_text</item>
</style>
However, despite my best efforts, I am unable to apply themes to the individual elements within my PreferenceFragment, such as ListPreference and EditTextPreference; all of the preferences still retain the standard AppCompat theme:
I found an 2 year old post that discusses this issue, albeit with no real solution: How to apply theme to <PreferenceScreen> elements of a <PreferenceCategory>
I am wondering if anyone has been able to successfully apply themes to the preferences since AppComat V21 has been released. If not, are there any viable workarounds that can be used to apply custom themes to individual preferences?
UPDATE: I made a library to battle the issue (uses AppCompat r22): https://github.com/consp1racy/android-support-preference
The ListPreference extends DialogPreference which uses this piece of code to create the dialog:
mBuilder = new AlertDialog.Builder(context)
.setTitle(mDialogTitle)
.setIcon(mDialogIcon)
.setPositiveButton(mPositiveButtonText, this)
.setNegativeButton(mNegativeButtonText, this);
As you can see the AlertDialog.Builder constructor is not supplied with the second optional int theme parameter. That means the dialog will be themed by whatever your activity's theme has in its android:alertDialogTheme attribute.
Now you have to create a custom theme for your dialog which derives from Theme.AppCompat.Dialog like so:
<style name="Theme.YourApp.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
<item name="colorAccent">#color/accent_yourapp</item>
<item name="colorPrimary">#color/primary_yourapp</item>
<item name="colorPrimaryDark">#color/primary_dark_yourapp</item>
</style>
Problem 1: The above solution will not work for RingtonePreference because it does not extend ListPreference but calls a ringtone chooser intent, so it's always themed according to system. Check out this answer:
RingtonePreference Theme So we can mark this as solved.
Problem 2: The AppCompat dialogs lack title. And so far I haven't found a way to fix this. True that I am not looking hard enough. Let's ignore the title absence as a minor issue.
Problem 3: The radio button drawables are not mutated so the graphics are inconsistent between passive and active (colored) state - all are colored (not just the one you!re pressing) or all are grey. Now this is really annoying
Problems 2 & 3 forced me to take another route - my dialog theme looks like this on API 14+
<style name="Theme.MyApp.Dialog.Alert" parent="android:Theme.DeviceDefault.Light.Dialog.MinWidth">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
</style>
and like this on API 21+
<style name="Theme.YourApp.Dialog.Alert" parent="android:Theme.DeviceDefault.Light.Dialog.MinWidth">
<item name="android:colorPrimary">#color/primary_yourapp</item>
<item name="android:colorPrimaryDark">#color/primary_dark_yourapp</item>
<item name="android:colorAccent">#color/accent_yourapp</item>
</style>
These values have been experimentally gained by crawling through the platform's source files and well tested.
The point is that the only reliable solution seems to be using the device default dialog theme. The only choice before Lollipop is a light or dark variant. On Lollipop this will work as intended and requested.
EDIT: Since appcompat-v7-r21.1.0 you can use AppCompatDialog which is material themed variant of native AlertDialog.
You can use provided AlertDialog.Builder (not to be confused with its native counterpart) for creating its instances.
DialogPreference uses android.app.AlertDialog.Builder directly so it would be impossible to switch the displayed dialog to the material design one for all API levels (which requires using android.support.v7.widget.AlertDialog.Builder).
I believe the only option for now is to extend and override dialog creation logic in DialogPreference or its subclasses (and use reflection to work around private accessors if required). Check out this reddit thread and an example AppCompatListPreference made by the author of that thread.
Taking cues from the answers already given I set in the manifest a custom theme for Settings activity because it is necessary to remove the border background around the Dialog that appear, using a transparent background this only for API <21:
AndroidManifest.xml
<application
android:name=".MyApplication"
...
android:theme="#style/AppTheme">
...
<activity
android:name=".ui.SettingsActivity"
...
android:theme="#style/AppTheme.Settings">
</activity>
</application>
values/style.xml
<!-- Application theme -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:alertDialogTheme">#style/AppTheme.AlertDialog</item>
</style>
<!-- Must be different because of transparent background -->
<style name="AppTheme.Settings" parent="AppTheme.Base">
<item name="android:alertDialogTheme">#style/AppTheme.SettingsAlertDialog</item>
</style>
<style name="AppTheme.AlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
<item name="android:windowContentOverlay">#null</item>
<item name="colorAccent">#color/accent_light</item>
<item name="colorControlActivated">#color/accent_light</item>
<item name="colorControlHighlight">#color/primary_highlight</item>
</style>
<style name="AppTheme.SettingsAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="colorAccent">#color/accent_light</item>
<item name="colorControlActivated">#color/accent_light</item>
<item name="colorControlHighlight">#color/primary_highlight</item>
</style>
finally for values-v21/style.xml the normal dialog, if you don't put this in v21 dialogs will be transparent.
<style name="AppTheme.Settings" parent="AppTheme.Base">
<item name="android:alertDialogTheme">#style/AppTheme.AlertDialog</item>
</style>
Actually I've the problem to set the colors directly from the Theme attributes: ?android:colorAccent instead of my fixed color #color/accent_light.
You should check out this Gist about how different components use the theme color attributes. You might need to add the following attributes to your theme to get the effect you want:
<item name="colorControlNormal">#color/x_color</item>
<item name="colorControlActivated">#color/y_color</item>
<item name="colorControlHighlight">#color/z_color</item>