Develop Reference

Android material button set icon and background color not working?

I'm trying to create a facebook login button,
something like this.
I have trouble setting the icon of the material button and also changing the button's background color at the same time.
I am using a custom style in order to change the button's background color. I have also tried directly adding the backgroundTint property to my button but it is getting overriden by the theme's primaryColor.
But then the when I set the icon property of the button the icon won't show.
This is my button
<com.google.android.material.button.MaterialButton
android:id="#+id/fb_login_button"
style="#style/orangeButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/side_margin"
android:layout_marginTop="60dp"
android:layout_marginEnd="#dimen/side_margin"
android:layout_marginBottom="20dp"
android:text="#string/continue_with_facebook"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/login_link"
app:icon="#drawable/fb_icon"
app:iconTint="#color/white"
app:iconGravity="textStart"/>
And this is the style I'm using
<style name="orangeButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="android:fontFamily">#font/semi_bold</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#drawable/orange_button_bg</item>
<item name="android:backgroundTint">#color/orange</item>
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_height">56dp</item>
<item name="android:layout_width">match_parent</item>
</style>
I've also tried changing my style's parent to Widget.AppCompat.Button. This will make the icon show but then the button's color doesn't change.

Better to use any one from this. If you mention both, then it will give priority to backgroundTint.
<item name="android:background">#drawable/orange_button_bg</item>
<item name="android:backgroundTint">#color/orange</item>
To provide background color to "com.google.android.material.button.MaterialButton", you should use "app:backgroundTint".
<item name="backgroundTint">#color/orange</item>
Updated code :
<com.google.android.material.button.MaterialButton
android:id="#+id/fb_login_button"
style="#style/orangeButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="continue_with_facebook"
app:icon="#drawable/fb_icon"
app:iconTint="#color/white"
app:iconGravity="textStart"/>
<style name="orangeButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:textColor">#color/white</item>
<item name="android:background">#drawable/orange_button_bg</item>
<item name="backgroundTint">#null</item>
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_height">56dp</item>
<item name="android:layout_width">match_parent</item>
</style>
Updated : app:backgroundTint="#null" --> make this null to apply your drawable background to get applicable on MaterialButton.

Hiiii
use one of these attributes
android:drawableRight="#drawable/fb_icon"
android:drawableLeft="#drawable/fb_icon"
android:drawableEnd="#drawable/fb_icon"
android:drawableStart="#drawable/fb_icon"
instead of
app:icon="#drawable/fb_icon"

I'd do it like that
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/purple_200">
<LinearLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="match_parent"
android:layout_margin="30dp"
android:orientation="vertical"
android:layout_height="wrap_content">
<com.google.android.material.card.MaterialCardView
android:id="#+id/btn_firs"
android:clickable="true"
app:cardCornerRadius="40dp"
app:cardBackgroundColor="#color/darkGreen"
android:layout_width="match_parent"
android:layout_height="60dp">
<LinearLayout
android:layout_margin="10dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_launcher_foreground"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:gravity="center"
android:textAppearance="?attr/textAppearanceHeadline6"
android:text="Continue with Facebook"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:layout_marginTop="7dp"
android:id="#+id/btn_second"
android:clickable="true"
app:cardCornerRadius="40dp"
android:layout_width="match_parent"
android:layout_height="60dp">
<LinearLayout
android:layout_margin="10dp"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:textAppearance="?attr/textAppearanceHeadline6"
android:text="Register"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
result

I ended up adding to my button the attribute
android:drawableLeft="#drawable/fb_icon"
and then also adding some start padding to the style so I could position the icon where I wanted to.

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>

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 change the text color for the InputTextLayout in android

Edit:
The bar I wanted to get rid of was the bar at the top which says testing. The text color I want to change is "testing#gmail.com" text which the user inputs:
Here is my XML for the login activity (I used the default login activity provided by android studio):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.uname.myapp.LoginActivity">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="6"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/action_sign_in"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
</LinearLayout>
I wanted to remove the bar at the top, so the solution shown online was to inherit from Theme.AppComtact.NoActionBar. Here is my style:
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimary</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:textColorHint">#android:color/darker_gray</item>
<item name="android:textColor">#android:color/black</item>
</style>
Getting frustrated that I can't find documentation on the TextInputLayout and how to simply just change the font color when typing in the textfield. Tried searching on SO and other sites and couldn't find a solution.
I even tried <item name="android:colorControlNormal">#android:color/black</item> but it requires API level 21 and 15 is min right now.
Coming from a Python / Django background and first time trying to learn android development.
Can anyone point me in the right direction? Is there documentation that shows all the possible styling developers can apply on text?
My androidmanifest file has this in the application:
android:theme="#style/MyTheme"

