Issue
I'm trying to make a custom toggle button, where the icon is considerably larger than the original built-in one. I'd like to achieve something like this:
*-------------------*
* *------------* *
* * * *
* * Icon * *
* * * *
* *------------* *
* *------------* *
* * Text * *
* *------------* *
*-------------------*
So this is my button:
<ToggleButton
android:id="@+id/tb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="18dp"
android:background="@drawable/custom_toggle_layer"
android:gravity="bottom | center_horizontal"
android:textAppearance="@style/CustomTBText"
android:textColor="@color/white"
android:textOff="@string/tb_off"
android:textOn="@string/tb_on" />
The custom background is defined in drawable/custom_toggle_layer.xml
:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+android:id/background"
android:drawable="@drawable/custom_toggle_bg" />
<item android:id="@+android:id/toggle"
android:drawable="@drawable/custom_toggle_icon" />
</layer-list>
Where custom_toggle_bg
and custom_toggle_icon
are both selectors and are working fine.
The problem is the text is overlapping with the bottom side of the icon. The text is aligned to the bottom, and if I make the icon larger the text sticks to the bottom of the button correctly.
I first tried to set a padding on the toggle button, but this just moves the text up inside the icon yet a bit more.
I'm trying to style the text independently of the button, so I've defined a custom style:
<style name="CustomTBText">
<item name="android:textSize">14sp</item><!-- This works -->
<item name="android:textColor">@color/white</item><!-- This works -->
<item name="android:paddingTop">15dp</item><!-- This does not work -->
</style>
And tried to set a top padding to the text only, but that attribute does not work (the other attributes in the style work fine).
How can I fix this? I could do a hack setting the text of the button to empty and using an external TextView, but if possible I'd like to do everything using a customized ToggleButton.
Solution
What most tutorials on custom toggle buttons do is to set a layer list as a background to the whole button:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+android:id/background"
android:drawable="@drawable/custom_toggle_bg" />
<item android:id="@+android:id/toggle"
android:drawable="@drawable/custom_toggle_icon" />
</layer-list>
This causes problems with the text (and that's also why most tutorials do not show text).
So what I did is to set custom_toggle_bg
as background and custom_toggle_icon
as drawableTop, and now it works. This is the button fixed:
<ToggleButton
android:id="@+id/tb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="18dp"
android:background="@drawable/custom_toggle_bg"
android:drawableTop="@drawable/custom_toggle_icon"
android:gravity="bottom | center_horizontal"
android:textAppearance="@style/CustomTBText"
android:textColor="@color/white"
android:textOff="@string/tb_off"
android:textOn="@string/tb_on" />
Answered By - Mister Smith
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.