MaterialComponents.TextInputLayout.OutlinedBox it doesn't work properly boxBackgroundColor
I use material. I'm going to use a color for TextInputLayout for the backdrop, but something like the one below! hint background not change.i used style and wanted to make changes but it didn't work. In the layout itself I tried to apply the changes again! How to fix this problem?
NOTE
background of label username in picture that not transparent and it covers some of the TextInputEditText
in build.gradle
implementation 'com.google.android.material:material:1.1.0'
in style
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>
<item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light"/>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="colorControlActivated">@color/white</item>
<item name="android:colorControlActivated">@color/white</item>
</style>
<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
<item name="android:textColorTertiary">@color/white</item>
<item name="android:textColorTertiaryInverse">@color/white</item>
<item name="colorControlActivated">@color/white</item>
<item name="android:colorControlActivated">@color/white</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
<item name="colorControlActivated">@color/white</item>
<item name="android:colorControlActivated">@color/white</item>
</style>
in layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:background="@color/gray"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/linUsername"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:hint="@string/label_username"
android:textColorHint="#AEB0C6"
app:boxBackgroundColor="#33385E"
app:boxStrokeColor="@color/red"
app:endIconDrawable="@drawable/ic_clear_white_24dp"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6"
app:hintTextColor="#AEB0C6"
app:startIconDrawable="@drawable/ic_info_outline_white_24dp"
app:startIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="@color/white"
android:textColorHint="@color/white"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="@+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:fontFamily="@font/iran_sans_mobile"
android:text="login"
android:visibility="visible"
app:cornerRadius="@dimen/radiusButton" />
</LinearLayout>
You may use custom edit text with border, so you can easily set your desired background. For example try this code: activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:background="@drawable/boarder"
android:paddingLeft="5dp"
android:text="input"
app:endIconMode="password_toggle"
app:endIconTint="#EF0707" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="7dp"
android:background="#fff"
android:text="Label" />
</RelativeLayout>
<com.google.android.material.button.MaterialButton
android:id="@+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#03A6F0" />
<corners android:radius="12dp" />
</shape>
Also see here: Custom edit text with borders
If you don't like to use custom edit text, you can modify your code this way:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/linUsername"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
android:textColorHint="#ED0A0A"
app:boxBackgroundColor="#1A33385E"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edtUsername"
android:background="@drawable/boarder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="#fff"
android:text="User"
android:textColorHint="#fff"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="@+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
And in boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#8033385E"/>
<corners android:radius="12dp" />
</shape>
Output will be: