xml - Drawable behaves differently in different activity layouts in Android Studio

Question

I have the following drawable: custom_yellow_button.xml in the drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="@color/yellow"/>
        </shape>
    </item>
</selector>

and I have these two different layouts which both identically use the 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="#FFFFFF"
    tools:context=".LogInActivity">

    <Button
        android:id="@+id/login_button"
        android:layout_width="275dp"
        android:layout_height="35dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/custom_yellow_button"
        android:fontFamily="@font/courierprime_regular"
        android:includeFontPadding="false"
        android:text="Log In"
        android:textColor="#000000"
        android:textSize="21sp"
        app:backgroundTintMode="add" />

</androidx.constraintlayout.widget.ConstraintLayout>

and

<?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"
    tools:context=".RegistrazioneActivity">

    <Button
        android:id="@+id/login_button"
        android:layout_width="275dp"
        android:layout_height="35dp"
        android:background="@drawable/custom_yellow_button"
        android:fontFamily="@font/courierprime_regular"
        android:includeFontPadding="false"
        android:text="Log In"
        android:textColor="#000000"
        android:textSize="21sp" />

</androidx.constraintlayout.widget.ConstraintLayout>

In the first layout, it looks like this, which is how I want it :

while in the second layout, it looks like this:

.

Can anyone tell me why? I can provide more info if needed.

question from:https://stackoverflow.com/questions/65935270/drawable-behaves-differently-in-different-activity-layouts-in-android-studio

Answer 1

I am not sure what theme are you using, but with MaterialThemes you can do this and it's easy. First check this: https://material.io/components/buttons

Then, change your app theme to extend one of the material themes, like this:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">

Then add implementations:

implementation 'com.google.android.material:material:1.2.1'

After that you can simply use this as your button inside your XML:

<com.google.android.material.button.MaterialButton/>

Inside this View you have a lot of attributes for your button. Simply check above link and see. For yours I would go with something like this:

 <com.google.android.material.button.MaterialButton
     android:layout_width="match_parent"
     android:layout_height="60dp"
     android:textAlignment="center"
     android:textAllCaps="true"
     android:padding="15dp"
     android:backgroundTint="@color/yellow" //add background color
     app:rippleColor="@color/colorPrimary"  //ripple color - when button is pressed
     style="@style/Widget.MaterialComponents.Button.TextButton" //material component style, many options to choose from
     android:textColor="@color/colorPrimaryDark"
     app:cornerRadius="15dp" //corner radius, so you can adjust how much oval you want your corners to be/>

And you get something like this: