We Keep Coding

Splash screen exhibiting abrupt motion before switching to the main screen

A splash screen implemented to be displayed while the Xamarin app loads in the background exhibits an unanticipated "upwards movement" while being displayed before switching to the main screen in Android devices (as seen in the following GIF of the loading screen).
My first assumption regarding the solution of this issue was to use the same style settings for both the splash screen activity and the main activity but it is to no avail as the unwanted motion is still exhibited, which, as of this moment, is completely baffling as the cause just cannot be segregated.
The splash screen is implemented as per the logic corresponding to the following code and style sheets in the Android Project:
Resources/drawable/splash_screen.xml
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_screen_background"/>
</item>
<!-- For bitmap images -->
<!--<item>
<bitmap
android:src="#drawable/app_icon"
android:tileMode="disabled"
android:gravity="center"/>
</item>-->
<!-- For Android's drawable vector images -->
<item
android:drawable="#drawable/android_v_drawable_application_icon"
android:gravity ="center"
android:width="150dp"
android:height="214.010dp" />
</layer-list>
values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="launcher_background">#FFFFFF</color>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="splash_screen_background">#FFFFFF</color>
</resources>
value/styles.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.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 https://aka.ms/material-colors -->
<!-- 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>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</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">#FF4081</item>
</style>
<style name="SplashScreenTheme" 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">false</item>
<item name="windowActionModeOverlay">true</item>
</style>
</resources>
Attributes to the Android Activity class pertaining to the splash screen:
[Activity(Label = "App_App1",
Theme = "#style/SplashScreenTheme",
Icon = "#mipmap/icon",
ConfigurationChanges = ConfigChanges.ScreenSize
| ConfigChanges.Orientation,
MainLauncher = true,
NoHistory = true,
ScreenOrientation = ScreenOrientation.Portrait
)]
Thanks in advance.

