Develop Reference

Activity Layout goes blank when switched to Material Design components

Problem :
There was no problem when app was using
Theme.MaterialComponents.Light.NoActionBar
But was not using any MDC elements in Layout like (TextInputLayout etc).
Then i replaced Editext with TextInputLayout and Button with Material Button.
Now here the problem comes.
When i run my app, i see the screen goes blank. Just pure white.
I checked Layout isses.
I found there're 7 warnings and 2 errors(Render problem).
The Render problems are as -
Path.op() not supported. (As was it suggests i refreshed the layout many times. Doesn't work)
java.awt.geom.IllegalPathStateException: missing initial move to in path definition
This is what i have tried -
Downgrading my MDC dependency (how to solve render problem Path.op() not supported?)
Clean project, rebuild and restart Android studio
Please help me to solve this strange issue.
I want to use MDC in my project.
Thank you.

I would suggest you should first make use of the Bridge then, gradually override the parent theme attributes based on your requirement design.
In AndroidManifest.xml
android:theme="#style/MyMaterialTheme"
Then under style.xml. it would like something like
<style name="MyMaterialTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:windowBackground">#color/white</item>
<item name="toolbarStyle">#style/BlueToolbar</item>
</style>
try referring reference , reference
Simple solution is make your theme extend a Bridge theme :) I hope this helps

Android Studio improper content_main xml on fresh install?

I just got android studio and I have some questions as my screen is different from the tutorial on lynda.com . The design tab for my content_main.xml file is just a blue square
However, the tutorial has this screen instead.
. This seems to fix itself when I closed the project and reopened it. However, instead of Hello World the tutorial has in the middle of the screen, I have android...Coordinator Layout as seen below. What have I done wrong as I literally just downloaded Android Studio...

make sure your styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>

Make sure style is (parent="Base.Theme.AppCompat.Light.DarkActionBar">)

How to style Android's AppBar action text?

I need to change text size of action buttons in AppBar/Toolbar. It should be 14sp, but I'll use 20sp in this example, because it is more evident. I am using appcompat-v7 22.1.1
At first I tried to use theme attribute android:actionButtonStyle:
<style name="FirstAttemptTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionButtonStyle">#style/Custom.Widget.AppCompat.Light.ActionButton</item>
</style>
<style name="Custom.Widget.AppCompat.Light.ActionButton" parent="Widget.AppCompat.Light.ActionButton">
<item name="android:textSize">20sp</item>
</style>
Then I ran application on the Lollipop and the result was as needed:
But then I used an emulator with lower version and my theming had no effect:
I digged a little deeper and discovered that abc_action_menu_item_layout.xml is used for action menu items and it has a line android:textAppearance="?attr/actionMenuTextAppearance"
So I tried to modify this theme attribute (I also had to add textStyle:bold):
<style name="SecondAttemptTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionMenuTextAppearance">#style/Custom.TextAppearance.AppCompat.Widget.ActionBar.Menu</item>
</style>
<style name="Custom.TextAppearance.AppCompat.Widget.ActionBar.Menu" parent="TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
As in the first time, the result was as needed on Lollipop and no effect on any version below.
So, the question is: how to properly change text size for action menu item?
PS: I created a simple project on github to demostrate my issue

It appears that actionButtonStyle and actionMenuTextAppearance should be used without android: namespace.
As it can be seen in values-v21/values.xml of support library, Lollipop uses attribute from system theme (note the android: prefix), that's why my attempts worked with it:
<style name="Base.V21.Theme.AppCompat.Light" parent="Base.V7.Theme.AppCompat.Light">
...
<item name="actionButtonStyle">?android:attr/actionButtonStyle</item>
...
</style>

Styling the popup menu in Android 5.0

I'm making my app ready for Android 5.0, I'm using the latest compatibility library, here is what my style looks like.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
</resources>
(The ActionBar color is being set programmatically.)
Now, I want the overflow/popup menu to have the dark background like it had in the holo implementation, but I can't get it to work, here is what it looks like:
I have tried setting the popupMenuStyle but it didn't work.
How can I make the popup menu darker?

Stop using the ActionBar. If you want a ToolBar to be set up like an ActionBar, follow this guide on the android-developers blog.
It actually mentions your use case at Dark Action Bar and provides this code:
<android.support.v7.widget.Toolbar
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”#dimen/triple_height_toolbar”
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />

