Develop Reference

Theme for OutlinedBox.TextInputLayout not Working

Hey I am trying to create a dropdown box with the OutlinedBox theme but the theme is not working.
this is my xml code -
android:id="#+id/add_transaction_category_parent"
style="#style/Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginTop="4dp"
android:theme="#style/TextInputLayoutStyle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/add_transaction_date_parent">
<AutoCompleteTextView
android:id="#+id/add_transaction_category"
android:layout_width="match_parent"
android:layout_height="60dp"
android:enabled="true"
android:hint="category"
android:inputType="none"
android:textColorHint="#color/white"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
and this is the theme I have defined for the TextInputLayout
<style name="TextInputLayoutStyle" parent="Widget.Material3.TextInputLayout.OutlinedBox">
<item name="boxStrokeWidth">1dp</item>
</style>
this is the output UI
Output UI
thanks!

try this
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="10dp"
android:ems="10"
app:hintTextColor="#color/white"
android:textColorHint="#color/white"
android:theme="#style/TextInputLayoutAppearance"
app:boxStrokeColor="#fff">
<EditText
android:id="#+id/textLogin_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:textColor="#color/white"
android:textColorHint="#color/white"
/>
</com.google.android.material.textfield.TextInputLayout>
create style.xml
<style name="TextInputLayoutAppearance" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
</style>
</resources>

View truncated from the bottom setting setDecorFitsSystemWindows to false

I try to show an ImageView behing the statusbar.
It's working using window.setDecorFitsSystemWindows(false) with android R minimum :
This is my style (using NoActionBar and setting the statusbar color to transparent) :
<style name="Theme.TestProject" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<item name="android:statusBarColor" tools:targetApi="l">#80000000</item>
</style>
My layout :
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/nature" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="First button"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Second button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the result :
It's good in the top but in the bottom, my view is truncated so I see only one button. Why ?

Is there any way to use a background for the hint in the TextInputLayout?

I need the hint to have this form when the input is disabled:
That is what I have achieved so far:
I tried to add a background using HintTextAppearance in the style, but it was not applied.
<style name="HintAppearance" parent="TextAppearance.Design.Hint">
<item name="android:background">#drawable/bg_material_form</item>
<item name="android:padding">0dp</item>
</style>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:hintTextAppearance="#style/HintAppearance">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="value" />
</com.google.android.material.textfield.TextInputLayout>

How to customize the ImageButton style?

I am making a numeric keyboard.
keyboard appearance
I have a problem with the decoration of the return button.
If I use ImageButton, then I get an indent from the top, as in the picture:
button backspace
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- other buttons -->
<com.google.android.material.button.MaterialButton
android:id="#+id/btnPoint"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="0dp"
android:padding="0dp"
android:text="."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnNumber0"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnNumber1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnNumber0"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="0dp"
android:padding="0dp"
android:text="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnBackspace"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnPoint"
app:layout_constraintTop_toBottomOf="#+id/btnNumber2" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnBackspace"
style="#style/KeypadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="0dp"
android:padding="0dp"
android:scaleType="center"
android:text=""
app:iconGravity="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btnNumber0"
app:layout_constraintTop_toBottomOf="#+id/btnNumber3" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the style of the buttons
<!-- Keyboard -->
<style name="KeypadButton" parent="Widget.MaterialComponents.TextView">
<item name="android:textSize">#dimen/font_large_30</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/swatch_7</item>
<item name="backgroundTint">#color/key_number</item>
<item name="android:background">#drawable/ripple_bg</item>
<item name="android:textAlignment">center</item>
<item name="android:gravity">center</item>
<item name="elevation">0dp</item>
</style>
If I inherit the ImageButton style, then I get padding around the button, which cannot be removed.
Please tell me how to properly design the backspace button.
Link to the project

Try replace
<style name="KeypadButton" parent="Widget.MaterialComponents.TextView">
to
<style name="KeypadButton" parent="Widget.MaterialComponents.Button">

floating action button ripple doesn't work

I am having trouble achieving a ripple effect on my floating action button
i have followed exactly what it says online but i cant see the ripple effect
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/new_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:src="#drawable/add_chat"
android:tooltipText="Start a new chat"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:maxImageSize="56dp"
app:rippleColor="#color/pastel_red" />

add this to your styles.xml
<style name="SelectableItemTheme">
<item name="colorControlHighlight">#color/pastel_red</item>
</style>
<style name="SelectableItemBackground">
<item name="android:theme">#style/SelectableItemTheme</item>
<item name="android:background">?attr/selectableItemBackgroundBorderless</item> #this makes it round, if you want square, remove the word "Borderless"
</style>
And then
<com.google.android.material.floatingactionbutton.FloatingActionButton
style="#style/SelectableItemBackground"
android:id="#+id/new_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:src="#drawable/add_chat"
android:tooltipText="Start a new chat"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:maxImageSize="56dp" />