Develop Reference

Change Version Of Material 1.1.0 to 1.3.0

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>

TextInputLayout Hint gravity bottom

The Hint is always vertically centred and I want it to be aligned to the bottom of the view close to the border with a bit padding. I managed to do it for the text of the TextInputEditText but I cannot do it for the hint.
Here's how it looks
And here is my layout XML:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/first_name_layout"
style="#style/My.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/first_name"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/first_name_edit_text"
style="#style/TextInputEditTextForm"
android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>
And my styles.xml
<style name="My.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPadding</item>
<item name="android:gravity">bottom</item>
<item name="android:textColorHint">#color/gray</item>
<item name="boxBackgroundColor">#android:color/transparent</item>
<item name="boxStrokeColor">#color/grey_little</item>
<item name="boxStrokeWidth">0.5dp</item>
<item name="hintTextAppearance">#style/FormInputLabel</item>
<item name="hintTextColor">#color/gray</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="colorControlActivated">#color/gray_light</item>
<item name="editTextStyle">#style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<item name="android:paddingBottom">5dp</item>
</style>
<style name="TextInputEditTextForm" >
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:gravity">bottom</item>
<item name="android:lines">1</item>
<item name="android:textColor">#color/gray_x_dark</item>
<item name="android:textSize">#dimen/text_xx_small</item>
</style>
<style name="MyThemeOverlayFilledPaddingHint">
<item name="android:paddingBottom">5dp</item>
<item name="android:gravity">bottom</item>
</style>
<style name="FormInputLabel" parent="TextAppearance.Design.Hint">
<item name="android:textSize">#dimen/text_xxxx_small</item>
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPaddingHint</item>
<item name="android:gravity">bottom</item>
</style>

The hint is drawn by helper class CollapsingTextHelper which is available in private-package scope.
You can access the field via reflection but accessing private field is only available on pre Orea devices

How to change the color of the text or the divider color of the date picker in a DialogFragment?

I have been trying to update the textcolor and the divider color of the DatePicker but in vain.
My Datepicker inside the Fragment -
<DatePicker xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/datePickerContainer"
style="#style/wertyui"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:calendarViewShown="false"
android:spinnersShown="true" />
The style of datepicker-
<style name="wertyui" parent="#android:style/Widget.Holo.Light">
<item name="android:datePickerMode">spinner</item>
<item name="android:calendarViewShown">false</item>
<item name="android:spinnersShown">true</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:colorAccent">#color/colorAccent</item>
<item name="android:colorControlNormal">#color/colorAccent</item>
<item name="android:colorControlActivated">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:textColorPrimaryInverse">#color/colorAccent</item>
</style>
The Style of the Activity -
<style name="themex" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#cccccc</item>
<item name="android:colorPrimary">#color/white</item>
<item name="android:listDivider">#color/white_pressed</item>
<item name="colorPrimary">#color/colorAccent</item>
<item name="android:textColor">#212121</item>
<item name="android:colorAccent">#color/colorAccent</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="android:windowDisablePreview">true</item>
<item name="android:windowAnimationStyle">#null</item>
<item name="android:itemBackground">#ffffff</item>
<item name="actionMenuTextColor">#212121</item>
<item name="android:letterSpacing">0.03</item>
<item name="android:colorPrimaryDark">#CCCCCC</item>
</style>
I have tried every way but the colors are not changing.
As you can see, i am using #android:style/Widget.Holo.Light theme.
On Lollipop, the divide color is default blue but on Android pie or oreo it is BLack. How to change the Color.
I don't want to use any library. Is there any direct way to do this using XML or programmatically?

android:theme="#style/..." doenst take background

I got the following background for an edit text:
edit_text_rounded_white.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#66c6c6c6"/>
<stroke android:width="0.1dp"
android:color="#66c6c6c6"/>
<corners android:radius="40dp"/>
</shape>
</item>
</selector>
in my styles.xml I define the following:
<style name="editText">
<item name="android:background">#drawable/edit_text_rounded_white</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingTop">2dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:textCursorDrawable">#drawable/edit_text_cursor</item>
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/transparentWhite50</item>
</style>
When I set the style via: style="#style/editText" for my editTexts it takes the background but doesnt take the colorControl I set. When I set the style via android:theme="#style/editText" it takes the colorControls but doesnt show the background image. I already tried src and windowBackground instead of background in the style file.
Any ideas how achieve both? Showing background and the colorControls?

Split your style into two:
<style name="editTextStyle">
<item name="android:background">#drawable/edit_text_rounded_white</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingTop">2dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:textCursorDrawable">#drawable/edit_text_cursor</item>
</style>
<style name="editTextTheme">
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/transparentWhite50</item>
</style>
And then apply both to your view:
<EditText
...
android:theme="#style/editTextTheme"
style="#style/editTextStyle"/>

Android text selection handles have white background (instead of transparent)

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