Develop Reference

Themes who can use with action bar and tabLayout

I need a help about to find a theme who fits in this part of my project, but first I believe is nice to explain first the structure of the activities to find the answer:
Example of project style
The main activity (left) don't have any Action Bar, because takes to much space from screen an the Action Bar, polluted the design and is useless in this point.
The main activity, depending on the option of user, can go to 2 others activities, but both of them are kind of the same of the right activity(not eeeequal equal... is just to explain.) that consists in a Action Bar on top with the text of the result, a button back, one fixed part with some informations, and a Tab Layout with 3 tabs, each one, is a fragment.
the problem starts obviously, in this second activity...
I followed this site to build the screen at first: https://www.androidhive.info/2015/09/android-material-design-working-with-tabs/
but, with this site, they use this style:
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
But using this style, with what i need, the result is this error:
android.view.InflateException: Binary XML file line #0: Binary XML file line #0: Error inflating class android.support.design.widget.TabLayout
So, to try to find the answer, i find this site over here: http://geeksmember.blogspot.com.br/2015/10/errorerror-inflating-class.html
Who shows me this solution on styles file:
<style name="AppTheme.Base" parent="android:Theme.Material">
Is a nice solution, is nice because in this moment i can separe the main style from the other style. Ok... buuuuut... when i start the aplication, comes this error:
java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
so... that's my question... because, when i use the "Theme.AppCompat.Light.DarkActionBar" comes the first error again... and i stay on this situation who i can't find a style who doesn't match with my needs...
If anyone needs the style file... (this is the style file for all the activities except the main activity)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base" />
<style name="AppTheme.Base" parent="***I Need a theme here, i know, this is my question*** :)">
<item name="android:colorPrimary">#212121</item>
<item name="android:colorPrimaryDark">#000000</item>
<item name="android:colorAccent">#303030</item>
</style>
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#80CBC4</item>
</style>
</resources>

You have two choices:
Use a different theme for your two activities
To do this, you'd create an "action bar theme" and a "no action bar theme":
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#212121</item>
<item name="colorPrimaryDark">#000000</item>
<item name="colorAccent">#303030</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then, in your manifest, you'd assign the first theme to your app, and the second theme to any screen you didn't want an action bar for:
<application
...
android:theme="#style/AppTheme">
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar">
...
</activity>
</application>
So this way, all screens will have an action bar by default, but any activity that should not have an action bar can be set up by specifying AppTheme.NoActionBar for that single activity.
Use a toolbar widget when you want an action bar
For this approach, you'd create your app theme to have no action bar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#212121</item>
<item name="colorPrimaryDark">#000000</item>
<item name="colorAccent">#303030</item>
</style>
Then, in any activity that should have an action bar, you'd add a Toolbar to your activity's layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
In your activity's onCreate() method, after setting your content view, you'd tell the system to use this toolbar as the action bar:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

How to define a custom Application theme to specify a default background for a layout in Android?

I am creating a default theme for our Android apps to specify default custom theme to be applied to the whole app. The idea is we shouldn't have to specify appearance related attributes in the layout and they should be automatically injected by applying the custom theme to the entire app.
I am able to do this for UI widgets like TextView and EditText by overriding their styles.
For example overriding android:textViewStyle and android:buttonStyle, etc.
How can I do the same for a layout (LinearLayout or RelativeLayout, etc) so that I can specify a default background for a layout?
The application element in android manifest looks like this:
....
<application android:icon="#drawable/ic_launcher" android:label="#string/app_title" android:allowBackup="false"
android:theme="#style/Theme.MyCustomTheme" android:name="MyAppClass">
Theme.MyCustomTheme looks like this:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.MyCustomTheme" parent="Theme.AppCompat">
<item name="android:textViewStyle">#style/my_custom_text_view_style</item>
<item name="android:editTextStyle">#style/my_custom_edit_text_style</item>
<item name="android:buttonStyle">#style/my_custom_button_style</item>
<item name="android:listViewStyle">#style/my_custom_list_style</item>
The custom styles above inherit from the respective android base styles.
I am looking for the right android attribute to use above to override the style of a layout so that I can apply my custom default background to every layout (LinearLayout or RelativeLayout, etc) declared in the layout xml file without having to explicitly specify it in the layout xml. I tried overriding android:colorBackground but that didn't make any difference. I tried overriding android:windowBackground but that changes the color of the action bar as well. Please note that I am using the appcompat theme from the appcompat support library.

