Develop Reference

How to remove padding for the bottom line of the TextInputEditText

I'm trying to remove all padding of a TextInputLayout and a TextInputEditText, but with padding=0dp the line at the bottom of the TextInputEditText keeps it padding left and right. How I can remove this padding?
This is the xml code that I've used.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/ti_input_otp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/zp_otpfragment_input_otp"
android:padding="0dp"
android:theme="#style/TextInputLayout"
app:hintTextAppearance="#style/FloatingLabel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_input_otp_description">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_input_otp"
android:layout_width="match_parent"
android:layout_height="#dimen/text_input_layout_height"
android:layout_marginTop="16dp"
android:ems="10"
android:gravity="start|center_vertical"
android:imeOptions="actionNext"
android:importantForAutofill="no"
android:inputType="numberSigned"
android:labelFor="#string/zp_otpfragment_input_otp"
android:lines="1"
android:padding="0dp"
android:singleLine="true"
android:textSize="#dimen/text_info_size"
android:theme="#style/InputText" />
</com.google.android.material.textfield.TextInputLayout>
The styles are:
<style name="FloatingLabel" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorPrimary</item>
</style>
<style name="TextInputLayout" parent="AppTheme">
<item name="boxStrokeColor">#color/colorPrimary</item> <!-- Line Color -->
<item name="android:textColorHint">#color/colorGray</item> <!-- Hint Color -->
<item name="boxStrokeWidth">1dp</item>
<item name="boxBackgroundColor">#color/colorCeruleanBlue</item>
</style>
<style name="InputText" parent="AppTheme">
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:backgroundTint">#color/colorCeruleanBlue</item>
<item name="colorControlNormal">#color/colorCeruleanBlue</item> <!-- cursor y línea normal-->
<item name="colorControlActivated">#color/colorAccent</item> <!-- cursor y línea con foco-->
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
Thank you

You can use your own custom style for TextInputLayout as below:
Your layout:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Your hint text"
style="#style/My.TextInputLayout.Theme" >
Then define your custom theme as below:
<style name="My.TextInputLayout.Theme" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemePadding</item>
</style>
<style name="MyThemePadding">
<item name="editTextStyle">#style/MyTextInputEditText_padding</item>
</style>
<style name="MyTextInputEditText_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- Set left and right padding here -->
<item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<!-- Set top and bottom padding here -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>

How to apply letter spacing in custom button?

I have one button and letterspacing is not working with it. Please check my following snippet code
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:letterSpacing">0.1</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>

You can't apply letter spacing in button/custom button because their is some limitation in button component in which you can't make text appearance and background customization and more limitation
the solution for this is instead of button you can use text view and make custom text view it will also work similar to button and customize it according to requirement.
for example :-
https://stackoverflow.com/questions/9477336/how-to-make-a-custom-textview#:~:text=Create%20a%20Custom%20View%20for%20Textview.%20Make%20the,values%20Make%20entries%20of%20all%20fonts%20in%20strings.xml

Add android:letterSpacing in PrimaryButton_v2 it will work perfectly.
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
<item name="android:letterSpacing">0.1</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>

EditText gravity affects hint text but not input text

I am trying to make the input text inside an editText come out at the bottom of it. When I use , <item name="android:gravity">bottom</item> the hint changes its position but the input text does not.
This is my xml code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/registrationUsernameEditTextLayout"
style="#style/grayEditTextLayoutHelperText"
android:layout_width="0dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:hint="#string/username"
app:helperTextTextColor="#color/green"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.35">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/registrationUsernameEditText"
style="#style/grayEditText"
android:layout_width="match_parent"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
<style name="grayEditTextLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:layout_height">55sp</item>
<item name="hintTextColor">#color/gray</item>
<item name="android:textColorHint">#color/gray</item>
<item name="boxStrokeColor">#color/text_edit_layout_outline_color</item>
<item name="strokeWidth">2sp</item>
<item name="backgroundTint">#null</item>
<item name="boxCornerRadiusBottomEnd">7sp</item>
<item name="boxCornerRadiusBottomStart">7sp</item>
<item name="boxCornerRadiusTopEnd">7sp</item>
<item name="boxCornerRadiusTopStart">7sp</item>
</style>
<style name="grayEditText">
<item name="android:textColor">#color/gray_white</item>
<item name="android:textSize">14sp</item>
<item name="android:textCursorDrawable">#null</item>
<item name="android:layout_height">50sp</item>
<item name="android:gravity">bottom</item>
</style>
<style name="grayEditTextLayoutHelperText" parent="grayEditTextLayout">
<item name="android:layout_height">70sp</item>
</style>

