WebView/Phonegap change select (dropdown) style - android

In my AndroidManifest.xml file I set up the theme to be Holo.Light (or even Holo)
The alert dialog are being designed according to the Holo Theme (either light or dark) but the dropdowns (select) are looking like this:
Is there a way to style the dropdowns like Google Chrome and other apps do?
The native select looks like this:

There is no easy way to achieve that. What you need to do there is to build a native plugin that will open a custom dialog when you click on a <select>.
That dropdown you want to get rid of is the default view for selects on webviews, opposed to the second one that was built in chrome. To help getting you started:
//get all the options and store in an array
var values = $.map($('#group_select option'), function(e) { return e.value; });
//Native function that gets the options and display a dialog
function void showDialog(String[] values){
AlertDialog.Builder b = new Builder(this);
b.setTitle("Example");
b.setItems(values, new OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
switch(which){
case 0:
//call some javascript method to use this value here
break;
case 1:
//call some javascript method to use this value here
break;
}
}
});
b.show();
}
Make sure to set your theme to Holo or Holo.Light as you prefer, and do your preferred bit to call a native code from the javascript layer whenever there is a click on a select element.

You can use jQuery mobile and get yourself a customized theme from from their themeroller
or
Try using "android:Theme" as your parent theme as
<style name="YourTheme" parent="android:Theme">
it is the old android theme and gives the style you are looking for
or you can also specifically change
<item name="spinnerStyle">#android:style/Widget.Spinner</item>
<item name="spinnerDropDownItemStyle">#android:style/Widget.DropDownItem.Spinner</item>
<item name="spinnerItemStyle">#android:style/Widget.TextView.SpinnerItem</item
to create your own style

Related

Is there a material component for Simple Dialog?

As mentioned here, under the different types of Dialogs, the Simple Dialog is listed. Is there a dialog builder that would automatically generate such dialog? Is it just an alert dialog with a custom theme?
I would like to replicate a dialog similar to the new permissions dialogs used in Android 10.
I have tried using the material alert dialog builder:
new MaterialAlertDialogBuilder(context)
.setTitle("Title")
.setMessage("Message")
.setPositiveButton("Ok", null)
.setNegativeButton("Ok", null)
.show();
But this shows the options horizontally, whereas I would like to have them vertically. I have many custom dialogs in my app so I could create another one exactly as I need it, but I wanted to get a better understanding of what's ready to use with the material components instead.
For that reason I downloaded the material-components-android project from github, where I found the DialogMainDemoFragment which lists different types of dialogs. The one that is closer to what I want is created like so:
addDialogLauncher(
dialogLaunchersLayout,
R.string.long_title_message_too_long_actions,
new MaterialAlertDialogBuilder(getContext())
.setTitle(getResources().getString(R.string.long_title))
.setMessage(message)
.setPositiveButton(getResources().getString(R.string.too_long_positive), null)
.setNegativeButton(getResources().getString(R.string.too_long_negative), null)
.setNeutralButton(getResources().getString(R.string.too_long_neutral), null));
where
private void addDialogLauncher(
ViewGroup viewGroup, #StringRes int stringResId, AlertDialog.Builder alertDialogBuilder) {
MaterialButton dialogLauncherButton = new MaterialButton(viewGroup.getContext());
dialogLauncherButton.setOnClickListener(v -> alertDialogBuilder.show());
dialogLauncherButton.setText(stringResId);
viewGroup.addView(dialogLauncherButton);
}
but I can't see where the styling/theming is being determined.
There is material theme which values you can override.
Exactly if I not mistaken you need those styles
<style name="MaterialAlertDialog.MaterialComponents.Title.Panel.CenterStacked" parent="Base.MaterialAlertDialog.MaterialComponents.Title.Panel">
<item name="android:orientation">vertical</item>
</style>

Apply similar looking styles to AlertDialog box for different Android versions

