I am currently getting started with Material components themes. The Getting Started guide mentions these themes:
Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar
There is no description for them though. Where can I find more details about those themes or could anyone be so kind to explain them in an answer? Just for example:
What means [..].NoActionBar? If I don't want an action bar, I don't include it in my layout file, so I really don't get this.
When would I use only Theme.MaterialComponents? Or would I always use Theme.MaterialComponents.Light or Theme.MaterialComponents.DayNight?
How do these themes look like? I couldn't find any preview and don't want to try them all out by myself - could take some time with all the widgets available on Android.
What do these themes define? Only colors? Text style? Font family?
I'm certain that I won't manage to answer all of your questions exhaustively but I'll share some thoughts, maybe it will take you one or two steps further:
What means [..].NoActionBar?
You should use a theme ending with ".NoActionBar" if you don't want the runtime to add an ActionBar to the Activity, possibly because you use a Toolbar. If you choose for example Theme.MaterialComponents.Light and use a Toolbar as well, you will notice that now your app will be renderd with two ActionBars
Please note that if some theme is called "MyTheme" then a theme which is prefixed by "MyTheme." will inherit everything from "MyTheme". So Theme.MaterialComponents.Light.NoActionBar is almost the same as Theme.MaterialComponents.Light except for the ActionBar.
So if you really don't want any ActionBar you should choose the .NoActionBar version and not include a surrogate (Toolbar) in your layout files.
What do these themes define? Only colors? Text style? Font family?
They do that, but they define also sizes, margins and behavior. In addition to that, some of them have special style combos for certain widgets (like style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox" for TextInputLayout)
For a deep dive into what properties can be influenced by a theme, you can take a look at the source of themes_material.xml
When would I use only Theme.MaterialComponents? Or would I always use Theme.MaterialComponents.Light or Theme.MaterialComponents.DayNight?
Since Theme.MaterialComponents is the parent theme of Theme.MaterialComponents.Light, they have much in common. The main difference is that the first assumes that your app will have a dark background (so the text should be white) whereas the second will have black text and assumes your app's background will be light.
Generally, one will try to use a certain theme as a template which then can be/ has to be customized - for example with a special accent color.
How do these themes look like?
You can get a general idea by switching from one to the other in a small sample app of your own.
It's true that there is not one single source of information (aka the android theming bible). You have already found material.io, but maybe the Styles and Themes section from developer.android.com or this blog post on DayNight — Adding a dark theme to your app will shed some more light.
Related
I'd like my Android app to have toolbars the same color as the primary surface (and the status bar -- which is already the primary surface color out of the box on a clean Android Studio project). I'm targeting Material Design 3 UI guidelines.
There are various existing answers for previous versions of android, of varying quality, that involve running down a fairly lengthy rabbit hole of styles and themes to capture errant pieces of UI in a toolbar (icons, menus &c). In various previous incarnations of android there have been theme overlays, and theme variants that produce light/light-toolbar or dark/dark-toolbar apps. But none of those hooks seem to be there for Material3 -- which by DESIGN is supposed to have same-color toolbars.
With relatively default configuration, my Toolbars are (I think) primary color background, with white text during the day, and black (primary?) text on white background at night (inverted with respect to primary and secondary surfaces). And I can't find a moral equivalent of light-toolbar light background for Day/Night themes that will hopefully respect wallpaper matched colors for those that have android 12++ (I do).
I feel like I'm missing something simple here.
Fwiw, I'm NOT using CoordinatoryLayout/AppLayout -- just a naked Toolbar, due to previous unpleasant wrangles with CoordinatorLayout and running Activites in full-screen mode, which I will be doing with this project as well. (CoordinatorLayout gives me nothing I want, and breaks a lot that I do want).
I did try setting explicit colors on the toolbar, and came running here when the icon didn't change color. (I've been down this road before, on at least three versions of Android. :-P).
The app is a freshly created (about a week old) Android app, created using Android studio with latest SDK. App themes seem to have been pointed at material 2, although all dependencies are up to date for Material 3. Hard to say; all of the Android docs tell you how to migrate old apps, not how to create new ones -- a curious omission.
Would by nice to see your code. But I was with a similar problem. According with documentation, the default value for a Toolbar background is ?attr/colorSurface and it is set on android:background. So, I solved overriding toolbar style.
<style name="Theme.Custom" parent="Theme.Material3.Dark">
<item name="toolbarStyle">#style/Theme.Custom.Toolbar</item>
</style>
<style name="Theme.Custom.Toolbar" parent="Widget.Material3.Toolbar">
<item name="android:background">#color/your_color</item>
</style>
I hope that this help you.
What is the difference between let's say android.R.style.TextAppearance_large and android.R.attr.textAppearanceLarge?
The attr part is just a thing which can been styled e.g. with a theme while that style is already one defined style.
So you can refer a style without knowing the style attributes. That is really helpful if you want to define a control which can been styled in multiple ways. Like for a button you have a holo style or some other device typical styles.
If you know C you can compair it with a prototype (or header file) while the style is the implementation.
Im searching for an android gui-library with more components i could use in my app.
Example:
A microcontroller sends the rpm of a motor (via bluetooth) to my smartphone.
And i want to use my smartphone in order to show the received rpm in progressbar-like element.
But the normal progressbar looks ugly, and i would have to progressbar.setClickable(false); .
As i said before
Im searching a library with more gui-elements(optional: i could modify, customize the outward appearance on my own)
Do anybody of you know about such a library ?
Thanks so far.
If you're just concerned about the external appearance of your GUI elements, I don't think there's any support for different UI elements than the ones provided. However, have you looked into a universal Theme and style for your application?
Here are some excerpts from that document:
A style is a collection of properties that specify the look and format
for a View or window. A style can specify properties such as height,
padding, font color, font size, background color, and much more. A
style is defined in an XML resource that is separate from the XML that
specifies the layout.
A theme is a style applied to an entire Activity or application,
rather than an individual View (as in the example above). When a style
is applied as a theme, every View in the Activity or application will
apply each style property that it supports. For example, you can apply
the same CodeFont style as a theme for an Activity and then all text
inside that Activity will have green monospace font.
Here are some resources which talk about themes:
Mobile Orchard Article
Android Engineer Article
Let me know if that's what you wanted. Themes give you almost infinite possibilities to modify outwards appearance.
I am trying to more or less copy a PSD that has older controls in it with also using the ActionBar in ICS they like the old style that has the actual box instead of the underline. how would i be able to keep the holo theme and revert a control to the old styles?
Just wanted to show you how i made this happen as quick fix..
http://www.androidworks.com/changing-the-android-edittext-ui-widget
This covers the bases on how to style in depth .. and basically i built my own 9.png files..
Does anyone know how to apply the Light theme to single controls? While using the standard Holo-Dark-theme, I want to do something like this:
<CheckBox style="#android:style/Widget.Holo.CompoundButton.CheckBox"></CheckBox>
But for some reason that doesn't work.
You can not apply a theme to a single control. Themes can only be applied to activites. You can apply a style to single control but this does not help in this case as you already noticed because the Widget.Holo.CompoundButton.CheckBox style does not add anything to the parent style Widget.CompoundButton.CheckBox.
Instead the whole styling takes place in the listChoiceIndicatorSingle selector of the current theme.
So your only choice is to replace this selector by your own as described e.g. here: Setting Theme.Holo.Light changes everything except checkboxes in list
Read up on this page about Styles and Themes in Android. It goes over how to define which theme to use for a specific Activity or a whole Application. You will also see how to customize themes and styles, and how to mix and match them.