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

Solution 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.

Solution 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.

Solution 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).