I want to make the AlertDialog box for my app look like the ones on Android > 6.0.0 ( as depicted in the following screenshots) for all lower android version till 4.4.4. I have applied a custom style for the dialog box.
Following is the style in styles.xml for AlertDialog:
<style
name="AlertDialogCustom" parent="ThemeOverlay.AppCompat.Dialog.Alert">
<item name="android:textColor">#color/blue</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:background">#color/dark_grey</item>
<item name="android:backgroundDimAmount">0.3</item>
</style>
Following is how I applied the style in java:
new AlertDialog.Builder(new ContextThemeWrapper(context, R.style.AlertDialogCustom))
.setMessage("Why is DialogBox Style Inconsistent through different android versions?")
// Specifying a listener allows you to take an action before dismissing the dialog.
// The dialog is automatically dismissed when a dialog button is clicked.
.setPositiveButton("Yes", new DialogInterface.OnClickListener()
{
public void onClick(DialogInterface dialog, int which)
{
//Do Something
}
})
.setNegativeButton("No", new DialogInterface.OnClickListener()
{
public void onClick(DialogInterface dialog, int which)
{
//Do Something
}
})
.show();
As a get around I managed to at least change the text color to white on the dark background by using:
if (android.os.Build.VERSION.SDK_INT <= Build.VERSION_CODES.LOLLIPOP_MR1)
style = android.R.style.Theme_Material_Dialog;
else
style = R.style.AlertDialogCustom;
So far I have tried making seperate style for lower Android version and apply them via java by detecting Android version. But, I am unable to replicate the style of AlertDialog box on Android 6+ on lower android versions till 4.4.4. And I am unable to find a solution on the internet.
There is an anomaly though; if I apply my custom style on Rate this app provided by kobakei the resulting RateThisApp dialog looks the same on all the android versions. So I believe styling the AlertDialog in a particular manner should fix the issue.
This is what I want - To make the AlertDialog box on Android 4.4.4 and 5.1.0 to look like the one in Android 6.0.0 and higher by using suitable styles. And why does the textColor and textColorPrimary attributes does not get applied on lower android versions?
If the resource provided in my question is insufficient please let me know in the comment, I will share more details.
Here are the screenshots of AlertDialog box on different Android versions with the same style applied.
Android >= 6.0.0
Android = 5.1.0
Android 4.4.4
For more flexibility, you can just create your custom dialog class with a custom layout.
It will give you better control over the way the layout looks.
You can create very complicated UI in your dialog without writing tons of code
You can simply call your dialog like this :
CustomDialog customDialog = new CustomDialog();
customDialog.show();
And you can manage click listeners and more events inside your dialog class instead of adding those code lined inside your activity and make it super big and hard to understand.
Here is an example:
public class CustomDialog extends Dialog {
private ImageView imageView;
private Context dialogContext;
public CustomDialog (#NonNull Context context) {
super(context);
setContentView(R.layout.full_size_image_dialog); .. //your layout
dialogContext = context;
imageView = findViewById(R.id.full_size_image); //controll your views (use any view, the image view is only an example)
}
public void someMethod() {
}
}
}

How to set font size for items in Xamarin Picker?

I try to change the items font size in Xamarin.Picker for my Android app. In my project, I use BindablePicker that inherits from Picker class. Source here.
I spent some time to do research and I found that I should create a PickerRenderer class and render the Picker.
My renderer class:
public class BindablePickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
var picker = e.NewElement;
BindablePicker bp = (BindablePicker)this.Element;
if (this.Control != null)
{
var pickerStyle = new Style(typeof(BindablePicker))
{
Setters =
{
new Setter { Property = VisualElement.BackgroundColorProperty, Value = Color.Red }
}
};
picker.Style = pickerStyle;
}
}
}
For test purposes I set the backgroundColor for Picker and it works fine. However, in my PickerRenderer class I only have access to Control property which is type of Android.Widget.EditText.
The effect :
Question
How can I access to Picker items, and set the font size for them? Is this possible?
Here is my repository with an example project.
https://github.com/k8mil/PickerRendererXamarin
Related links
https://developer.xamarin.com/api/type/Xamarin.Forms.Picker/
Changing the default text color of a Picker control in Xamarin Forms for Windows Phone 8.1
Font size in Picker control in xamarin forms
I has been able to resolve this by add the line:
Control.TextSize = 30;
On OnElementChanged method:
public class BindablePickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
if (this.Control != null)
{
Control.TextSize = 30;
}
}
}
Maybe this can help someone that is looking for change font size of a Bindable picker.
After some research I don't think this is possible for a generic picker.
You would likely have an easier time just rolling your own picker control in Forms code using a clickable label that pops up a list to select from.
I was able to style a date or time picker using styles in the Android styles.xml file, but since Android does not have a built in generic picker widget, I imagine that Forms is rolling it's own picker list as I can't find the dialog widget to theme that changes your list text size.
For a DatePicker, I can just add the following to the main style element in styles.xml:
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
and then add a new style element in style.xml
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="android:textSize">60sp</item>
</style>
The above does change the text size for a DatePicker (no custom renderer required). Also the customer picker renderer is a bit of a misnomer... it really is just rendering the edit text field that shows the picked item, and allows opening the picker list on click.
I know this is not a solution, but just an indication as to what I found when checking this out and a suggestion that it is likely easiest to not use the Forms Picker type if you want such customization.

