How to start implementing android custom themes? - android

I want to develop a custom android theme. I have googled for info on where to start,but couldn't find anything useful. Can someone please give me some pointers as to how to start??
Edit: I am trying develop a theme as the ones listed here

It's very simple. Just create folders: values and additionally values-v11, values-v14 etc. etc. then you can create your themes. Themes are creating in files placed in values folders: styles.xml. In this files you can decribe all your attributes to your themes.
In exmaple:
<resources>
<style name="MainAppTheme">
<item name="android:windowActionBar">true</item>
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/ActionBarTabBarStyle</item>
<item name="android:dialogTheme">#android:style/Theme.DeviceDefault.Light.Dialog</item>
</style>
<style name="ActionBarStyle" parent="android:Widget.Holo.ActionBar.Solid">
<item name="android:background">#color/background_blue</item>
</style>
<style name="ActionBarTabStyle" parent="android:Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_selector_v11</item>
<item name="android:showDividers">middle</item>
<item name="android:gravity">center</item>
</style>
<style name="ActionBarTabBarStyle" parent="android:Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/tab_background</item>
</style>
</resources>
Then you can add your theme to you activity using attribute in AndroidManifest.xml:
<activity
android:name=".activity.YourSampleActivity"
android:theme="#style/MainAppTheme">

Related

Attributes with no android namespaces on xml's

I'm just a beginner in android and studying how to create styles and themes.
I found this xml here:
Material Log In Demo
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Dark" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowBackground">#color/primary</item>
<item name="colorControlNormal">#color/iron</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="android:textColorHint">#color/iron</item>
<item name="colorButtonNormal">#color/primary_darker</item>
<item name="android:colorButtonNormal">#color/primary_darker</item>
</style>
<style name="AppTheme.Dark.Dialog" parent="Theme.AppCompat.Dialog">
<item name="colorAccent">#color/white</item>
<item name="android:textColorPrimary">#color/iron</item>
<item name="android:background">#color/primary</item>
</style>
What I'm confused about is why some name attributes of <item> directives have no android namespace on them, while others have? Like the colorButtonNormal and android:colorButtonNormal. Can someone explain when/why they are used please?
Referring the android doc and finding the name attribute as "Required". Android resources uses XML which implies they need to use XML Schema. If they are using any namespace => they don't want any conflicts with the name. Hope this helps
For reference:
A "Schema" is what is required to allow the acceptance (or creation) of XML documents with a standardized element name and hierarchy structure.
afaik, we need to use android:propertyName to override the properties of specific style based on the API Level. For example, in property name of value/styles.xml you may need to use:
<style name="AppTheme.Dark.Dialog" parent="Theme.AppCompat.Dialog">
...
<item name="android:background">#color/primary</item>
</style>
But in values-v14/styles.xml you need to use:
<style name="AppTheme.Dark.Dialog" parent="Theme.AppCompat.Dialog">
...
<item name="background">#color/primary</item>
</style>
Here the <item name="android:background"> and <item name="background"> has the same meaning. Just a different naming convention for the specific API Level.
Please be noted that the example is just for demonstration purpose.

Android styles, difference between api levels

I'm trying to learn how to Style my application using the styles.xml file and I need some clarification on a few things to understand it.
In an Item, what is the difference between setting android:actionbarstyle and just actionbarstyle ? I know that in this particular case, I have to define both, but why? And what about all other cases, for example android:colorPrimary and just colorPrimary? In that case I get an error saying that android:colorPrimary can only be used with min API level 21. So does someone have a good explanation on what the android: prefix does and how it affects my app?
Is there a reference to the different parent styles, such as parent="#style/Widget.AppCompat.Light.ActionBar and what they mean? How do I find a list of the different parent styles available for a specific item and what I can "override" in them? Right now, it's mostly guessing on my part....
Just as a reference, I'm posting my current styles.xml file.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="MyTheme"/>
<style name="MyTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/MyTheme.ActionBarTheme</item>
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
<item name="drawerArrowStyle">#style/MyTheme.DrawerArrowStyle</item>
<item name="android:actionOverflowButtonStyle">#style/MyTheme.OverFlow</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="android:homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="colorControlNormal">#color/my_green</item>
<item name="colorControlActivated">#color/my_forest</item>
<item name="colorControlHighlight">#color/my_deep_green</item>
</style>
<style name="MyTheme.ActionBarTheme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- This sets the BACK arrow to white. Otherwise it's black. Must be placed in the theme-->
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/my_green</item>
<item name="background">#color/my_green</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyTheme.DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/white</item>
</style>
<style name="MyTheme.OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#color/white</item>
</style>
</resources>
I will try my best to explain and will concentrate on:
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
These attributes are regularly available with API level 21. In general you use attributes with the "android" prefix.
If you define all your styles in the styles.xml of your values folder and if you are using app compat, then you need both.
Without the prefix the attributes applies for pre L devices. i.e. App Compat. To get it work for L devices and higher you need to specifiy the attribute again with the "android" prefix.
And to get the other Android styles you can step into them, like you step into classes and the implementations. For Mac I press the command button and then click with the mouse on the specific style.