I make the code sample to reproduce the "upwards movement".
In your description, you said "switching to the main screen in Android devices". I guess you have a special activity to do the splash screen. And have the main activity to LoadApplication.
When i set the same splash screen theme for the Splash_Activity and MainActivity, it would occure the "upwards movement".
So set the Theme to null or the default, it would be okay.
Splash_Activity:
[Activity(Label = "App_App1",
Theme = "#style/SplashScreenTheme",
Icon = "#mipmap/icon",
ConfigurationChanges = ConfigChanges.ScreenSize
| ConfigChanges.Orientation,
MainLauncher = true,
NoHistory = true,
ScreenOrientation = ScreenOrientation.Portrait
)]
MainActivity:
[Activity(Label = "SplashScreen", Icon = "#mipmap/icon", Theme = "#style/MainTheme", NoHistory = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
You could download the source file from the GitHub for reference.
https://github.com/WendyZang/Test/tree/master/SplashScreen2/SplashScreen

Removing the parent attribute of the <style> tag adhering to the splash screen (i.e. the <style> tag with the attribute name="SplashScreenTheme", in this case) removes the unwanted behavior.

switch themes xamarin.android

I am trying to make an App with Xamarin.Android where I have a RadioGroup with all my themes. I am trying to change the theme when the certain RadioButton from the group is checked, but it doesn't seem to work. Any ideas why?
styles.xml
<resources>
<style name="LightTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:colorPrimary"> #color/blue</item>
<item name="android:windowBackground"> #color/grey</item>
<item name="android:colorAccent"> #color/yellow </item>
</style>
<style name="DarkTheme" parent="android:Theme.Material.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:colorPrimary"> #color/green </item>
<item name="android:colorPrimaryDark"> #color/blue </item>
<item name="android:colorAccent"> #color/purple </item>
<item name="android:windowBackground"> #color/dark_blue </item>
</style>
</resources>
layout.axml
<RadioGroup
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/errorMsg"
android:onClick ="Change"
android:id="#+id/radGrp">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Dark"
android:id="#+id/radDark" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Light"
android:id="#+id/radLight" />
</RadioGroup>
MainActivity.cs
RadioGroup radGrp = FindViewById<RadioGroup>(Resource.Id.radGrp);
radGrp.CheckedChange += Change;
private void Change(object sender, RadioGroup.CheckedChangeEventArgs e)
{
try
{
switch (e.CheckedId)
{
case Resource.Id.radDark: this.SetTheme(Resource.Style.DarkTheme); break;
case Resource.Id.radLight: this.SetTheme(Resource.Style.LightTheme); break;
}
}
catch (Exception ex)
{
errMsg.Text = ex.Message;
}
}
Do I need to change something in AndroidManifest.xaml or in the [Activity(Label = "#string/app_name", Theme=... , MainLauncher = true)] ?

This is a limitation/feature of the way Themeing is implemented on Android. Changing an Activity's Theme doesn't actually take effect until the Activity runs OnResume, so effectively you have to re-start the activity. There are various strategies you can use to minimize the impact on the user. Xamarin actually provides a sample Theme Switcher app which might be a good reference for implementing something: https://developer.xamarin.com/samples/monodroid/android5.0/ThemeSwitcher/

Themes and Styling
Styling is the mechanism whereby the values assigned to properties/attributes are defined externally and then assigned to an object, which then applies them. This allows a single style definition to be applied to multiple objects, rather than having to define each property value for each object individually.
The use of styling ensures consistency in design within and across applications, reduces errors, and can save significant effort. It allows developers to quickly apply the overall visual design and concentrate on developing the value-added aspects of the application.
The styling system in Android is so tightly coupled into the Android ecosystem, that some things are impractical to achieve by any other mechanism, read some things you can’t do in code, only using the styling system :-(
An Android style is an xml file that defines a set of property/attribute values. It can be targeted to a single class or multiple classes. Because it conforms to the xml standard, tags that are not relevant to an object are ignored by that object when applied to it.
Styling in Android can be applied at an application, activity, or object level.
From a technical perspective Themes and Styles are interchangeable. A Theme is just a Style applied at the Application or Activity level. The following should be used when referring to them:
Style: Defines a set of properties/attributes applied at the class
and/or object level.
Theme: Defines a set of properties/attributes
applied at the Application or Activity level.
Typically a Style used as a Theme will contain definitions for properties/attributes for many classes.
Styles (and therefore Themes) exhibit inheritance. A Style can inherit from another style, and then add and/or modify property/attribute values.
Styles (and the properties/attributes they define) are also applied hierarchically. In Android, the order of precedence is:
Property/attribute applied directly to an object > overrides > setting a property/attribute by applying a Style to an object > overrides > setting a property by applying a Theme (Style) to an Activity > overrides > setting a property by applying a Theme (Style) to an Application.
Android provides a number of predefined Styles for use as Themes. You can apply these as is or create your own Themes bases on them via inheritance. To support this, the Android styling system defines some styling attributes that these themes use and automatically apply across multiple objects. These includes things like colorPrimary, colorAccent, colorControlNormal, colorControlActivated, textColorSecondary etc. You can re-assign values to these in Styles so the new values are applied. You can also reference them in Styles, so you can pick up the values assigned to them in your applied Theme.
Lastly, different versions of Android may apply styling slightly differently (often due to changes in the properties/attributes of the objects), especially any styling system attributes. This is especially obvious between versions 4.4- and 5.0+ when Material Design was adopted. The support libraries address some of these inconsistencies, and each release of them seems to get slightly better, but if you need to support 4.4 and below, you will almost definitely find your self having to define some styles in both the values and the vales-v21 folders so they are applied appropriately to the different versions.

Vector (XML) drawable on splash screen on old Android versions

I'm struggling with creating a splash screen using (XML-based) vector drawables on old Android versions (API 16) in Xamarin.Android. I've read a lot of similar questions, but I can't get it to work no matter what I try.
I currently have the following, which works fine on recent Android versions (e.g. API 25):
drawable/itlogotext.xml:
<vector xmlns:android="http://schemas.android.com/apk/res/android" [...]>
[...]
</vector>
drawable/splash_screen.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#3498DB" />
</item>
<item
android:drawable="#drawable/itlogotext"
android:gravity="center" />
</layer-list>
values/styles.xml:
<resources>
[...]
<style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="colorPrimaryDark">#1B6698</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
SplashActivity.cs:
using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.Support.V7.App;
using JetBrains.Annotations;
[Activity(Theme = "#style/MyTheme.Splash", MainLauncher = true, NoHistory = true,
ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,
ScreenOrientation = ScreenOrientation.Portrait)]
public sealed class SplashActivity : AppCompatActivity
{
protected override void OnResume()
{
base.OnResume();
this.StartActivity(new Intent(Application.Context, typeof(MainActivity)));
}
}
I have the latest support libraries (26.1.0.1, including Xamarin.Android.Support.v4 and Xamarin.Android.Support.v7.AppCompat, the latter depends on Xamarin.Android.Support.Vector.Drawable).
Unfortunately, when I try to run the app on old Android versions (e.g. API 16), I simply get an exception saying android.content.res.Resources$NotFoundException: File res/drawable/splash_screen.xml from drawable resource ID #0x7f020125, with this line at the bottom of the trace: Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #1: invalid drawable tag vector. Removing the <item> with the drawable from splash_screen.xml fixes the crash, but of course there's no logo in the splash screen anymore.
I have also tried adding AppCompatDelegate.CompatVectorFromResourcesEnabled = true in constructor, static constructor, and OnCreate, but no matter where I put it, the result is the splash screen not being shown at all (i.e. the Android app drawer is visible until the app's main screen is shown).
How can I get XML vector drawables on splash screens to work on earlier Android versions?

You could refer to :
https://bugzilla.xamarin.com/show_bug.cgi?id=41489
As #Jon Dick said, it should failed in < API Level 19. In API Level 21, vector support was added to Android, so it works on API Level 21+ with no changes, since the support library would just switch to the native implementation at that point.
Here is an solution : Custom an Android Application, add the AppCompatDelegate.CompatVectorFromResourcesEnabled = true like this :
[Application]
public class MainApplication : Application
{
public static Context AppContext;
public MainApplication()
{
}
public MainApplication(IntPtr handle, JniHandleOwnership transer) : base(handle, transer)
{
}
public override void OnCreate()
{
base.OnCreate();
AppCompatDelegate.CompatVectorFromResourcesEnabled = true;
}
}
Update :
You could use a picture as a background when Android device version is < 21.
Step 1 :
Create a values-21 folder in Resource folder, create a styles.xml :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<!--
Base application theme for API 21+. This theme completely replaces
MyTheme.Splash from BOTH res/values/styles.xml on API 21+ devices.
-->
<style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="colorPrimaryDark">#1B6698</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
A Resource/values-v21/ directory contains resources that will be used when the device that is running your app is on API Level 21 or higher. If the device is running on an older version of Android, the Resource/values-v21/ directory will be ignored.
Step 2 :
In your Reources\values\styles.xml, modify the MyTheme.Splash's windowNoTitle with a different background.
Reources\values\styles.xml :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen_low_version</item>
<item name="colorPrimaryDark">#1B6698</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
splash_screen_low_version.xml :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item>
<color android:color="#3498DB" />
</item>
<item
android:drawable="#drawable/yourlogo"
android:gravity="center"/>
</layer-list>
Please note that, yourlogo is a .png file.

How to solve "Theme.AppCompat.Light" error?

I want to create a splash screen to my Android program. I am using C# and Xamarin in Visual studio to write my app.
I have followed a Xamarin Tutorial on how to create splash screen, when building the app, it gave me this error:
Error retrieving parent for item: No resource found that matches the
given name (Theme.AppCompat.Light)
in my Style.xml.
Here is my Style.xml file:
<?xml version="1.0" encoding="utf-8" ?>
<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">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
I have searched all the internet for a solution to my problem but didn't worked. Please don't consider it as duplicate cause I have seen all the answers and they didn't fixed my problem.

AppCompatActivity ActionbarDrawerToggle

I recently changed one of my activity class from inheriting ActionbarActivity(because this class is now obsolete in new android version) to AppCompatActivity. I could specify the icon i want the navigation drawer to use before the change, but after the new ActionBarDrawerToggle doesn't allow that.
I was able to implement this and display the drawer icon, the issue I'm having now is how to change the color of the icon(the three lines icon) from black to white.

The colors of the items in the toolbar depend on the theme.
If you are using Theme.AppCompat (the dark theme) the icons will be white. If you are using Theme.AppCompat.Light the icons will be dark. There is also Theme.AppCompat.Light.DarkActionBar.
More about using the appcompat library.
This is an example for using Theme.AppCompat.Light.DarkActionBar (Light theme with dark action bar and white icons in the actionbar)
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

The colour of the ActionBarDrawerToggle can be changed to any colour you want.
Please see an example below:
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="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>
<!-- ActionBarDrawerToggle colour -->
<item name="drawerArrowStyle">#style/DrawerToggle</item>
</style>
<style name="DrawerToggle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_super_colour</item>
</style>
<color name="my_super_colour">#00ff00</color>
</resources>