I finally figured out how to define a custom default background for every container layout in my application
First, I defined a a custom theme as a style with the app compat background as the parent background which overrides the default window background. Please note that I am using the theme from the Android compatibility library to support pre-honeycomb Android devices
<style name="Theme.MyCustomAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowBackground">#color/my_custom_window_background</item>
<item name="android:colorBackground">#color/my_custom_window_background</item>
</style>
I applied the above theme to the whole application in the AndroidManifest
<
application android:icon="#drawable/ic_launcher" android:label="#string/app_title" android:theme="#style/Theme.MyCustomTheme"/>
The above steps resulted in every window having my default window background color defined in step 1 above including action bar. I definitely did not want my action bar, edit text, text view etc to be the default window color. So, I needed to to go back to step 1 and override the style of specific UI widgets I did not want to have the default window background
<style name="Theme.MyCustomAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowBackground">#color/my_custom_window_background</item>
<item name="android:colorBackground">#color/my_custom_window_background</item>
<item name="android:actionMenuTextColor">#color/customMenuColor</item>
<item name="android:textViewStyle">#style/customTextViewStyle</item>
<item name="android:editTextStyle">#style/customEditTextStyle</item>
<item name="android:buttonStyle">#style/customButtonStyle</item>
<item name="android:listViewStyle">#style/customListViewStyle</item>
<item name="android:tabWidgetStyle">#style/customTabWidgetStyle</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/customActionBarStyle</item>
<item name="actionMenuTextColor">#color/customMenuColor</item>
The last step was to define the each custom style define above either to have custom styles for them or have then assigned the system default styles (overridden because of custom window background)
For example, the custom action bar style will look like this:
<style name="customActionBarStyle"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/light_black</item>
<item name="android:displayOptions">showHome|showTitle</item>
<item name="android:titleTextStyle">#style/customActionBarTitleTextStyle</item>
<!-- Support library compatibility -->
<item name="background">#color/light_black</item>
<item name="displayOptions">showHome|showTitle</item>
<item name="titleTextStyle">#style/customActionBarTitleTextStyle</item>
</style>
The advantage of this approach is you can define a default theme in a centralized way and don't have to define a background for each layout as it will be injected through the custom theme applied to the entire app.. Any future re-theming of the app will be very easy with this approach
Please refer to the Android Documentation on theming including how to theme the action bar for more information

Looking at themes.xml i didn't see anything applicable to layouts and ViewGroups in general, (although there are styles support for lists and some widgets as you can see).
Therefore I am not sure that it is possible to have your custom style applied to all layouts.
I guess you would still have to apply your custom layout style, (where you could change background color as
<item name="android:background">#ff0000</item>
) to each of your layouts yourself.
Feel free to prove me wrong.

Simple Android app color

I have an app where I haven't explicitly defined any colors. The app looks different on my phone than it does on a few other phones around my office (the title bar at the top of the app on my phone is blue with white letters and on other phones it's gray with white letters). How do I make them all the same? Is it as simple as just explicitly setting the color in my app?

You need to apply one of available themes to your application. You can do it AndroidManifest.xml, just use android:theme attribute:
android:theme="#android:style/Theme.Holo" if you want dark theme or android:theme="#android:style/Theme.Holo.Light" if you want light theme.
If you use put this app in one of your <activity> tags, only corresponding activity will be styled, if you put it in <application> tag, style will be applied to the whole application.
Of course, you can define your own style in styles.xml:
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#drawable/bg_window</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Here's the example of AndroidManifest.xml:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme"
>
<activity
android:name=".Activity1"
android:theme="#style/AppTheme2"
/>
<activity
android:name=".Activity2"
/>
In this example, AppTheme2 will be applied only to Activity1, while AppTheme will be applied to all other activities.

