Using Android Picker without useSpinner in Appcelerator - appcelerator

Here it reads http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker that the useSpinner property is deprecated. How do I use the picker properly then?
When I use the picker in Android without the useSpinner property it does not show up (left picker). When I click on the picker (green border) the values are showing up and it works properly.
With useSpinner set to true, it shows up properly (right). see screenshot.
Visibility of the picker is initially in the .xml set to false. When the user clicks on corresponding labels, the picker becomes visible. This works fine in iOS.

Actually, this is not any wrong behaviour. The red-border picker is outdated and you will hardly see it in any app, even native ones.
The standard picker is the left one which initially shows the selected value or the first value as default. As far as I know, you cannot directly change the text-color of left picker through .tss files.
Instead you can use custom themes and use it for that window which contains pickers.
Here is a quick example of how you can apply themes to pickers and other elements.
Save this xml code in a file (name it anything, let's say theme.xml).
Put this file at below location (create folders if doesn't exist).
Your_Project_Folder -> app -> platform -> android -> res -> values -> theme.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="PickerTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<!-- Activate this for Spinners/Plain Pickers in selected/popup state -->
<!-- <item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item> -->
<!-- Override Date Dialog -->
<item name="android:datePickerDialogTheme">#style/MyDatePickerDialogTheme</item>
<!-- Override Time Dialog -->
<item name="android:timePickerDialogTheme">#style/MyTimePickerDialogTheme</item>
</style>
<!-- Use this style for Spinners/Plain Pickers in default state -->
<style name="SpinnerItem">
<item name="android:textColor">#000000</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#color/primary_dark</item>
<item name="android:background">#color/accent</item>
</style>
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="colorAccent">#color/primary</item>
<item name="android:textColorSecondary">#000000</item>
</style>
<style name="MyTimePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="colorAccent">#color/primary</item>
<item name="android:textColorSecondary">#000000</item>
</style>
</resources>
Now, you can use this theme either globally for all windows, or for particular window.
1 - Using theme for whole app, use this in tiapp.xml file.
<android xmlns:android="http://schemas.android.com/apk/res/android">
<manifest>
<application android:theme="#style/PickerTheme">
....
</application>
</manifest>
</android>
2 - Using theme in .tss file
"Window[platform=android]": {
theme : 'PickerTheme',
backgroundColor : 'white',
windowSoftInputMode : Ti.UI.Android.SOFT_INPUT_STATE_ALWAYS_HIDDEN | Titanium.UI.Android.SOFT_INPUT_ADJUST_RESIZE
}

Related

How to change Xamarin DatePicker popup header and Background to White and also Font Color to Gray

I am trying to give custom look and feel to the datePicker popup. But I could not find any direct fields to change the header Background and Font Color of text shown in popup
enter image description here
You can try using below code inside styles.xml in Android Project.
<resources>
<style name="MainTheme" parent="MainTheme.Base">
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<!--header background-->
<item name="colorAccent">#fff</item>
<!--header textcolor-->
<item name="android:textColorPrimaryInverse">#808080</item>
<!--body background-->
<item name="android:windowBackground">#fff</item>
<!--selected day-->
<item name="android:colorControlActivated">#4B6043</item>
<!--days of the month-->
<item name="android:textColorPrimary">#808080</item>
<!--days of the week-->
<item name="android:textColorSecondary">#808080</item>
<!--cancel&ok-->
<item name="android:textColor">#808080</item>
</style>

How I can customize my tabbed page in master detail page?

I have been struggled with customizing a tabbed page for long time.
I need to move the hamburger menu icon to next by tab menu and disable the title name of tabbed page ("Home") (In iOS, bottom tabbed to top tabbed)
I guess I should use some custom renderer, but I couldn't find website and documents dealing with my case.
Please check it out and Help me. :blush:
My pages hierarchy:
Master/DetailPage -> NavigationPage(in Detail) -> Tabbed Page -> Content Page
As Is Image
To Do Image
If just want to remove the title in Android,Maybe the way can help you:
In AndroidManifest.xml file,add the theme property
<application android:label="xxxxx"
android:theme="#style/NoTitle"/>
</application>
And in Resources/values/styles.xml add the NoTitle style
<style name="NoTitle">
<item name="android:windowNoTitle">true</item>
</style>
Also, the same other way you also can try,in Resources/values/styles.xml find taht
<style name="MainTheme" parent="MainTheme.Base">
and add this item,
<style name="MainTheme" parent="MainTheme.Base">
<item name="android:windowNoTitle">true</item>
</style>
In native android,this way can work.Hope this way can help you.

Set Notification Bar same color than Navigation Bar Xamarin

I'm working on a project with Xamarin Forms.
I followed the James Montemagno's guide https://blog.xamarin.com/material-design-for-your-xamarin-forms-android-apps/
but I can't get the same color in the Notification bar and Navigation Bar
I'm setting the Navigation bar color in App XAML like this
<ResourceDictionary>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#3b5998"/>
<Setter Property="BarTextColor" Value="White"/>
</Style>
</ResourceDictionary>
The style.xml and the values-v21/style.xml are the same that in the guide
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowBackground">#color/window_background</item>
<item name="windowActionModeOverlay">true</item>
</style>
</resources>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#3b5998</item>
</style>
</resources>
I set the statusBarColor in the values-v21/style.xml, and a rare thing is that when I start to debug the application the Notifications bar get the color I set, but then when the application finish starting, it get back to the original color.
Here is a screenshot
I want to set the color of the Notifications Bar the same as Navigation Bar.
Thanks for your help guys!
I have to override the colorPrimaryDark style to achieve what I want.
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#3b5998</item>
<item name="colorPrimaryDark">#3b5998</item>
</style>
Thanks!
The status bar and the action bar can be set to the same colour by using the following xml in the values/Styles.xml file.
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="myTheme" parent="android:Theme.Material.Light.DarkActionBar">
<!-- Override the android colour scheme -->
<item name="android:colorPrimary">#color/my_primary</item>
<item name="android:statusBarColor">#color/my_primary</item>
</style>
</resources>
Do also make sure that you have the style included in the androidManifest.xml and you have custom colours set in the values/Colours.xml file.
<application android:label="Settings" android:icon="#drawable/Icon" android:theme="#style/myTheme"></application>

How to set colors for DatePicker dialog in Xamarin?

I'm trying to figure out how to change the background and text colors of the dialog box that shows when you tap a date or time picker. This is in a Xamarin forms project, specifically the android app. Those properties are not exposed anywhere in the DatePicker control or the renderer that I can find... currently it shows up as this bright pink... thanks!
Add item : "android:datePickerDialogTheme" in your style.xml
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#2196F3</item>
</style>
Complete style.xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#2196F3</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#2196F3</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#2196F3</item>
</style>
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#2196F3</item>
</style>
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
</style>
</resources>

Where is the best place to set a custom Font as Default for the entire project or VisualTree?

I have a Windows Phone 7 app/game that needs to use a custom font.
Example:
Set in the page properties:
FontFamily=".\Fonts\FontFileName.ttf#FontName"
or directly in the TextBlock or Button Control.
It becomes messy when a UserControl is involved as I need to set UserControl.FontFamily attribute/property.
Is there a place where I can set it once and it applies to all the controls in my Project or VisualTree?
You can set the font family of all the controls by using the App.Resources by styling implicitly as,
<Application.Resources>
<ResourceDictionary>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Give your font name here" />
</Style>
<Style TargetType="TextBox">
<Setter Property="FontFamily" Value="Give your font name here" />
</Style>
--------
--------
Similarly set the style for all the controls you have used in your app
--------
--------
</ResourceDictionary>
</Application.Resources>
Set the style for all the controls,whatever you are using in your app.
You should use Blend to create a copy of the default templates of the controls:
Right click on the control you want to template (example: Button) and select "Edit template" -> "Edit a copy".
In the popup, choose "Apply to all" and "Define in Application" in order to apply this template by default on every occurrence of this control.
Edit the template to change the Setter property of FontFamily to the desired value.
Repeat these steps to every type of control where you want your custom font.
For the TextBlock control, you can't edit the Template, so you'll have to use Styles (same idea).

Resources