katit
katit

Reputation: 17915

Styled my buttons. Now what? I need to add icon

I was able to style button to my liking with pure XML (no image). Here is how it looks:

shape_button_normal_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="7dip"/>
    <gradient android:startColor="@color/blue_start" android:endColor="@color/blue_end" android:angle="270" />
    <stroke android:width="1dip" android:color="#80036990" />
    <padding android:left="5dip" android:right="5dip" android:top="7dip" android:bottom="7dip"/>
</shape>

Similar to that I described other shapes for pressed/disabled/etc

Here is my selector_button_blue:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="false" android:state_enabled="true"
          android:drawable="@drawable/shape_button_normal_blue" />
    <item android:state_window_focused="false" android:state_enabled="false"
          android:drawable="@drawable/shape_button_disabled" />
    <item android:state_pressed="true"
          android:drawable="@drawable/shape_button_selected" />
    <item android:state_focused="true" android:state_enabled="true"
          android:drawable="@drawable/shape_button_focused_blue" />
    <item android:state_enabled="true"
          android:drawable="@drawable/shape_button_normal_blue" />
    <item android:state_focused="true"
          android:drawable="@drawable/shape_button_normal_blue" />
    <item android:drawable="@drawable/shape_button_disabled" />
</selector>

And finally my style:

<style name="MyBlueButton" parent="@android:style/Widget.Button">
        <item name="android:background">@drawable/selector_button_blue</item>
        <item name="android:layout_marginLeft">1dp</item>
        <item name="android:layout_marginRight">1dp</item>
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_marginBottom">5dp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">18dp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">fill_parent</item>
    </style>

I'm using those buttons just fine with text. Happy and proud :)

Now I need to put icon on them. I see there is drawingTop/Bottom/Left/Right but it doesn't do what I need. What do I miss here? How do I make it nice and centered?

<Button style="@style/MyBlueButton" android:layout_marginTop="0dp" android:text="" android:layout_width="0dp" android:layout_weight="0.15"
                            android:drawableTop="@drawable/ic_accept"/>

enter image description here

Upvotes: 0

Views: 296

Answers (1)

mkso
mkso

Reputation: 3188

use imagebutton, something like Edited

>
<ImageButton 
    android:id="@+id/call"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:src="@drawable/ic_accept"
    android:background="@drawable/selector_button_blue"
    />

Upvotes: 2

Related Questions