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>
Related
I have a Xamarin Forms TabbedPage which contains a NavigationPage and I'm setting a ToolbarItem with two white icons. For some reason they appear black when my icons are white:
Here is my Xaml code:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Pick.Views"
x:Class="Pick.Views.MainView"
xmlns:utility="clr-namespace:Pick.Utility"
utility:ViewModelLocator.AutoWireViewModel="False">
<NavigationPage Title="{Binding Strings[Menu_MyPools]}">
<x:Arguments>
<views:PoolsView BindingContext="{Binding PoolsViewModel}"/>
</x:Arguments>
<NavigationPage.ToolbarItems>
<ToolbarItem Command="{Binding CreatePoolCommand}" Order="Primary" IconImageSource="ic_add_white_36dp.png">
</ToolbarItem>
<ToolbarItem Command="{Binding JoinPoolCommand}" Order="Primary" IconImageSource="ic_login_white_36dp.png">
</ToolbarItem>
</NavigationPage.ToolbarItems>
</NavigationPage>
I have tried setting AppThemeBinding and changing Styles.xml but nothing seems to work:
<ToolbarItem Command="{Binding CreatePoolCommand}" Order="Primary">
<ToolbarItem.IconImageSource>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="Android" Value="{AppThemeBinding Light=ic_add_white_36dp,Dark=ic_add_white_36dp}"/>
<On Platform="iOS" Value="{AppThemeBinding Light=ic_add_white_36pt,Dark=ic_add_white_36dp}"/>
</OnPlatform>
</ToolbarItem.IconImageSource>
</ToolbarItem>
Any ideas?
Here my styles.xml:
<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 http://www.google.com/design/spec/style/color.html#color-color-palette -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#188223</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>
</resources>
Tabbar.axml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#android:color/white"
app:tabGravity="fill"
app:tabMode="fixed" />
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" />
I just figured out my issue. Turns out that I had XML files corresponding to my images which had a vector definition inside. Not sure if those were automatically created by one of my material design icons VS extension. Once I remove, I see my icons in the right color.
//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! :)
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
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);
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