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

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

Related

How to properly align slider's thumb on Xamarin.Forms custom slider in android?

I'm trying to create a custom slider in Xamarin.Forms, I have created a custom renderer for this purpose
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
// Set custom drawable resource
Control.SplitTrack = false;
Control.SetProgressDrawableTiled(
Resources.GetDrawable(
Resource.Drawable.custom_progressbar_style,
(this.Context).Theme));
Control.SetThumb(Resources.GetDrawable(
Resource.Drawable.custom_thumb,
(this.Context).Theme));
// Control.Bottom = 30;
}
}
Here I'm loading two xml files one for progress bar and the other one is for slider's thumb. Progress bar is loaded from custom_progressbar_style and Thumb is being loaded from custom_thumb both of them are placed under Resource/drawable.
Progress bar xml content:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:height="10dp">
<shape>
<corners android:radius="3dp"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress" android:height="10dp">
<clip>
<shape>
<corners android:radius="3dp"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress" android:height="10dp">
<clip>
<shape>
<corners android:radius="3dp"/>
</shape>
</clip>
</item>
</layer-list>
Thumb xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_gravity="center_vertical">
<!-- Larger white circle in back -->
<item >
<shape android:shape="oval">
<solid android:color="#f0f0f0"/>
<size
android:width="30dp"
android:height="30dp"/>
</shape>
</item>
<!-- Smaller blue circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="#android:color/transparent"
android:width="10dp"/>
<solid android:color="#6766f6"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
</layer-list>
I have fixed the height of my custom slider to 10dp which is causing alignment issues with the slider's thumb. Can you suggest how I can overcome this alignment issue.
According to your description, I test your code and modify your custom_progressbar_style.xml, and I have on problem.
This is my custom_progressbar_style.xml, please take a look:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#d9d9d9"
android:centerColor="#e6e6e6"
android:endColor="#d9d9d9"
android:centerY="0.50"
android:angle="270" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#e6b3e6"
android:centerColor="#ffcce0"
android:endColor="#e6b3e6"
android:centerY="0.50"
android:angle="270" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#ff0066"
android:centerColor="#ff00ff"
android:centerY="0.50"
android:endColor="#cc0052"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>
Update:
<StackLayout>
<local:customslider HeightRequest="10" VerticalOptions="CenterAndExpand" />
</StackLayout>
Update again:
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
if (Control == null)
return;
SeekBar seekbar = Control;
Drawable thumb = seekbar.Thumb;
thumb.SetBounds(thumb.Bounds.Left, -4, thumb.Bounds.Left + thumb.IntrinsicWidth, thumb.IntrinsicHeight-4);
}

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! :)

How to change TimePicker Theme color?

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);

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

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