I have a SearchView which is dark and its hinttext and its cross icon are black, so I want to set the color of these two things to white.
I am using a custom theme for Android but it does nothing to the SearchView. This is how my custom theme xml file looks like:
<resources>
<style name="Theme.MyApp" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:spinnerItemStyle">#style/MySpinnerItem</item>
<item name="android:actionBarStyle">#style/SearchViewTheme</item>
</style>
<style name="SearchViewTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColorSecondary">#FFFFFF</item>
<item name="android:textColorHint">#CCCCCC</item>
</style>
<style name="MySpinnerItem" parent="#android:style/Widget.TextView.SpinnerItem">
<item name="android:paddingTop">10dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:textSize">14dp</item>
</style>
</resources>
I found a solution. If anyone wants to know what I did:
I just deleted this line:
<item name="android:actionBarStyle">#style/SearchViewTheme</item>
And then, I added this to the .tss file where the SearchView is:
"Window[platform=android]" : {
theme : "SearchViewTheme"
}
Related
I am struggling to set the dark and light mode theme color's for the title text and the background color.
My themes.xml code:
<style name="Theme.Main" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:textColorPrimary">#color/colorAccent</item> //PrefScreen text
<item name="android:textColorSecondary">#color/colorAccent</item> //PrefScreen summary
<item name="colorPrimary">#color/background_dark</item> //ActionBar background
<item name="colorSecondary">#color/colorPrimary</item> //fab outline, PrefCategory
<item name="colorOnSecondary">#color/OnSecN</item> //fab icon
<item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
<item name="android:statusBarColor" tools:targetApi="l">#color/background_dark</item>
<item name="android:backgroundTint">#color/background_dark</item>
</style>
Theme is applied in AndroidManifest.xml to application.
I have tried textColor and titleTextColor.
How to tap on the three dot menu (more options) in the actionbar on Android using Detox?
I followed this SO answer, https://stackoverflow.com/a/65736139/3970346
Since this is a NativeScript app the steps are,
Create a ids.xml file under app/App_Resources/Android/src/main/res/values folder,
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item type="id" name="overflowActionButton"/>
</resources>
Then in the styles.xml in the same directory add,
<style name="Widget.ActionButton.Overflow" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:id">#id/overflowActionButton</item>
<item name="android:contentDescription">"overflowActionButton"</item>
<item name="android:tint">#color/white</item>
</style>
Finally set the style on the AppThemeBase like this,
<!-- theme to use AFTER launch screen is loaded-->
<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
<item name="toolbarStyle">#style/NativeScriptToolbarStyle</item>
<item name="colorPrimary">#color/ns_primary</item>
<item name="colorPrimaryDark">#color/ns_primaryDark</item>
<item name="colorAccent">#color/ns_accent</item>
<!-- the line below -->
<item name="actionOverflowButtonStyle">#style/Widget.ActionButton.Overflow</item>
</style>
After this you can tap on the overflow menu in Detox like this,
await element(by.label('overflowActionButton')).tap();
Thanks to #Leri Gogsadze for pointing me in the right direction
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.
I tried to find the solution for ages , but it's still none working! Below is how I wrote:
<View style = {[ {flex: 0.7} ]}>
<Picker
selectedValue={this.state.selectedGender}
onValueChange={this.onValueChange.bind(this, 'selectedGender')}
>
<Item label="Please select gender" value=""/>
<Item label="Male" value="M" />
<Item label="Female" value="F" />
</Picker>
</View>
If you want to change the style of the picker items on Android, you have to change native code.
You'll have to add your style in android/app/src/main/res/values/styles.xml.
To change the picker container
Here I set, the background to null so there is not the down arrow on the left.
<style name="SpinnerStyle" parent="#android:style/Widget.Spinner">>
<item name="android:background">#null</item>
</style>
To change the selected item style
Here I set the items to be centered, the color font to be dark gray and the font size to 16.
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:gravity">center</item>
<item name="android:textColor">#373737</item>
<item name="android:textSize">16dp</item>
</style>
To change the drapdown items
Just as, the selected item, I want the dropdown items to have the same style.
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:gravity">center</item>
<item name="android:textColor">#373737</item>
<item name="android:textSize">16dp</item>
</style>
Finally
Once, you have set your styles for every element of the picker. You have to add the style to the general App theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:spinnerStyle">#style/SpinnerStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
...
</style>
Hope it helps !
I want a light theme with a dark action bar.
I tried replacing
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
</style>
with
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
</style>
but it did not help.
Is it possible with react native?
I couldn't get the DarkActionBar theme to work either, however, the following worked for me:
<resources>
<color name="primaryDark">#000</color>
<color name="primary">#111</color>
<color name="accent">#ffd400</color>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorPrimary">#color/primary</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowBackground">#color/primary</item>
<item name="android:colorBackground">#color/primary</item>
</style>
</resources>
It seems this little fellow will do the trick:
<item name="android:textColorSecondary">some_color</item>