Android AlertDialog.Builder displays blank unless a theme is supplied

I have recently begun work on an existing android app and noticed that one of the modals displays as a white blank square. I did some research and someone suggested that supplying a theme should fix it. I tried this and it does fix the issue but i don't understand why this was working without it and now its not. The code we use to initialize the AlertDialog looks like this
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setItems(R.array.media_resume_options, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
//handle selection logic here
//......
}
});
builder.create().show();
I can fix it by changing the instantiation line to
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), AlertDialog.THEME_DEVICE_DEFAULT_DARK );
I don't see any changes to this part of the code that might have caused it. Could it be affected by something else? whats the potential risk that it might affect other dialogs?
It can't be blank,the textcolor and background color both are white that's why you think it is blank.
How to change default text color of dialogbox is explained here
Change dialog text color on 5.0+

Mvvmcross: launching an android dialog containing a ListView

First, I will like to give a big Kudos to Stuart Lodge for this awesome framework. Together with Xamarin's Visual Studio integration, this is one of the most productive cross platform frameworks I have laid my hands on.
What I want to achieve is launch a dialog containing a selectable ListView when a button is clicked. I need access to the selected item when the user closes this dialog. Is there a recommended way to do this using the Mvvmcross' dialog plugin while following the MVVM paradigm?
I am using the following Activity to create a dialog.
[Activity(Theme = "#android:style/Theme.Holo.Dialog")]
public class SearchResultDialogView : MvxActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.SearchResultView);
}
}
Navigating to SearchResultDialogViewModel from another view model brings up this view as modal. So it looks like I am heading in the right direction. However, the dialog is missing the OK and Cancel buttons and I will also like to get rid of the default header. Think I need an AlertDialog but so far I have had no success launching one with this code:
[Activity(Theme = "#android:style/Theme.NoTitleBar")]
public class SearchResultDialogView : MvxActivity
{
protected override Dialog OnCreateDialog(int id, Bundle args)
{
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.SetTitle("some title");
return builder.Create();
}
}
Apologies if this question is vague. I am new to Android UI development.
TIA.
There are several different uses of the word dialog here.
Android Dialogs are 'popup displays' and are covered in http://blog.ostebaronen.dk/2013/02/using-dialogs-in-mono-for-android.html
The MvvmCross Dialog plugin is a code-based form-builder forked from the existing MonoDroid.Dialog and MonoTouch.Dialog tools - see https://github.com/migueldeicaza/MonoTouch.Dialog
The Holo Dialog display is (actually I'm not sure) some theme-based skin on a normal Activity.
With these in mind...
If you want to display a general popup window to collect some data, then you can try using a fragment based dialog to collect data - this is demonstrated (with a little code behind) in Fragments HomeView.cs with NameDialogFragment.cs - for general background on fragments, watch N=26 in http://mvvmcross.wordpress.com/
If you want to use a separate activity for data collection, then #gschackles wrote this article on one way of returning data from child viewmodels - http://www.gregshackles.com/2012/11/returning-results-from-view-models-in-mvvmcross/ - I'm sure other schemes could also be used.
If you do want to learn about the Mvx Dialog plugin, see N=23 in http://mvvmcross.wordpress.com/
You can do it with the builder.
http://developer.android.com/guide/topics/ui/dialogs.html#AddingAList
The code is:
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setTitle(R.string.pick_color);
.setItems(R.array.colors_array, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
// The 'which' argument contains the index position
// of the selected item
}
});
return builder.create();
}
and you can get your element by returning the which value to your caller.

Categories

Resources