I'm trying to style a TextInputLayout:
<style name="AppTheme.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_layout_outlined_box_stroke</item>
<item name="hintTextColor">#color/text_input_layout_outlined_box_stroke</item>
</style>
And that's the color selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/green_2" android:state_focused="true" />
<item android:color="#color/green_2" android:state_hovered="true" />
<item android:color="#color/green_2" android:state_enabled="false" />
<item android:color="#color/green_2" />
</selector>
And that's my View:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:hint="#string/surname">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Why this works as expected applying to the view:
style="#style/AppTheme.TextInputLayout.OutlinedBox"
And theme is not working:
android:theme="#style/AppTheme.TextInputLayout.OutlinedBox"
I'm not getting the differences between these two...
EDIT: maybe I've found this to avoid repeating for each view:
<item name="textInputStyle">#style/AppTheme.TextInputLayout.OutlinedBox</item>
You can define a style:
<style name="AppTheme.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_layout_outlined_box_stroke</item>
<item name="hintTextColor">#color/text_input_layout_outlined_box_stroke</item>
</style>
and apply it to a view with:
<com.google.android.material.textfield.TextInputLayout
style="#style/AppTheme.TextInputLayout.OutlinedBox"
..>
At the same time you can define:
<style name="textInputPrimaryColor" parent="">
<item name="colorPrimary">#color/.....</item>
</style>
and then use it with the android:theme attribute:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:theme="#style/textInputPrimaryColor"
..>
In this way you can modify the theme attributes for that view and any child views, which is useful for overriding theme color palettes in a specific portion of your interface.
More info here.
In this way you are overriding the colorPrimary attribute in the style Widget.MaterialComponents.TextInputLayout.OutlinedBox.
For example it is the default selector used by the boxStrokeColor.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
Using the android:theme="#style/textInputPrimaryColor" you can are changing the colorPrimary for this view without extending the style.
You can achieve the same behavior using the materialThemeOverlay attribute in your style:
<style name="My.OutlinedBox" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">#style/ThemeOverlay.My.OutlinedBox</item>
</style>
with:
<style name="ThemeOverlay.My.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">#color/......</item>
</style>
and then apply it to your view:
<com.google.android.material.textfield.TextInputLayout
style="#style/My.OutlinedBox"
..>
I want all my items with style OutlinedBox to have the box green colored"? I'd like to avoid repeating theme and style for every view...I mean a "global" style that inherit from AppTheme, which is already applied to the whole application in the manifest
Currently there isn't an attribute to define a style only for the TextInputLayout with an OutlinedBox style.
You can only assign a global style for all TextInputLayout views in your app using the textInputStyle attribute in your app theme:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
...
<item name="textInputStyle">#style/My.OutlinedBox</item>
</style>
Note: it requires the version 1.1.0 of the Material Components Library.
Related
And my Second Question :
I use a TextInputLayout :
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColorHint="#color/LightBlue"
android:theme="#style/ThemeOverlay.AppTheme.TextInputEditText.Outlined"
app:boxStrokeColor="#color/selector"
app:boxStrokeWidth="3dp"
app:startIconTint="#color/white">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/numberOfPlayer_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:inputType="numberDecimal"
android:textColor="#color/gold" />
</com.google.android.material.textfield.TextInputLayout>
The Styles file
<style name="AppTheme"
parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/Thistle</item>
<!-- use in get player information -->
<item name="CustomTextStyle">#style/Widget.App. TextInputLayout.
OutlinedBox</item>
</style>
<style name="ThemeOverlay.AppTheme.TextInputEditText.Outlined"
parent="">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="boxCornerRadiusBottomEnd">20dp</item>
<item name="boxCornerRadiusBottomStart">20dp</item>
<item name="boxCornerRadiusTopEnd">20dp</item>
<item name="boxCornerRadiusTopStart">20dp</item>
<item name="android:hint">Number of player</item>
<item name="hintTextColor">#color/card1</item>
<item name="startIconDrawable">#drawable/ic_people</item>
</style>
<style name="Widget.App.TextInputLayout.OutlinedBox"
parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/player_information</item>
<item name="boxCornerRadiusBottomEnd">15dp</item>
<item name="boxCornerRadiusBottomStart">15dp</item>
<item name="boxCornerRadiusTopEnd">15dp</item>
<item name="boxCornerRadiusTopStart">15dp</item>
<item name="android:textColorHint">#color/white</item>
<item name="startIconDrawable">#drawable/player</item>
<item name="startIconTint">#color/gold</item>
<item name="elevation">5dp</item>
<item name="boxStrokeWidth">2dp</item>
<itemname="materialThemeOverlay">#style/ThemeOverlay.App.
TextInputEditText.OutlinedBox</item>
<item name="hintTextColor">#color/AntiqueWhite</item>
<!-- .... -->
</style>
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox"
parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<!-- to change the cursor color -->
<item name="colorControlActivated">#color/white</item>
</style>
That is my selector file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/DarkSeaGreen"
android:state_focused="true"/>
<item android:color="#color/white"/>
</selector>
and Attrs
<resources>
<attr name="customTextInputStyle" format="reference" />
<attr name="CustomTextStyle" formet ="reference"/>
</resources>
When I change the version of the material 1.1.0 to 1.3.0 ,The shape of The text input layout1 I created before is distorted. It became wider than it was before. I could not find the reason for this change.As you can see in the picture, the text inputlayout is very wide and the hinttext still looks black on the back.
The main issue is in the ThemeOverlay. You have to add the parent ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="#style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">#color/...</item>
</style>
It is needed because the default style Widget.MaterialComponents.TextInputLayout.OutlinedBox which you are extending has defined a own materialThemeOverlay and
without the parent dependency you are losing the default behaviour.
Also in your xml layout remove android:theme="#style/ThemeOverlay.AppTheme.TextInputEditText.Outlined". You don't need it because you are already using materialThemeOverlay in the style and the theme defined in the xml layout overrides it and this theme overlay is wrong.
Also:
use a min width because you are using a big corner radius 15dp
<com.google.android.material.textfield.TextInputLayout
android:minWidth="150dp"
android:layout_width="wrap_content"
Finally the color used by the hint:
<item name="android:textColorHint">#color/red600Dark</item>
<item name="hintTextColor">#color/teal_700</item>
Final layout:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.App.TextInputLayout.OutlinedBox"
android:minWidth="150dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:startIconTint="#color/white">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/numberOfPlayer_txt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="numberDecimal"
android:textColor="#color/gold" />
</com.google.android.material.textfield.TextInputLayout>
with:
<style name="Widget.App.TextInputLayout.OutlinedBox"
parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_stroke_selector</item>
<item name="boxCornerRadiusBottomEnd">15dp</item>
<item name="boxCornerRadiusBottomStart">15dp</item>
<item name="boxCornerRadiusTopEnd">15dp</item>
<item name="boxCornerRadiusTopStart">15dp</item>
<item name="startIconDrawable">#drawable/ic_...</item>
<item name="startIconTint">#color/...</item>
<item name="elevation">5dp</item>
<item name="boxStrokeWidth">2dp</item>
<item name="materialThemeOverlay">#style/ThemeOverlay.App.TextInputEditText.OutlinedBox</item>
<item name="android:textColorHint">#color/....</item>
<item name="hintTextColor">#color/....</item>
</style>
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="#style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">#color/....</item>
</style>
I use this in my theme now I am wondering if possible without using theme either programmatically changing colors of textinputlayout
or I can change in xml still without using theme, as I need to fetch colors dynamically and I write code for that or do databinding in xml.
<item name="colorControlActivated">#color/primaryTextColor</item>
<item name="android:textColorHint">#color/primaryTextColor</item>
<item name="android:textColor">#color/primaryTextColor</item>
<item name="android:editTextColor">#color/primaryTextColor</item>```
Yes, we can use setBackgroundColor().
But in your case I think you need to build your own style, here is an example:
Creating TextInputLayout Theme
Let's define a couple of text Styles that will be used as part of the theme. These styles correspond to the different texts used, such as the Hint and Error texts.
<style name="ErrorText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#android:color/red</item>
<item name="android:textSize">16sp</item>
</style>
<style name="HintText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">14sp</item>
</style>
Then, we create our TextInputLayout theme, referencing the above:
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
<!-- reference our hint & error styles -->
<item name="hintTextAppearance">#style/HintText</item>
<item name="errorTextAppearance">#style/ErrorText</item>
<item name="android:textColor">#color/user_input_color</item>
<item name="android:textColorHint">#color/unfocused_color</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/blue</item>
<item name="colorControlHighlight">#color/green</item>
</style>
And for the last step, we build our layout.xml using the android:theme attribute with the style we defined above:
<android.support.design.widget.TextInputLayout
android:theme="#style/TextInputLayoutAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email"/>
</android.support.design.widget.TextInputLayout>
The following screenshot shows my problem:
The text selection handles have a white background and overlay other UI elements. How can I make the background transparent?
Or the better question is actually: what could I possibly have done to make the background white?
Here is the style applied to the EditText:
<style name="TextInputLayout" parent="AppTheme">
<item name="android:background">#color/grey_50</item>
<item name="colorControlNormal">#color/grey_500</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="backgroundTint">#color/grey_900</item>
<item name="colorAccent">#color/grey_900</item>
<item name="colorPrimary">#color/grey_900</item>
<item name="android:textCursorDrawable">#null</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/grey_500</item>
<item name="colorPrimaryDark">#color/grey_500</item>
<item name="colorAccent">#color/grey_700</item>
<item name="android:colorBackground">#color/grey_50</item>
<item name="android:colorForeground">#color/grey_900</item>
<item name="android:textColorPrimary">#color/grey_900</item>
<item name="android:textColorPrimaryInverse">#color/grey_50</item>
<item name="android:textColorSecondary">#color/grey_900</item>
<item name="android:textColorSecondaryInverse">#color/grey_50</item>
<item name="android:windowBackground">#color/grey_50</item>
<item name="android:textColorHint">#color/grey_700</item>
<item name="android:colorActivatedHighlight">#color/grey_900</item>
<item name="colorControlNormal">#color/grey_700</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="android:textColorHighlight">#color/grey_500</item>
<item name="android:colorControlNormal" tools:targetApi="lollipop">#color/grey_700</item>
<item name="android:colorControlActivated" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:colorControlHighlight" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:stateListAnimator" tools:targetApi="lollipop">#null</item>
<item name="android:statusBarColor" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:navigationBarColor" tools:targetApi="lollipop">#color/grey_900</item>
</style>
Edit #1
The EditText's XML (note that I see the same behaviour with EditTexts and AppCompatEditTexts):
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_home_autocomplete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin_small"
android:layout_marginTop="#dimen/activity_horizontal_margin_small"
android:layout_weight="3.5"
android:background="#null"
android:hint="#string/location"
android:padding="#dimen/activity_vertical_margin_medium"
android:theme="#style/TextInputLayout"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:hintTextAppearance="#style/TextAppearance.TextInputLayout">
<AutoCompleteTextView
android:id="#+id/user_home_autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3.5"
android:dropDownWidth="match_parent"
android:inputType="textAutoComplete"
android:maxLines="1"
android:paddingTop="#dimen/activity_horizontal_margin_small" />
</android.support.design.widget.TextInputLayout>
The Phone I used for the screenshot runs Android 6.0.1 with OxygenOS 3.2.7
Getting rid of all #null elements did not work.
This could happen if you set a background color in your main theme , something like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:background">#color/white</item>
...
</style>
remove this property solve this issue for me , if you want to setup a background for all your screens set windowBackground instead.
<item name="android:windowBackground">#color/white</item>
As per the android docs, the theme is applied to views used in the layouts of entire activity or application. For individual views in the layout , we need to apply styles.
Ref: https://developer.android.com/guide/topics/ui/themes.html
The theme is applied as a common style for all the views in an activity or application.
Remove this from your theme <item name="android:popupBackground">????</item>
This happens because you set the background as part of the style, and declare android:theme="#style/TextInputLayout" as theme and not as style.
This makes that the children views of that view have the same behaviour including the text selection handler.
Move this line <item name="android:background">#color/grey_50</item> out of the style.
please set the background for the view :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="YOUR_CUSTOM_COLOR" />
<item android:state_selected="true" android:color="#80000000" />
<item android:color="YOUR_CUSTOM_COLOR" />
</selector>
try this may help you
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed State -->
<item android:state_pressed="true"
android:color="#FFFFFF" />
<!-- Focused State -->
<item android:state_focused="true"
android:color="#FFFFFF" /> <!-- use background color here -->
<!-- Default State -->
<item android:color="#000000" />
</selector>
set this property as background to your edit-text
There is my app_style.xml
<style name="EditText.LargePassword" parent="Widget.AppCompat.EditText">
<item name="android:gravity">center_horizontal</item>
<item name="android:imeOptions">flagNoExtractUi</item>
<item name="android:inputType">numberPassword</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorHint">#color/white</item>
<item name="android:textSize">56sp</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
</style>
And part of layout:
<EditText
android:id="#+id/password_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/giant_margin"
android:layout_marginRight="#dimen/giant_margin"
android:theme="#style/EditText.LargePassword"
tools:text="12345"
tools:ignore="TextFields"
/>
As you can see, I apply EditText.LargePassword style via android:theme attribute:
There is a problem: every attribute applied, except android:gravity.
Okay, let's try with style attribute:
style="#style/EditText.LargePassword"
Boom! Indicator and cursor are gone:
But now android:gravity="center_horizontal" works.
As I read, style == theme, but style don't apply to children of View. Are there any differences? Is it a bug?
Styles and Themes whilst similar are not exactly the same. A style applies only to one specific view whereas a theme will apply to a View/ViewGroup/Activity and all of its children.
In your case you are actually mixing attributes from both styles and themes into one setting which is why it's not working properly. To get both you will need to take the three colorControl attributes and define them as a theme:
<style name="LargePasswordTheme" >
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
</style>
The rest can stay as a style. Then you can add both this and your style to the EditText:
<EditText
android:id="#+id/password_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/giant_margin"
android:layout_marginRight="#dimen/giant_margin"
android:theme="#style/LargePasswordTheme"
android:style="#style/EditText.LargePassword"
tools:text="12345"
tools:ignore="TextFields"
/>
Further reading with good explanations can be found here and here.
I used to use the following style to set my preferenceCategory.
But as it looks, the background color isn't applied when running on Lollipop.
<style name="Theme.Preference.Category" parent="#android:attr/listSeparatorTextViewStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/primary_light</item>
<item name="android:background">#color/primary_dark</item>
<item name="android:paddingTop">4dp</item>
<item name="android:paddingBottom">4dp</item>
<item name="android:paddingLeft">4dp</item>
</style>
And I set it : <item name="android:listSeparatorTextViewStyle">#style/Theme.Preference.Category</item> in my theme.
is the background attribute changed in Lollipop ?
Because of the way Preference is structured, you will need to create a layout with these properties and set the android:layout attribute in the style referenced by your themes's android:preferenceCategoryStyle.
The example code below is suitable for Material. You will need to find appropriate substitutes if you're targeting Holo or AppCompat.
res/values/themes.xml:
<style name="MyAppTheme" parent="#android:style/Theme.Material.Light.DarkActionBar">
...
<item name="android:preferenceCategoryStyle">#style/MyCategoryPreferenceStyle</item>
</style>
res/values/styles.xml
<style name="MyCategoryPreferenceStyle" parent="#android:style/Preference.Material.Category">
...
<item name="android:layout">#layout/my_category_preference</item>
</style>
You will apply whatever attributes you need in the following layout. You could also continue to use a style and specify a style attribute on the TextView element, but just make sure you're using a valid parent style.
res/layout/my_category_preference.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dip"
android:textAppearance="#android:style/TextAppearance.Material.Body2"
android:textColor="?android:attr/colorAccent"
android:paddingStart="?android:attr/listPreferredItemPaddingStart"
android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
android:paddingTop="16dip" />