TextInputLayout move the hint label and change it's background color when focused

I am trying to customize materials TextInpuLayout.OutlinedBox and TextInputEditText.
My current state is like following image
What I want to do is remove the background of the hint label so that it doesn't create that ugly cutout. Like this:
Or if that isn't possible moving the label above the input would also do the trick:
It would be nice if this was achievable using styles so that I could easily apply this to other text input elements as well.
I'm pretty new to android so please be considerate.
Here's the code for the styling:
<style name="MyTheme" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textSize">14sp</item>
<item name="boxCornerRadiusTopStart">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusTopEnd">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusBottomStart">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusBottomEnd">#dimen/textInputCornerRadius</item>
<item name="boxBackgroundColor">#color/primaryDarkColorBackground</item>
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="android:background">#null</item>
<item name="android:paddingStart">30dp</item>
</style>
And here is how I define my input in the layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/username_layout"
style="#style/MyTheme"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginEnd="48dp"
android:hint="#string/email_or_username"
app:boxBackgroundMode="outline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.10">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/username"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

I don't think you can obtain it with the TextInputLayout.OutlinedBox style.
It is not exactly what you are looking for:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded"
..>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="30dp"
/>
</com.google.android.material.textfield.TextInputLayout>
With:
<style name="Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="shapeAppearanceOverlay">#style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout</item>
<item name="boxStrokeColor">#color/input_text_no_underline</item>
</style>
<style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
The selector is used to remove the underline:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>
Note: it requires the version 1.1.0 of the library.

Try setting on the TextInputEditText:
android:background="#android:color/transparent"

android:style not applying in xml layout

I need to apply a custom style to a Spinner.
These are my styles in styles.xml:
<style name="spinnerItemStyle">
<item name="android:textColor">#color/font</item>
<item name="android:textSize">#dimen/small_text</item>
</style>
<style name="spinnerDropDownItemStyle">
<item name="android:padding">10dp</item>
<item name="android:textColor">#color/font</item>
<item name="android:textSize">#dimen/small_text</item>
<item name="android:background">#color/unpressed2</item>
</style>
And I'm doing this in the layout:
android:spinnerItemStyle="#style/spinnerItemStyle"
android:spinnerDropDownItemStyle="#style/spinnerDropDownItemStyle"
<Spinner
android:id="#+id/songSpinner"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:textSize="#dimen/small_text"
android:entries="#array/songs_array"
android:spinnerItemStyle="#style/spinnerItemStyle"
android:spinnerDropDownItemStyle="#style/spinnerDropDownItemStyle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.18"
app:layout_constraintTop_toBottomOf="#+id/musicSeekBar"
app:layout_constraintWidth_percent="0.5" />
The problem is that Spinner is ignoring the styles applied.
And also I disscovered that it works perfectly if I do this in my custom app theme inside styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="colorButtonNormal">#color/unpressed2</item>
<item name="android:buttonStyle">#style/ButtonColor</item>
<item name="android:textColor">#color/font</item>
<!-- spinner styles -->
<item name="android:spinnerItemStyle">
#style/spinnerItemStyle
</item>
<item name="android:spinnerDropDownItemStyle">
#style/spinnerDropDownItemStyle
</item>
</style>
Why works with my second approach and not with the first?

styles.xml File
Add below xml code in your styles.xml File.
<style name="CustomSpinner" parent="AppTheme">
<item name="android:spinnerItemStyle">#style/spinnerItemStyle</item>
<item name="android:spinnerDropDownItemStyle">#style/spinnerDropDownItemStyle</item>
</style>
yourlayout.xml
In Spinner use this styles
For E.g:-
<Spinner
android:id="#+id/songSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/CustomSpinner">
</Spinner>