How to change TimePicker Theme color? - xamarin.forms

I have this code to change the theme of the datepicker in my app in styles file in android project:
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#039BE5</item>
</style>
Is there a code same to this that can help me for the timepicker?

You can define style in style.xml
<style name="TimePickerTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#039BE5</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
And
TimePickerDialog timePicker = new TimePickerDialog(mContext, Resource.style.TimePickerTheme, fromListener, hour, min, false);

Related

How should i convert my AppTheme style to Material component

//This is my current AppTheme of my application. How should I migrate my AppTheme to Material Components?. I have Migrated my code to AndroidX.
<style name="AppBaseTheme" parent="#android:style/Theme.Light">
<item name="android:windowActionBar">true</item>
<item name="android:windowDisablePreview">true</item>
<item name="android:actionBarSize">#dimen/actionbar_height</item>
<item name="actionBarSize">#dimen/actionbar_height</item>
</style>
<!-- Base application theme. -->
<style name="AppThemeMenu" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:windowActionBar">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
in order to use the material components, start by implementing the material library in your gradel files:
implementation 'com.google.android.material:material:1.1.0'
Then, got to the style.xml and change the parent to one of the following material parents:
Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar
For more information you can check this page .
For example:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Hope this helps! :)

Implement splash screen. how do I specify the image size?

I do splash screen, but the problem is that I do not know where to add
styles. how do I specify the image size ? How do I add text ?
[Activity(Label = "SplashActivity", Theme = "#style/Theme.Splash", MainLauncher = true)]
public class SplashScreen : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
StartActivity(typeof(MainActivity));
Finish();
OverridePendingTransition(0, 0);
}
}
`
In drawable folder splash_screen.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_background"/>
</item>
<item>
<bitmap
android:src="#drawable/splash_logo"
android:tileMode="disabled"
android:gravity="center"
/>
</item>
</layer-list>
Folder values, style.xml:
<style name="Theme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowActionBar">true</item>
</style>
I think you have two options.
1- create an image and visualize it (as in your sample)
2- create an activity layout, so you can add image, text... what you want
You can find some info in the official documentation: Xamarin.Forms SplashScreen
and here you can find the Android Sample: Xamarin.Android SplashScreen
In this sample, you have a style with a drawable:
<resources>
<style name="MyTheme.Base" parent="Theme.AppCompat.Light">
</style>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowActionBar">true</item>
</style>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_background"/>
</item>
<item>
<bitmap
android:src="#drawable/splash_logo"
android:tileMode="disabled"
android:gravity="center"/>
</item>
</layer-list>
but you can use a layout, in the same way it is used for MainActivity

Xamarin forms splash screen visible navigate to another page

The splash screen is visible when navigating to a new page in xamarin.forms android. I want to remove or hide the image.
Here is my style.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme" parent="Theme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="Theme.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">#1976D2</item>
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
</style>
<style name="MyTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/Splash_</item>
</style>
</resources>
In you have activity for the splash, then add 'NoHistory=true' in the activity attribute. Sample below,
[Activity(Label = "XXXX", MainLauncher =true, Theme = "#style/Splash", NoHistory =true)]
public class SplashActivity : AppCompatActivity

Xamarin forms Android toolbar text-color

The toolbar color is by default white and I would like to change it to blue. I was able to change almost everything but not that.
Toolbar.axml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
styles.xml
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorPrimary">#1b2b32</item>
<item name="android:textColorSecondary">#1c4d9e</item>
I found an approach. it is mixed with all the answers I read out there.
I used this answer from
Change color of ToolBarItem in XAML #Guillermo Daniel Arias.
on styles.XML
<item name="android:actionMenuTextColor">#1c4d9e</item>
on App.xml (On xamarin forms share project)
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="White"/>
<Setter Property="BarTextColor" Value="#004895"/>
</Style>
There are two possible approaches:
You change the BarBackgroundColor and BarTextColor of your NavigationPage. In your case, it would be something like that:
MainPage = new NavigationPage(new YourPage())
{
BarBackgroundColor = Color.White,
BarTextColor = Color.Blue
};
The other approach is to set your Android styles. You're already doing that, but I think that's wrong. Instead of android:textColorPrimaryandroid:textColorSecondary`, try something like that:
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#FFFFFF</item>
<item name="colorSecondary">#0000FF</item>
<item name="colorAccent">#0000FF</item>
</style>
I think that android: may be the problem, because I'm doing exactly like I said and it's working.
in App.xml add this :
<Application.Resources>
<ResourceDictionary>
<Color x:Key="mRed">#65508F</Color>
<Color x:Key="mWhite">#FFFFFF</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource mRed}" />
<Setter Property="BarTextColor" Value="{StaticResource mWhite}" />
</Style>
</ResourceDictionary>
</Application.Resources>

Android custom button is smaller without reason

I have defined a custom button in Android.
This is my styles.xml:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:buttonStyle">#style/CustomButtonStyle</item>
</style>
<style name="CustomButtonStyle" parent="#android:style/Widget.Button">
<item name="android:background">#drawable/custom_button</item>
</style>
And this is my custom_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true" android:drawable="#drawable/btn_custom_normal" />
<item android:state_window_focused="false" android:state_enabled="false" android:drawable="#drawable/btn_custom_disabled" />
<item android:state_pressed="true" android:drawable="#drawable/btn_custom_pressed" />
<item android:state_focused="true" android:state_enabled="true" android:drawable="#drawable/btn_custom_focused" />
<item android:state_enabled="true" android:drawable="#drawable/btn_custom_normal" />
<item android:state_focused="true" android:drawable="#drawable/btn_custom_disabled_focused" />
<item android:drawable="#drawable/btn_custom_disabled" />
</selector>
Applying the custom background works, but all buttons are now smaller, and the captions of the buttons are smaller, too. Why? How can I make them appear exactly like the default buttons, but only with another background?
I have found my mistake. I have to select a Holo button style as parent:
<style name="CustomButtonStyle" parent="#android:style/Widget.Holo.Button">
<item name="android:background">#drawable/custom_button</item>
</style>

Resources