Drogheda
Drogheda

Reputation: 209

Buttons background turns to blue color (not same as original)

my problem seems to be easy but I have no idea how to solve it. I have a few buttons and all of them have a background image. The problem is, all images turns into blue color

It looks like this:

Original photo:

enter image description here

Here's a part of my xml code:

<Button
  android:id="@+id/memory_button1"
  android:layout_weight="1"
  android:maxWidth="30dp"
  android:maxHeight="30dp"
  android:onClick="@{()->viewModel.showTile(1)}"
  android:background="@{viewModel.button001}">
</Button>

Icons url: https://www.flaticon.com/packs/restaurant-225

Upvotes: 0

Views: 469

Answers (2)

Izhan Ali
Izhan Ali

Reputation: 577

Better approach to use ImageView as button with ripple click effect would be

  <ImageView
       android:id="@+id/memory_button1"
       android:layout_weight="1"
       android:maxWidth="30dp"
       android:maxHeight="30dp"
       android:background="?selectableItemBackground"
       android:clickable="true"
       android:focusable="true"
       android:onClick="@{()->viewModel.showTile(1)}"
       android:src="@{viewModel.button001}"/>

Also you can even wrap it in a CardView

Upvotes: 2

Jayanth
Jayanth

Reputation: 6307

If you want to have the only image in your button. you can replace it with ImageView so that you can have full control of how the image is being drawn.

<ImageView
       android:id="@+id/memory_button1"
       android:layout_weight="1"
       android:maxWidth="30dp"
       android:maxHeight="30dp"
       android:onClick="@{()->viewModel.showTile(1)}"
       android:src="@{viewModel.button001}">
</ImageView>

You will option for scale type for ImageView's so that you can render image without stretching it.

Upvotes: 1

Related Questions