Customize dropdown dialog items in WebView - android

I am including a WebView into an Android View. In the page loaded in the WebView I have a drop down. When I click on the drop down, a dialog appears (it is the native Android dialog) but it has a bad look.
I would like to change those styles.
It seems to me that I need to change a theme style in the xml but I don't know which property could affect the webView dialog.
<item name="android:dropDownListViewStyle">#style/DropDownListView.App</item>
<item name="dropDownListViewStyle">#style/DropDownListView.App</item>
<style name="DropDownListView.App" parent="#style/Widget.Sherlock.ListView.DropDown">
<item name="android:listSelector">#drawable/list_selector_holo_light</item>
<item name="android:divider">#drawable/abs__list_divider_holo_light</item>
</style>
I have tried to change this property but nothing happened.
What property should I change to modify dialog list style?
Thanks

Related

Set AlertDialog View Inset via style

I use Acr.UserDialogs to create cross-platform dialogs from a Xamarin Shared/PCL project. Acr.UserDialogs contains a method to create a prompt which (in Android) is an AlertDialog whose View is set to an EditText. Unfortunately the View/EditText has no margin/padding which results in it reaching until the outer left and right limits of the dialog - which looks pretty ugly. Due to it being a library I have no ability to change how exactly the EditText or the AlertDialog are created (rather than editing the libraries code on GitHub myself but that's a way I try to avoid for now if possible). What the library supports is the possibility to pass an AndroidStyleId into the call that it uses instead of the default Android AlertDialog style (new AlertDialog.Builder(activity, passedAndroidStyleId)).
Now, my idea is to create a style that defines a custom margin/padding/inset to the View of the AlertDialog kind of as follows and pass it in.
<style name="CustomPromptDialog" parent="ThemeOverlay.AppCompat.Dialog.Alert">
<item name="viewInset">10dp</item>
</style>
Problem is I can't find any resources listing which "properties" can be set in a style or how they are named, so my only idea was to ask here:
Is there any way to achieve what I'm trying to do? And if yes, how?
You can set the style like this to change the form of the Alertdialog. This the method for globel setting.
<style name="MainTheme" parent="MainTheme.Base">
<item name="android:datePickerDialogTheme">#style/Theme.picker</item>
<item name="alertDialogTheme">#style/Theme.alert</item>
</style>
<style name="Theme.alert" parent="ThemeOverlay.AppCompat.Dialog.Alert">
<item name="colorAccent">#FFC107</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFC107</item>
<!-- Used for the background -->
<item name="android:background">#4CAF50</item>
<item name="viewInset">10dp</item>

How to set background color of exposed dropdown PopupWindow?

I'm using an exposed dropdown from material design components. It's an AutoCompleteTextView within a TextInputLayout which basically acts like a spinner. You give it an adapter and it pops up a PopupWindow on click.
The PopupWindow background is a dark gray. I'd like to change it to white. I've tried this via theming to no avail:
<style name="PopupWindow">
<item name="popupMenuBackground">#color/white</item>
<item name="android:popupBackground">#color/white</item>
<item name="android:windowBackground">#color/white</item>
</style>
I've also tried calling this on the AutoCompleteTextView:
autoCompleteTextView.setDropDownBackgroundResource(R.color.white);
This actually worked. However, if I open the dropdown when the keyboard is open, the background turns dark gray again. It's only when the keyboard is dismissed that the background is white.
Any idea how to solve this? Surely there has to be a theme attribute that I can override to make the PopupWindow background white?
Found the solution thanks to this post: https://medium.com/#rmirabelle/there-is-no-material-design-spinner-for-android-3261b7c77da8
Just override colorSurface in your theme:
<item name="colorSurface">#color/white</item>

How can I style the title of a MediaRouter dialog?

I'm using mediarouter-v7 v23.1.1 to show a chromecast / media router chooser dialog. Now I try to style this thing - while I could change the background color and list item text style with this:
<style name="Theme.MediaRouter.Light">
<item name="android:background">#color/orange</item>
<item name="mediaRouteChooserPrimaryTextStyle">#style/my_custom_style</item>
</style>
I was not able to override the style of the dialog's title. This and other attempts were not successful:
<style name="Theme.MediaRouter.Light">
<item name="android:windowTitleStyle">#style/my_title_style</item>
</style>
<style name="my_item_style">
<item name="android:textColor">#color/blue</item>
</style>
As I understood it, a dialog has its own window, therefore android:windowTitleStyle of the (dialog) theme that I override in my custom styles should be applied, but its not. I also looked into the implementation of the mediarouter dialog to see if they do anything fancy (like hiding the window and adding a custom element as their title), but they do not, they simply call setTitle(...) on the Dialog instance.
What am I doing wrong?
Unfortunately that dialog doesn't follow the standard theme (Dialogs in Android are all pretty unfriendly in general but that one is among the hardest to work with). Since that dialog is provided by media router, you can only provide a customized theme if you replace that completely with your own dialog.
You can try subclassing MediaRouteDialogFactory and override onCreateChooserDialogFragment() method and pass your implementation to the ActionProvide:
mediaRouteActionProvider.setDialogFactory(yourDialogFactoryImlementation)
You can take a look at the CCL where I do a similar thing not for the chooser dialog but for the controller

Styling custom dialog fragment not working

I'm trying to style all my dialog fragments to look the same in my app. The dialogs coming from my settings fragment are styled exactly the way I want it. For my custom dialog fragments, the style is similar but not exactly the same. For some reason the spinner, timepicker, datepicker, radiobuttons, and edittext widgets inside my custom dialog fragments don't pick up the same style. In fact, the widgets blend in with the white background and you can't see that they are there. What am I doing wrong?
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"/>
<style name="Theme.Base" parent="AppTheme">
<item name="colorPrimary">#color/PrimaryBackgroundColor</item>
<item name="colorPrimaryDark">#color/SecondaryBackgroundColor</item>
<item name="colorAccent">#color/ColorBackgroundAccent</item>
<item name="android:textColorPrimary">#color/PrimaryTextColor</item>
<item name="android:alertDialogTheme">#style/AppTheme.DialogStyle</item>
</style>
<style name="AppTheme.DialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColorPrimary">#color/PrimaryBackgroundColor</item>
<item name="colorAccent">#color/ColorBackgroundAccent</item>
</style>
I'm applying the theme to my custom dialog fragment like this:
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.AppTheme_DialogStyle);
My settings dialog looks like this (Exactly how I want it):
Settings Dialog Fragment
My custom dialog fragment looks like this:
Custom Dialog Fragment
As you can see, the radio button selected color red and you can't see the unselected radio button.
Finally got an answer!!!
It's an issue or bug with AppCompat 22+.
Check out link here
Apparently this was a bug with fragments and widgets weren't getting the material themed in a fragment. It seems they fixed this issue, but the issue still holds in a dialog fragment based on what I'm going through.
The problem comes when you use the inflater instance passed to Fragment#onCreateView(). The workaround for now is to instead used the LayoutInflater from getActivity().getLayoutInflater() according to google.
So I changed my code to:
View view = getActivity().getLayoutInflater().inflate(R.layout.dialog, null);
from:
View view = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.dialoge, null);
All my widgets are now themed. Thanks everyone. Hopes this helps someone else.
I believe you need to set the theme on the actual Dialog and not the Fragment
Use this constructor to create your AlertDialog:
AlertDialog.Builder(Context context, int theme)
ie
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), theme)
I think you need to add one more item in style of your dialog. android:textColorSecondary will show color of un selected checkbox.
in your style add it.
</style>
<style name="AppTheme.DialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColorPrimary">#color/PrimaryBackgroundColor</item>
<item name="colorAccent">#color/ColorBackgroundAccent</item>
<item name="android:textColorSecondary">#000000</item>
</style>
It will make un Checked checkbox or toggle button edge color black. you need to change #000000 to color your want to show.
See if this helps -
Android appcompat-v7:21.0.0 change material checkbox colors
In short, try setting android:textColorSecondary.

