SnackBar style changed after using material components - kotlin

Because I wanted to use material input edit text, I had to change my style to
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
But my SnackBar style has changed, before it (which I was using AppCompat) my SnackBar was show in different mode, I mean, It came up from bottom and after a while it goes down, but now it is shown like a simple toast, it fade-in and then fade-out,
how can I use material component without having any change in my view styles?

Add following lines into styles.xml BaseTheme:
<resources>
<style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
...
<item name="snackbarStyle">#style/Widget.MaterialComponents.Snackbar</item>
<item name="snackbarButtonStyle">#style/Widget.MaterialComponents.Button.TextButton.Snackbar</item>
<item name="snackbarTextViewStyle">#style/Widget.MaterialComponents.Snackbar.TextView</item>
</style>
</resources>

Related

Change navigation bar color on android react native(Only on single page, not through out the app)

react-native-navigation-bar-color is not working for me.Any other solution to change nav bar color on androi in react native?
You just need to update your android style, Go to android/app/src/main/res/values/styles.xml file
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">#drawable/rn_edit_text_material</item>
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
</style>
Just use the StatusBar of react-native.
import {StatusBar} from 'react-native'
...
...
<StatusBar backgroundColor="blue" barStyle="light-content" />
https://reactnative.dev/docs/statusbar
go into this path ..android/app/src/main/res/values find styles.xml
and add this item :
<item name="android:navigationBarColor">#212e34</item>
this is my color code #212e34 change it what ever you want

Change the background color of textInput highlight (autocomplete) on react-native

How can I change this background color of TextInput when it got highlight from the autoCompleteType that already exists on react native?
like on this image
To customize this autofill bg color, you have to set this at android level.
Create a xml file with the name of your choice, for example autofill_highlight.xml in android/app/src/main/res/drawable
Put this code inside :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/transparent" />
</shape>
Here, the color set is transparent ("#android:color/transparent"), replace it with your color.
In android/app/src/main/res/values/styles.xml, add this line to your app theme (make sure to provide your own file name if you don't call it autofill_highlight like in my example)
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... your other theme customization ... -->
<!-- ADD THE FOLLOWING LINE -->
<item name="android:autofilledHighlight">#drawable/autofill_highlight</item>
</style>
</resources>
Rebuild your application :)

Customise style of image select react native image picker

How do you change the colour of the react-native-image-picker choose from library screen?
I have added the following to styles.xml
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:actionBarStyle">#e7bd61</item>
<item name="android:colorPrimary">#e7bd61</item>
<item name="android:colorPrimaryDark">#e7bd61</item>
<item name="android:colorAccent">#e7bd61</item>
<item name="android:textColor">#e7bd61</item>
<item name="android:statusBarColor">#color/blue</item>
</style>
This code allows the Dialog to be styled however doesn't allow styling on the choose from library screen.

Naviagation Page is not setting BarBackgroundColor in XAML

Below is the code for XAML for customNavigation in Xamarin. The bar color is not set but Bar text color is set. And this is only happening in Android, iOS works fine.
<NavigationPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DSXMobile.Views.CustomNavigationView"
BarBackgroundColor="Red"
BarTextColor="Black">
</NavigationPage>
Can anyone please help me ?
This is a known issue,
From Xamarin forums https://forums.xamarin.com/discussion/88569/barbackgroundcolor-refusing-to-get-set-on-android-but-bartextcolor-is-fine
"If you are using FormsAppCompatActivity
This is a bug in XF if you're using the FormsAppCompatActivity.
The workaround is to set android:background in your applications' layout file used for FormsAppCompatActivity.ToolbarResource.
Set this value to anything, example: android:background="#00000000"
Then XF will style it with whatever colour is in your XAML style later.
Really dumb bug, hope it gets sorted soon."
Another reference:
https://forums.xamarin.com/discussion/37657/how-to-change-the-nav-bar-background-color-on-android
Two annoying Custom Renderer Solutions:
https://forums.xamarin.com/discussion/17811/tabbedpage-tabbar-background-color-tint
https://forums.xamarin.com/discussion/59828/change-barbackgroundcolor-dynamically
Like the other answer says its a bug but i don't know if it should be called a bug because android is doing what it does picking the theme that you have assigned to its activity in your styles.xml now what you can do is make that same change in your styles.xml my theme something like this :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<style name="DrawerArrowStyle"
parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#FFFFFF</item>
</style>
<style name="MyTheme.Base"
parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#003399</item>
<item name="colorPrimaryDark">#003399</item>
<item name="colorControlHighlight">#003399</item>
<item name="colorAccent">#012348</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
</resources>
Changing the colors in here will change it there aswell for eg ColorPrimary is your toolbar color

How can i change the cursor color in react-native?

I'm trying to change the pointer of cursor but i don't have sucess.
I have managed to change color selection, but I want to change the pointer where in the image below is green. Can someone help me?
For Android I think the property is in styles.xml, try setting it there:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/kio_turquoise</item>
<item name="colorPrimaryDark">#color/kio_hot_pink</item>
<!-- sets cursor color -->
<item name="colorControlActivated">#android:color/blue</item>
</style>