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.

How to apply custom button to the activity in Android Studio?

My MainActivity has 4 buttons, serving as navigation. UI is as below
And, I also created button.xml under the drawable folder.
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#457B9D"/>
<corners android:radius="20dp"/>
<stroke android:color="#fff" android:width="2dp"/>
</shape>
In the activity_main.xml, I wanted to apply the custom button to the view using android:background="#drawable/button"
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#A8DADC"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button1"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_current_job"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_job_offer"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button3"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/adjust_comparison_settings"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button4"
android:layout_width="350dp"
android:layout_height="80dp"
android:background="#drawable/button"
android:text="#string/compare_job_offers"
android:textAllCaps="false"
android:textSize="20sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Also, I changed themes.xml a little bit to NoActionBar
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.JobCompare6300" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
But I am still having the default button. Did I miss anything or did I do something wrong?

As you use MaterialComponents theme, your Button is a MaterialButton which manages its own background drawable and therefore it is not recommanded to use android:background.
To achieve the style you want, you can use these custom attributes: app:backgroundTint, app:cornerRadius, app:strokeWidth and app:strokeColor
<Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
app:backgroundTint="#457B9D"
app:cornerRadius="20dp"
app:strokeColor="#fff"
android:text="qzeazeazeza"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Or if you need a specific drawable, you can always use android.widget.Button or use AppCompat as theme instead of MaterialComponents
<android.widget.Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_job_offer"
android:textAllCaps="false"
android:textSize="20sp" />

You don't need to use a custom background.
Just use the attributes provided by the MaterialButton:
<Button
app:backgroundTint="#457B9D"
app:cornerRadius="20dp"
app:strokeColor="#FFFFFF"
app:strokeWidth="2dp"
../>
Since you are using a Material Components theme your Button is replace at runtime with a MaterialButton.

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

Cannot set EditText's style

I created my own style for EditText, but it doesn't work
Style:
<style name="InputTextBox" parent="#android:style/Widget.EditText">
<item name="background">#drawable/text_area_box</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:gravity">top</item>
</style>
EditText in XML:
<EditText
app:theme="#style/InputTextBox"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/spinner_to"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/spinner_from"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/spinner_to"
app:layout_constraintHorizontal_bias="0.0"
android:hint="#string/translate_text_input_hint"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintVertical_bias="0.0"
android:id="#+id/et_input_text" />
I tried to change parent in styles to Widget.AppCompat.EditText, Base.Widget.AppCompat.EditText and others but still have no result

For setting style on EditText you need to set android:theme.
<EditText
android:theme="#style/InputTextBox"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/spinner_to"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/spinner_from"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/spinner_to"
app:layout_constraintHorizontal_bias="0.0"
android:hint="#string/translate_text_input_hint"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintVertical_bias="0.0"
android:id="#+id/et_input_text" />

Button layout with 4 separate "borders": Can't get text in center

I have created a button layout with 4 separate "border" views (left, right, top, bottom) and alpha-numeric text intended to be in the center. I using the 4 separate border views so I can selectively hide (or not) each side. When used in a grid layout, I intend to enable the borders on a per button basis to create gridlines between the buttons (think tic-tac-toe lines).
But I cannot seem to center the alpha-numeric text vertically inside the button. Any help would be appreciated.
Here is the relevant xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/dialPadButton"
android:id="#+id/pad_btn_2"
android:orientation="horizontal"
android:background="#android:color/darker_gray">
<!-- Left Border -->
<View style="#style/dialPadButtonVerticalBorderStyle"
android:id="#+id/left_border"
android:visibility="visible"
android:layout_alignParentLeft="true"
></View>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Top Border -->
<View style="#style/dialPadButtonHorizontalBorderStyle"
android:id="#+id/top_border"
android:visibility="visible"
android:layout_alignParentTop="true"
></View>
<!-- Alpha-numeric text -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView style="#style/dialPadButtonNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textSize="#dimen/dial_number_text_size"
android:text="2"
android:layout_gravity="center" />
<TextView style="#style/dialPadButtonText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/dial_letter_text_size"
android:text="abc"
android:layout_gravity="center" />
</LinearLayout>
<!-- Bottom Border -->
<View style="#style/dialPadButtonHorizontalBorderStyle"
android:id="#+id/bottom_border"
android:visibility="visible"
android:layout_alignParentBottom="true"
></View>
</RelativeLayout>
<!-- Right Border -->
<View style="#style/dialPadButtonVerticalBorderStyle"
android:id="#+id/right_border"
android:visibility="visible"
android:layout_alignParentRight="true"
></View>
</RelativeLayout>
For additional reference, here are the style definitions:
<resources>
<style name="dialPadButton">
<item name="android:layout_width">100dp</item>
<item name="android:layout_height">100dp</item>
<item name="android:fontFamily">sans-serif</item>
</style>
<style name="dialPadButtonNumber">
<item name="android:textColor">#00FF00</item>
<item name="android:maxLines">1</item>
</style>
<style name="dialPadButtonText">
<item name="android:textColor">#00FF00</item>
<item name="android:layout_marginTop">-10dp</item>
<item name="android:maxLines">1</item>
</style>
<style name="dialPadButtonHorizontalBorderStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">2dp</item>
<item name="android:background">#EEEEEE</item>
</style>
<style name="dialPadButtonVerticalBorderStyle">
<item name="android:layout_height">match_parent</item>
<item name="android:layout_width">2dp</item>
<item name="android:background">#EEEEEE</item>
</style>
</resources>

you can do these
android:gravity="center"
or
android:layout_height="wrap_content"
on your LinearLayout

simply add
android:gravity="center"
to the linearlayout that holds the two textviews, the linear layout is defined match parent so you need the children to be gravity:center
like this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical">
<TextView style="#style/dialPadButtonNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textSize="25sp"
android:text="2"
android:layout_gravity="center" />
<TextView style="#style/dialPadButtonText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="abc"
android:layout_gravity="center" />
</LinearLayout>