Android material button set icon and background color not working?-CodePudding

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.

CodePudding user response：

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"

CodePudding user response：

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

CodePudding user response：

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="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>