Custom Size / Indentation / Spacing Buttons Android Toggle Button

Question

I am trying to create my own style for Android Android Toggle Buttons. Changing the color and text was not a problem, but I had problems resizing / filling / spacing or whatever, which made them seem so unnecessarily large by default. I set the height for wrap_content, and padding and margin are 0, but the button size is still as big as the default Toggle button.

Do any of you know which parameters I should change to remove the unnecessary distance between the button text and the border?

Here is a link to an image of what I want to achieve. From left to right: default is ToggleButton, my current ToggleButton and the type of ToggleButton I want.

Here is my code (as I add these buttons dynamically, without 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)); 

Thank you for your help. Sincerely.

Edit: Image and code

Answer 1

If you are just trying to change the way text is displayed inside ToggleButton , you need to configure the android:padding and android:gravity options in XML for your button.

To change the registration, you first need to separate the text from the center by default (because when it centers the indentation, it has no way to take effect). You do this with the android:gravity parameter, which is similar to text-align in CSS.

For instance:

 <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 ToggleButton. However, by default, this will also correspond to its vertex, since gravity affects both the x axis and the y axis.

If you want to center vertically and left horizontally, you must 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 a centered vertical, but fully mounted to the left on the horizontal scale. This will make the text go to the edge of your button and look unappealing. You need to use alignments in combination with indentation for the text to get it exactly where you want.

For instance:

 <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 an addition only to the left , which means that you can install it as far from the border as you like.

You can play with padding for each side and gravity to scale the text to your needs, but that would be the best approach to control the internal alignment of ToggleButton text.

Answer 2

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

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

This gives you the width of the string to be displayed on the screen. Now set the width of the toggle button using LayoutParams.

Suppose the parent layout of your toggle button is LinearLayout. so it should look like this:

 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.

Answer 3

I understand that this is deprecated, but perhaps using setScaleX ({provide float 0.0 - 1.0}) and setScaleY ({provide float 0.0 - 1.0}) might be the answer for the original message (how to resize the toggle button).

Answer 4

Use CheckedTextView instead: fooobar.com/questions/708968 / ... This is a regular regular TextView with checked state, so no weird paddings, etc.