CODEWITHSUNDEEP
androidandroid-appcompat
greywolf82
greywolf82

Reputation: 22193

ImageButton background color with appcompat

I've got problems to have a good background from an AppCompatImageButton, just to try I'm comparing this two layouts:

    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/imageButtonI"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:contentDescription="@string/icolor"
        android:tint="@color/accent"
        app:srcCompat="@drawable/magnify"/>

    <ImageButton
        android:id="@+id/imageButtonS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:contentDescription="@string/scolor"
        android:tint="@color/accent"
        android:src="@drawable/magnify"/>

and the style file:

<style name="AppBaseTheme" parent="android:Theme.Material">
    <item name="android:colorPrimary">@color/primary</item>
    <item name="android:colorPrimaryDark">@color/primaryDark</item>
    <item name="android:colorAccent">@color/accent</item>
</style>

As you can see from this image however, the background of ImageButton is "normal" while there isn't any background in the appcompat one. How can I have the "normal" background using AppCompatImageButton?

Current layout rendering

Upvotes: 2

Views: 6182

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365178

A good way to style the Button is to use the style @style/Widget.AppCompat.Button.Colored.

The Widget.AppCompat.Button.Colored style extends the Widget.AppCompat.Button style and applies automatically the accent color you selected in your app theme.

<Button
    style="@style/Widget.AppCompat.Button.Colored"
 />

To customize the background color without changing the accent color in your main theme you can create a custom theme for your Button using the android:theme attribute and extending the ThemeOverlay theme.

 <Button  
     style="@style/Widget.AppCompat.Button.Colored"  
     android:theme="@style/MyButtonTheme"/>

defining the following theme:

 <!-- res/values/themes.xml -->
  <style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light"> 
      <item name="colorAccent">@color/my_color</item> 
 </style>

Upvotes: 2

Silvans Solanki
Silvans Solanki

Reputation: 1267

I am not sure which version of support library are you using, but before there was bug in the library which is reported here,

https://code.google.com/p/android/issues/detail?id=78428

But they have resolved it in the latest update,

Yes, it appears to work now with the introduction of android.support.v7.widget.AppCompatButton in AppCompat v22.1.0, color can be controlled at overall theme level with "colorButtonNormal".

http://android-developers.blogspot.com/2015/04/android-support-library-221.html http://chris.banes.me/2015/04/22/support-libraries-v22-1-0/

for theme

<item name="colorButtonNormal">@color/button_color</item>

for version 21

<item name="android:colorButtonNormal">@color/button_color</item>

Hope this will help you.

Thanks

Upvotes: 1

Related Questions