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.

View truncated from the bottom setting setDecorFitsSystemWindows to false

I try to show an ImageView behing the statusbar.
It's working using window.setDecorFitsSystemWindows(false) with android R minimum :
This is my style (using NoActionBar and setting the statusbar color to transparent) :
<style name="Theme.TestProject" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<item name="android:statusBarColor" tools:targetApi="l">#80000000</item>
</style>
My layout :
<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"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/nature" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="First button"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Second button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the result :
It's good in the top but in the bottom, my view is truncated so I see only one button. Why ?

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.

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>