1

I am trying to have a ToggleButton rectangle that contains an icon, once clicked the background should change color but the icon should remain visible.

So far I'm able to have a rectangle change color on click like such:

<ToggleButton
   android:background="@drawable/toggle_selector"
   android:id="@+id/toggle"
   android:checked="false"
   android:textOn=""
   android:textOff=""
   android:layout_width="60dp"
   android:layout_height="60dp" />

toggle_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:drawable="@drawable/toggle_state_on"
      android:state_checked="true" />
  <item
      android:drawable="@drawable/toggle_state_off"
      android:state_checked="false" />
</selector>

toggle_state_on.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- Draw a 5dp width border around shape -->
            <stroke
                android:color="#4c975d"
                android:width="5dp"
                />
        </shape>
    </item>
    <!-- Overlap the left, top and right border using background color  -->
    <item
        android:bottom="5dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#6dd988"/>
        </shape>
    </item>
</layer-list>

toggle_state_off being the same as on but with different colors.

I'm not able to find how to put an icon at the center of the button I have created, can that be achieved? And how?

Christopher
  • 139
  • 3
  • 11
  • please have look at this thread i believe it answers your question http://stackoverflow.com/questions/18598255/android-create-a-toggle-button-with-image-and-no-text – chirag90 Mar 14 '17 at 14:47

1 Answers1

1

You may need to modify the below as required however this will have a icon the center for both state on and off. Add the line toggle_state_off and toggle_state_on android:drawable="@drawable/ic_attach_money_black_24dp"

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- Draw a 5dp width border around shape -->
            <stroke
                android:color="#2c125d"
                android:width="5dp"
                />
        </shape>
    </item>
    <!-- Overlap the left, top and right border using background color  -->
    <item
        android:bottom="5dp"
        android:drawable="@drawable/ic_attach_money_black_24dp">
        <shape android:shape="rectangle">
            <solid android:color="#2c125d"/>
        </shape>
    </item>
</layer-list>

Mark it as answered if this helps

chirag90
  • 2,211
  • 1
  • 22
  • 37
  • This does add the icon, but removes the background color and only keep the borders. How may I keep the background color? EDIT: Additionally this limits me to one icon, I won't be able to reuse these toggle state files for different buttons. – Christopher Mar 14 '17 at 15:07
  • image which is transparent? maybe, that's why i said may need to modify as required – chirag90 Mar 14 '17 at 15:12
  • The image should be transparent as it comes from https://material.io/icons/ – Christopher Mar 14 '17 at 15:13
  • It doesn't matter, anyone of them, they are all in the same format – Christopher Mar 14 '17 at 15:15
  • Okay, I'll look into it, but is there a way to set the icon elsewhere? I'll have to re-create the toggle file for each icon like this – Christopher Mar 14 '17 at 15:24
  • The other way would be to do it on click listener. But i am not sure if you want to do that. I believe the above approach would be better off. – chirag90 Mar 14 '17 at 15:43
  • @Christopher did you find a better way? – chirag90 Mar 17 '17 at 08:24