How to remove the background of a button in Android Studio: a complete guide for developers

Removing the background of a button Android Studio is one of the most common tasks when customizing the interface. Standard elements Material Design often have a specified background (ripple effect, shadow or color), which does not always fit into the application design. The problem is complicated by the fact that in different versions Android and Android Studio solutions may differ: what worked in API 21may not work in API 34.

Many beginners try to simply set android:background="@null" - and are faced with the fact that the button loses not only background, but also clickability, click animation, or even disappears completely. In this article we will examine background removal, taking into account all the nuances: from simple XML to programmatic configuration via 5 proven methods background removal taking into account all the nuances: from simple XML to software configuration via Kotlin/Java. We will pay special attention to maintaining the functionality of the button after changes.

If you work with Material Components (library com.google.android.material:material), the solutions will differ from the standard Button or AppCompatButton. We will look at both options, and also show how to avoid common mistakes, for example, the disappearance ripple effect or failure of the onClickListener.

1. Removing the background via XML: basic method

The easiest way to remove the background is to set an empty value for the attribute background directly in the markup activity_main.xml or other layout file. This method works for standard buttons (Button, AppCompatButton), but may not work for MaterialButton without additional manipulation.

Open your XML markup file and find the button tag. Add or change the line:

<Button
android:id="@+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Press me"
    android:background="@null" />

⚠️ Attention: After using this method, the button may lose visual feedback when pressed (ripple effect). To return it, you will have to manually add foreground or use ?attr/selectableItemBackground:

android:foreground="?attr/selectableItemBackground"

If you are working with MaterialButton, simple @null will not be enough - you will need to disable the material style:

<com.google.android.material.button.MaterialButton
...
    style="@style/Widget.MaterialComponents.Button.TextButton" />

2. Using styles (styles.xml) for global changes

If you need to remove the background from all buttons in the application, it is advisable to create a separate style in the file res/values/styles.xml. This will eliminate the need to write android:background="@null" for each button manually.

Add to styles.xml a new style:

<style name="TransparentButton" parent="Widget.AppCompat.Button">
<item name="android:background">@null</item>
<item name="android:textColor">?attr/colorPrimary</item>
</style>

Now apply it to buttons through the attribute style:

<Button
android:id="@+id/myButton"
    style="@style/TransparentButton"
android:text="Transparent button" />

For MaterialButton use the parent style Widget.MaterialComponents.Button.TextButton:

<style name="TransparentMaterialButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="backgroundTint">@null</item>
</style>

⚠️ Attention: In some versions Material Components (especially before 1.4.0) styles may conflict with attributes app:backgroundTint. If the button is not displayed, try explicitly setting app:backgroundTint="@null" in XML.

3. Programmatic background removal via Kotlin/Java

Sometimes the background needs to be removed dynamically - for example, when the application theme is changed or after data is loaded. In such cases, a software solution for Kotlin or Java.

For a standard button in Kotlin:

val myButton: Button = findViewById(R.id.myButton)
myButton.background = null

For MaterialButton will require additional configuration:

val materialButton: MaterialButton = findViewById(R.id.materialButton)
materialButton.backgroundTintList = null
materialButton.setBackgroundColor(Color.TRANSPARENT)

In Java the code will look like this:

Button myButton = findViewById(R.id.myButton);
myButton.setBackground(null);

MaterialButton materialButton = findViewById(R.id.materialButton);
materialButton.setBackgroundTintList(null);
materialButton.setBackgroundColor(Color.TRANSPARENT);

⚠️ Attention: When you programmatically remove the background in MaterialButton the click animation may disappear. To return it, use:

materialButton.setRippleColor(ColorStateList.valueOf(Color.GRAY))

4. Working with MaterialButton: features and pitfalls

MaterialButton from the library com.google.android.material:material behaves differently than standard buttons. Here the background is controlled not only through background, but also through the attributes backgroundTint, strokeColor, and rippleColor.

To completely remove the background, you will need:

1. Disable backgroundTint (main background color).
2. Set a transparent color via backgroundColor.
3. If necessary, disable the stroke (stroke).

XML example for a fully transparent MaterialButton:

<com.google.android.material.button.MaterialButton
android:id="@+id/transparentMaterialButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Transparent MaterialButton"
    app:backgroundTint="@null"
app:backgroundTintMode="multiply"
android:background="@android:color/transparent"
app:strokeColor="@android:color/transparent" />

Critical nuance: If you use MaterialButton with an icon (app:icon), a transparent background can make the icon invisible. In this case, you will have to explicitly set the color of the icon via app:iconTint.

Make sure that the button text is visible (specify android:textColor)

Check the clickability (click on the button)

Make sure that the ripple effect works (or add it manually)

If there is an icon, check its visibility (app:iconTint)

-->

5. Customization through themes and attributes

If your project uses Material Components Theme, you can globally customize the appearance of all buttons through theme files (themes.xml). This is especially convenient for supporting dark/light themes..

Add customization to themes.xml customization for MaterialButton:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
<item name="materialButtonStyle">@style/Widget.MyApp.Button</item>
</style>

<style name="Widget.MyApp.Button" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">@null</item>
<item name="android:textColor">?attr/colorOnPrimary</item>
</style>

Now everything MaterialButton in the application will be transparent. default. To return the background for individual buttons, override the style locally:

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

⚠️ Attention: When using themes, pay attention to the colorOnPrimary attribute - it is responsible for the color of the text on the buttons. If the background is transparent and the text remains white (as in a dark theme), the button may become unreadable via android:textColor.

6. Alternative approaches: custom View and vectors

If standard methods do not give the desired result, consider alternative solutions:

• 🎨 Use TextView with a click: Replace the button with TextView c attribute android:clickable="true" and handler setOnClickListener. This will give complete control over the appearance.
• 🖼️ Vector background images: If you need a translucent background, create a vector one drawable with the desired transparency and assign it via android:background="@drawable/custom_bg".
• 🔧 Custom View: Create your own button implementation, inheriting from AppCompatButton or MaterialButton, and override the method onDraw.

Example of a custom button based on TextView:

<TextView
android:id="@+id/customButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom button"
android:background="?attr/selectableItemBackground"
android:padding="16dp"
android:clickable="true"
android:focusable="true" />

In Kotlin add a handler:

findViewById(R.id.customButton).setOnClickListener {
// Your code when clicked
}

FAQ: Frequently asked questions about removing the background of buttons

<Button
...
android:background="@null"
      app:backgroundTint="@null"
android:foreground="?attr/selectableItemBackground" />

<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="@android:color/transparent"
app:rippleColor="?attr/colorPrimary">
<Button android:background="@null" />
</com.google.android.material.card.MaterialCardView>

<Button
...
android:background="@null"
      tools:background="@android:color/holo_red_light" />

<com.google.android.material.button.MaterialButton
...
android:background="@android:color/transparent"
app:backgroundTint="@null"
      app:elevation="4dp" />

<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="4dp"
app:cardBackgroundColor="@android:color/transparent">
<Button android:background="@null" />
</androidx.cardview.widget.CardView>

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
<item name="android:enforceMaterialTheme">false</item>
</style>

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
button.setHasOverlappingRendering(false)
}