Not a full answer but what I found so far:
In past versions you needed to specify a drawable (Check https://github.com/StylingAndroid/StylingActionBar code and tutorials)
Apparently, now that is a color. To modify it you need to do specify the following theme:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:actionBarPopupTheme">#style/popupNew</item>
</style>
<style name="popupNew" parent="android:ThemeOverlay.Material.Light">
<item name="android:colorBackground">#color/red</item>
</style>
</resources>
This works correctly if the theme applied to the app is just this.
If I add android:actionBarPopupTheme to my existing theme, it doesn't work. I am trying to figure out why.

Solved my problem by using this style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
<item name="actionModeBackground">#color/actionmode_bg</item>
</style>
<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
<item name="elevation">2dp</item>
<item name="displayOptions">homeAsUp|showTitle</item>
<!--showHome-->
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
</style>
I had to use Widget.AppCompat.Toolbar as the parent actionBarStyle

Add the property popupTheme to your toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:theme="#style/Theme.AppCompat.Light"
app:popupTheme="#style/Theme.AppCompat" />
Or define a new style for your toolbar:
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/Theme.AppCompat.Light</item>
<item name="theme">#style/Theme.AppCompat</item>
</style>

This question has already been answered for styling via XML, but I'm adding an explanation here of how to work out the solution to this and similar styling questions yourself.
First, this is the solution when using AppCompat. To your App's style.xml add actionBarPopupTheme to your theme:
<style name="Theme.MyTheme" parent="#style/Base.Theme.AppCompat.Light.DarkActionBar">
...other stuff here
<item name="actionBarPopupTheme">#style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>
<style name="Theme.MyTheme.ActionBarPopupTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#android:color/black</item>
</style>
Here's the steps I took to arrive at this solution (it takes a bit of detective work as the Android documentation is poor):
Open your App's style.xml in Android Studio
On the line where you App's theme is defined, put your screen cursor in the parent theme (e.g. click in #style/Base.Theme.AppCompat.Light.DarkActionBar) then press F4. This should take you to the source code for the style in the appcompat library.
Within this style I saw this line:
< item name="actionBarPopupTheme">#style/ThemeOverlay.AppCompat.Light< /item>
This looked like a possible place to change the theme of the popup. I searched for "actionBarPopupTheme" in the poor
Android developers documentation and found "Reference to a theme that should be used to
inflate popups shown by widgets in the action bar". So this was worth playing with.
I copied the appcompat line containing "actionBarPopupTheme" to my style.xml then in this line replaced the item's theme reference (the bit in bold above) with Theme.MyTheme.ActionBarPopupTheme.
In my style.xml I created my new style named Theme.MyTheme.ActionBarPopupTheme. I used the same parent that was used in the style I copied from the appcompat source (the bit in bold above).
To ensure my new popup style was working, I changed the parent style to ThemeOverlay.AppCompat.Dark then ran and tested the code on a device. The popup style changed, so now I knew my overriding of actionBarPopupTheme was the correct thing to do. Then I changed back to ThemeOverlay.AppCompat.Light.
The next challenge is to work out what item names to override in Theme.MyTheme.ActionBarPopupTheme. I changed the text and background colours. To find the correct item names that change the style of something can be tricky in some cases. One way to find less obvious style item names is to look through the style definitions in the appcompat xml file (the one you opened when pressing F4 in the 2nd step above), continually descending into parent styles (F4 again!) until you find something that may do what you want. Google searches will help here too.

How can I have a drop shadow on my ActionBar (ActionBarSherlock)?

I am including my styled xml layout:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Styled" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/Widget.MyApp.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyApp.ActionBar</item>
</style>
<style name="Widget.MyApp.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
<item name="titleTextStyle">#style/Widget.MyApp.TitleTextStyle</item>
<item name="background">#color/red</item>
<item name="android:background">#color/red</item>
<item name="windowContentOverlay">#null</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="Widget.MyApp.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">21sp</item>
</style>
</resources>
Some of the search over internet suggests that use windowContentOverlay set to #null. But when i use it in the style xml it doesn't change anything. Can any one help what to do?

If you want to create a shadow below the ActionBar you have to set android:windowContentOverlay parameter on the application theme (in your code you are incorrectly setting it on the ActionBar style).
In your example it would be:
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="android:windowContentOverlay">#drawable/my_actionbar_shadow</item>
</style>
Using #null value removes the shadow.
This one line sets the shadow on ActionBar on Android 3.0 and newer. However if you are using ActionBarSherlock, it will not work as you expect. It would create the shadow on top of the window over the ActionBarSherlock on Android devices running system older than Android 4.0 (although ActionBar is present in the api since Android 3.0, ActionBarSherlock uses custom implementation for all Android versions older than Android 4.0).
To create the shadow below ActionBarSherlock you have to set windowContentOverlay parameter on the application theme (notice the missing android:).
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="windowContentOverlay">#drawable/my_actionbar_shadow</item>
</style>
Again, using #null removes the shadow.
Although this line works for ActionBarSherlock, it doesn't work on android devices running Android 4.0 and newer, no shadow is created under the ActionBar on such devices. So how to combine these two parameters to get the desired shadow under both ActionBar and ActionBarSherlock?
Use resource configuration qualifiers, in your case use platform version qualifiers.
In res/values/styles.xml use the second xml code. And in res/values-v14/styles.xml use the first xml code. Therefore the ActionBarSherlock version is used by default (for versions pre Android 4.0) and ActionBar version is used for Android 4.0 and newer.
Edit:
There is a bug in Android 4.3 (API level 18), android:windowContentOverlay does not work. It should be fixed in future release. In case you need it fixed in Android 4.3, you can find workarounds linked in the bug report.

As a previous answer did say use "windowContentOverlay" in the application theme and NOT the action bar style.
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="windowContentOverlay">#drawable/my_actionbar_shadow</item>
</style>
If you want a realistic shadow you can find one in the
"Your Android Folder"/platforms/android-16/data/res/drawable-hdpi/
ab_solid_shadow_holo.9.png and copy it to your drawable-hdpi folder then the end result is
<style name="Theme.Styled" parent="Theme.Sherlock">
...
<item name="windowContentOverlay">#drawable/ab_solid_shadow_holo</item>
</style>

In addition, above API21(Lollipop), you will need this in code, too.
getSupportActionBar().setElevation(0);