Alternative Layouts

I am developing an android application that I want to support Material Design for devices running 5.0+ and devices from 4.1 to 4.4.
I am using the appcompat library to get some support for older versions.
Now I am faced with attributes that are only present in v21, like elevation.
I can create a layout-v21 folder and add my activity's layout there, again, which leads to quite a bit of duplication.
Do you do this another way?
Is there a way to use styles for this? How do I subclass a style from values to values-v21
Here is a link that I have used that gives some information about overriding styles/themes for v21 Lollipop: http://antonioleiva.com/material-design-everywhere/
Essentially you can do in values/themes.xml
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimary</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
And then in values-v21/themes.xml
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
To override AppTheme for v21 but to retain all the properties for the AppTheme.Base from pre-v21.

How to change the default divider color for all ListViews

I am trying to apply default styling for all the listViews from style.xml
Please note at some places I am using nested listViews.
In style.xml
<style name="Theme.MyTheme" parent="Theme.Sherlock.Light.ForceOverflow">
<item name="android:windowContentOverlay">#null</item>
<item name="android:listViewStyle">#style/awesomeListViewStyle</item>
</style>
<style name="awesomeListViewStyle" parent="#android:style/Widget.ListView">
<item name="android:fadingEdge">none</item>
<item name="android:background">#color/orange</item>
<item name="android:divider">#EEEEEE</item>
</style>
This has no effect. In the Manifest Theme.MyTheme as my default theme.
Please advice :)
As mentioned in another answer as Bhavin and Mark pointed out, in your style you should also add
<item name="android:dividerHeight">1px</item>

Copy theme from another application

I have an application that contains a custom theme and I wish to share it with other applications. The idea is that this application provides themes to other applications.
The theme is defined in styles.xml as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Text">
<item name="android:textColor">#00FF00</item>
<item name="android:textColorHighlight">#FFFF9200</item>
<item name="android:textColorHint">#FFCCFF</item>
<item name="android:textColorLink">#5C5CFF</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">normal</item>
</style>
<style name="Button">
<item name="android:background">#FF0000</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:textAppearance">?android:attr/textAppearanceSmallInverse</item>
<item name="android:textColor">#FFFF00</item>
<item name="android:textSize">22dip</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
</style>
<style name="Theme.example" parent="android:Theme">
<item name="android:background">#FF0000</item>
<item name="android:buttonStyle">#style/Button</item>
<item name="android:textAppearance">#style/Text</item>
</style>
</resources>
To get this theme from the second app:
Context appThemesContext = this.getApplicationContext().
createPackageContext("com.appThemes",
Context.CONTEXT_IGNORE_SECURITY);
appThemesContext.setTheme(0x7f050002); //The resid of the desired theme
this.getTheme().setTo(appThemesContext.getTheme()); //Copy the theme
The problem is that only the direct attributes like "background" are copied, the references attributes like "buttonStyle" not, because the "setTo" method says:
Set this theme to hold the same contents as the theme other. If both of these themes are from the same Resources object, they will be identical after this function returns. If they are from different Resources, only the resources they have in common will be set in this theme.
Does anyone know how to copy a theme from the resources of other application?? The theme won't use resources like images, etc... only values.
Thanks ;)

Categories

Resources