if you want to remove action bar or titlebar use this style and make necessary true/false depending what you want and not.
<style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="#style/Theme.AppCompat.Light">
<item name="android:windowNoTitle">false</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
and in your manifest file
<activity
android:name=".activities.FullViewActivity"
android:theme="#style/Theme.AppCompat.Light.NoActionBar.FullScreen"
/>
and for changing font colour
<EditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Your Name"
android:textColor="#FF0000"
</EditText>

If you are looking for only setting TextInputLayout hint color then you should try this
app:hintTextAppearance="#style/text_appearance_color"
<android.support.design.widget.TextInputLayout
android:padding="8dp"
android:id="#+id/tilSample"
app:errorTextAppearance="#style/error_appearance"
app:hintTextAppearance="#style/text_appearance_color"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/etSample"
android:layout_margin="8dp"
android:padding="8dp"
android:hint="android"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
and for NoActionBar, your code seems to be fine just apply the theme in the manifest at the application level.
Edit:
style
<style name="editTextStyle" parent="#android:style/Widget.EditText">
<item name="android:background">#drawable/someBackground</item>
<item name="android:textColor">#808080</item>
<item name="android:layout_height">45dip</item>
<!--other attibutes goes here-->
</style>

android -Edit Text background get red on TextInputLayout error

It's very strange problem, this is my code:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_pass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
android:layoutDirection="rtl"
android:src="#drawable/ic_https_grey600_18dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/password"
style="#style/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_https_grey600_18dp"
android:drawableStart="#drawable/ic_https_grey600_18dp"
android:hint="رمز عبور"
android:gravity="right|center_vertical"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:transformPivotX="10dp"
app:passwordToggleEnabled="true" />
</android.support.design.widget.TextInputLayout>
I am using TextInputLayout for my login process, this is my java code :
pass_l.setErrorEnabled(true);
pass_l.setError(getString(R.string.wrong_pass));
When it show the error, the background of edit text gets red and it doesn't show the error below it , some thing like this :
how can I fix this problem? I don't want the edittext change the background color , just show the error below the editext as usual

Problem is with your style="#style/edittexts".Please shhare source code of it.It must be set Red in this style.

<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_pass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
android:layoutDirection="rtl"
android:theme="#style/TextLabel"
android:src="#drawable/ic_https_grey600_18dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/password"
style="#style/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_https_grey600_18dp"
android:drawableStart="#drawable/ic_https_grey600_18dp"
android:hint="رمز عبور"
android:gravity="right|center_vertical"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:transformPivotX="10dp"
app:passwordToggleEnabled="true" />
</android.support.design.widget.TextInputLayout>
<style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/Color Name</item>
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/Color Name</item>
<item name="colorControlNormal">#color/Color Name</item>
<item name="colorControlActivated">#color/Color Name</item>
</style>
You can try like this.

you can use this in your textInputLayoutTag :
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorAppearance"
example :
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_pass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
android:layoutDirection="rtl"
android:src="#drawable/ic_https_grey600_18dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorAppearance">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/password"
style="#style/FormStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_https_grey600_18dp"
android:drawableStart="#drawable/ic_https_grey600_18dp"
android:hint="رمز عبور"
android:gravity="right|center_vertical"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:transformPivotX="10dp"
app:passwordToggleEnabled="true" />
</android.support.design.widget.TextInputLayout>
add ErrorAppearance and FormStyle in the styles.xml
<style name="ErrorAppearance" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/textError</item>
<item name="android:textSize">#dimen/font_small</item>
</style>
<style name="FormStyle">
<item name="android:maxLines">1</item>
<item name="android:drawablePadding">#dimen/spacing_small</item>
<item name="android:textColor">#color/textHint</item>
</style>
after the validation in the activity , you can :
pass_l.setError(getString(R.string.wrong_pass));