Android Toggle Button custom size/padding/spacing

Question

I'm trying to create a custom style for my Android Toggle Buttons. Changing colour and text was no problem but I'm having trouble changing the size/padding/spacing or whatever it is that let them appear so unnecessarily large by default. I've set height to wrap_content and padding and margin to 0, but the size of the button is still as a big as the default Toggle Button.

Does anyone of you know what parameters I've to change to remove to unnecessary spacing between the button's text and border?

Here's a link to an image of what I want to achive. From left to right: Default ToggleButton, my current ToggleButton and the kind of ToggleButton I want.

Here's my code (as I add those buttons dynamically, no xml)

ToggleButton button = new ToggleButton(getContext());
button.setLayoutParams(new LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
button.setId(IDCreator.getID());
button.setText(tag);
button.setTextOff(tag);
button.setTextOn(tag);
button.setGravity(Gravity.LEFT);
button.setPadding(0, 0, 0, 0);
button.setBackground(getContext().getResources().getDrawable(R.drawable.toggle_selector));

Thanks for your help. Kind regards.

Edit: Image and Code

Unguiculate

You can always post a link to your image (link without ADS). – Cocklebur

Without actually seeing the layout its quite difficult to understand what the problem is. Try adding the image through a link and i'll be there to solve it. – Ewald

android Toggle Button size is standard but may be your images(custom) size is not good as it should be. So please re check size of images. – Bequeath

@23imak Hi, I've uploaded an image and some sample code. – Unguiculate

Hey @Androidicus, I'm facing the same problem, I can't get rid of the text padding in the ToggleButton. Did you ever get to solve it? – Inness

android:minWidth="0dp" and android:minHeight="0dp" as seen #29912113 I was not able to fix it programmatically though... – Scenic

Answer 1

If you are just trying to change the way the text is rendered inside of the ToggleButton, then you need to adjust the android:padding and android:gravity parameters in the XML for your button.

To change the padding, you first need to take the text away from being centered by default (because when it's centered padding has no ability to take effect). You do this by the android:gravity parameter which is like text-align in CSS.

For example;

<ToggleButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left">
</ToggleButton>

This will align the text to the left of the ToggleButton. However, this will also align it to the top by default, as gravity effects both the x and y axis.

If you want to align to the center vertically and to the left horizontally, you would do the following:

<ToggleButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center">
</ToggleButton>

This will give you it centered vertical, but fully set left on the horizontal scale. This will make the text go ontop of the edge of your button and look unappealing. You need to use the alignments in conjunction with a padding for the text in order to get it exactly where you want.

For example:

<ToggleButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding_left="10dp"
android:gravity="left|center">
</ToggleButton>

This adds padding to the left only which means you can set it as much away from the border as you like.

You can play around with the padding for each side and the gravity in order to scale the text to your needs, but this would be the best approach to control the ToggleButton's inner text alignment.

Joachima

Thanks for your detailed response. Unfortunately that did not do the trick. The Text changed position within the button, but the button's size remained unchanged. See my updated question for a code example. – Unguiculate

Are you trying to create a class for a button that is smaller then the native ToggleButton that can be used multiple times dynamically adjusting size based on it's text? Or is this for a single static button? If so, you could just specify width and height and then adjust padding and gravity to your liking? – Joachima

Answer 2

This will give you the width of the string ie; text in your case.

Paint paint = toggleButton.getPaint();
float length = paint.measureText(YOUR_STRING);

This gives you the width of the string it would take on the screen. Now set the width of the toggle button via LayoutParams.

Lets say parent layout of your toggle button is LinearLayout. so it should go like:

toggleButton.setLayoutParams(new LayoutParams(WIDTH_YOU_CALCULATED,LinearLayout.LayoutParams.WRAP_CONTENT));         

This will set the width and height of your ToggleButton to what you calculated.

Ewald

Thank you, but that doesn't really work either. It still looks like there's a lot of padding around the text because if I resize the button, the text disappears. (I'd like to change the height not width of the button) – Unguiculate

Answer 3

I realize this is outdated, but perhaps using setScaleX({provide a float 0.0 - 1.0}) and setScaleY({provide a float 0.0 - 1.0}) might be the answer for the original post (how to change the size of the toggle button).

Glyph

Answer 4

Use CheckedTextView instead: https://mcmap.net/q/957111/-removing-padding-from-toggle-button-in-android It is just a regular TextView with checked state, so no weird paddings etc.

Litotes

Answer 5

You need to define your ToggleButton in an xml file and make sure you include

 android:minHeight="0dp"
 android:minWidth="0dp"

as attributes. I had the exact same problem, and almost gave up on using ToggleButton for that reason. Calling setMinWidth(int) and setMinHeight(int) in my code had no effect for me, nor did anything else I tried. But when I set these attributes in the xml I was then able to control the size of the ToggleButton with padding, although be aware that I also modified the padding in with xml, like so:

android:paddingTop="6dp"
android:paddingBottom="6dp"

You might be able to set the padding programmatically as long as you set the minWidth and minHeight in the xml. Defining your widgets in xml is very easy to do btw. Most people do it using View.inflate() or myinflater.inflate(), so Google those terms and you will find examples.

Therontheropod

Answer 6

You can change minWidth. Default for min height is 48dip and for min width 88dip. But there are reasons why min width if bigger than height. I assume that reason is that words are longer then taller, when written and words On/Off can variate when using various languages. You must test in you app with languages you use. Language is this case comes from device meaning that language end user has put, meaning that it is not one of the language you have translated yourself, but one of languages Google support as Androids language.

                    android:minWidth="48dip"

Kathleenkathlene