Changing default Android fade/scrim color when calling a Dialog

I've been working on an app and I've reaching the point where it requires me to display a menu window in the middle of the screen.
I've been using an AlertDialog object filled with a custom View but now it was required of me to "surround" the window with a semi-transparent white glow as opposed to the default grayish one. I did a similar with the fade-in color of some navigation drawers I have on my app but in that case I had a specific method to quickly help me solve that problem. So far I haven't found anything that helps me solve this one.
I tried creating a default style with a new "windowBackground" value but I encountered 3 problems from the get-go:
I'm no longer able to shut the AlertDialog down by clicking outside the layout (I'm guessing because by changing the color that way everything is now the layout)
The menu window is now surrounded by a black outline that wasn't there before
By using the filtering search inside the layout, which manipulates the members of a list, the window collapses on itself
Is there any way to accomplish what I want more or less directly?
I'm not really sure about it, but you can use this in your styles.xml
<style name="MyDialogTheme" parent="android:Theme.AppCompat.Light.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#color/your_light_color</item>
<item name="android:backgroundDimEnabled">false</item>
And if you want to dismiss the dialog when clicking outside, use this:
dialog.setCanceledOnTouchOutside(true);
or
<item name="windowCloseOnTouchOutside">true</item>
in your styles.xml

Categories

Resources