All the buttons, textviews and other UI elements not designed by you will change their aspect depending on the selected Theme. If you choose the default theme, all the GUI widgets will look different depending on the device manufacturer, the Android version, etc.
You can specify a concrete theme, such as Holo, with the problem that it won't work on Android versions prior to 3.0. You can keep the default theme for the old version, or otherwise you can use this website to generate all the Holo-style GUI elements yourself:
http://android-holo-colors.com/

the title bar at the top of the app on my phone is blue with white
letters and on other phones it's gray with white letters
This is the problem with the customized frameworks of some OEMs. They override the default android styles. I assume that the device with a blue title bar is a Samsung device with TouchWiz on it, right?
I order to have a consistent title bar you'll have to declare your own theme:
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#drawable/title_bar</item>
<item name="android:windowTitleStyle">#style/WindowTitle</item>
</style>
<style name="WindowTitle">
<item name="android:singleLine">true</item>
<item name="android:textAppearance">#style/TextAppearance.WindowTitle</item>
<item name="android:shadowColor">#BB000000</item>
<item name="android:shadowRadius">2.75</item>
</style>
The original title_bar 9 patch.
This is the answer to your question. However in my opinion you should't use title bars, use the ActionBar instead. You can use ActionBarSherlock for backwards compatibility.

How to customize the Theme for whole Application

I used Theme.Sherlock.Light.DarkActionBar for my whole Application. Now the Action bar background color is black by default. How to change this color. Basically how to customize the Theme for whole Application?
<activity
android:name="com.mypath.myapp.FirstActivity"
android:label="#string/app_name"
android:theme="#style/Theme.Sherlock.Light.DarkActionBar"
>

You can use android:theme=theme_style in your <application> tag. Now if you want your action bar to be different than that given by the theme, then you can override it by defining the style between <style></style for your action bar specifically.
Here's the concept. Go to res > values > styles.xml. You can extend or customize your themes as follows:
<style name="AppBaseTheme" parent="android:Theme.Light">
<item name="android:background">#color/background_dark</item>
</style>
Update:
OR if you want to make generic (not theme specific) changes for all your applications, then you can edit sdk/platforms/android-target/data/res/values/styles.xml
OR if you want to override default themes for all your applications, then you can edit sdk/platforms/android-target/data/res/values/themes.xml
Update - found this:
ActionBar developer docs. This link says "You can control the behaviors and visibility of the action bar with the ActionBar APIs, which were added in Android 3.0 (API level 11)." So I assume your target is API 11 at minimum.
If you are targeting API 11 and above, you can do advanced custom styling as follows:
<resources>
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/ab_background</item>
<item name="android:backgroundStacked">#drawable/ab_background</item>
<item name="android:backgroundSplit">#drawable/ab_split_background</item>
</style>
</resources>
Here you go , Styling Action Bar background

You can define the theme for your whole application in your manifest file in application tag as below:
<application
android:name="com.test"
android:icon="#drawable/appicon"
android:label="#string/app_name"
android:theme="#android:style/Theme.NoTitleBar" > <---Define your own style here.

Have a look at http://actionbarsherlock.com/theming.html . You must create a own Theme-style.

for modifying default android sdk themes You can find android Sdk themes.xml file in :
\android-sdk\platforms\...\data\res\values\themes.Xml
so you can change your whole application theme.

Unexpected effect of Holo Light Theme of my action bar

I have used XML to define the Theme of the action bar for my Main activity to be as follows:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light" />
<style name="HomeTheme"
parent="#style/AppTheme">
<item name="android:actionBarStyle">#style/HomeActionBarStyle</item>
</style>
<style name="HomeActionBarStyle"
parent="#android:style/Widget.Holo.ActionBar">
<item name="android:displayOptions">showHome|showTitle</item>
</style>
Then in my Manifest file I have set the Theme of my activity with the defined Theme :
<activity
....
android:theme="#style/HomeTheme"
....
</activity>
everything went file as expected except two thing:
1) the border line of the action bar area is still blue
2) the background color of the action bar area is white not grey.
I am not sure what could be my mistake or this is just a bug in my emulator?
I need to solve the previous two points just to have beautiful GUI

Change
parent="#android:style/Widget.Holo.ActionBar"
to
parent="#android:style/Widget.Holo.Light.ActionBar.Solid"
By default the standard ActionBar has the blue line under it instead of the gray. The solid variant is probably what you're looking for.