Android material button set icon and background color not working?

Question

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.

You don't need a custom background to achieve rounded corners. Check this answer: https://stackoverflow.com/a/63331089/2016562 — Gabriele Mariotti, Jul 08 '22 at 19:05
Yep, you need to add `app:backgroundTint="@null"` to override the material theme overriding you. Very frustrating, this is why `Theme.AppCompat` is better... — EpicPandaForce, Apr 07 '23 at 23:30

Dharmendra · Answer 1 · 2022-06-23T08:52:52.160

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.

I want to have a rounded button that's why I've added . The tint property by itself doesn't change the color of the button — MADi, Jun 22 '22 at 14:07

score 0 · Answer 2 · answered Jun 22 '22 at 13:23

0

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"

answered Jun 22 '22 at 13:23

Mohammad Reza Ghariblu

84
2

I want to have the icon show on the start of the text and not in the start of the button. android:drawableStart does show the icon but not in the position I want it. – MADi Jun 22 '22 at 14:10

Andrei Naumets · Answer 3 · 2022-06-22T13:43:40.583

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 really wanted to avoid nesting layouts but maybe this is the only solution. — MADi, Jun 22 '22 at 14:11

score 0 · Accepted Answer · answered Jun 23 '22 at 07:37

0

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.

answered Jun 23 '22 at 07:37

MADi

23
8

Android material button set icon and background color not working?

4 Answers4