spacing for checkmark image of the check box in android - android

Hi i am trying to create a check box list which should looks like in the below image which will have space before and after checkmark image.
but when i am trying to create check box its is showing like the below image.
there is no space surrounds to check-mark image like i am showing the first image. If i use padding to check box component its like "android:padding=50dp" its giving space between check-mark image and text. But not giving space in the starting .i.e before Check-Mark image.
below is my xml layout for check box
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="15dp">
<CheckBox android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:button="#drawable/btn_check_square"
android:background="#drawable/filter_item_background"
android:textColor="#android:color/black"
android:padding="5dp"
android:text="check box text"/>
</LinearLayout>
Any help to solve this issue is appreciated.

this is resolved with below code.
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/filter_item_background"
android:button="#android:color/transparent" //Make button null
android:drawableLeft="#drawable/btn_check_square" //Create button in drawable
android:drawablePadding="20dp" //Set space between Text & CB
android:padding="5dp"
android:text="check box text"
android:textColor="#android:color/black" />

Try this (without custom graphics):
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:color/transparent"
android:drawablePadding="8dp"
android:text="CheckBox" />
It uses a little trick: As Checkbox is derived from Button, we can add a drawable and can now set a padding between label and drawable. As we do not acutally need a real icon, we use the transparent color instead.

<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/filter_item_background"
android:button="#null" //Make button null
android:drawableLeft="#drawable/btn_check_square" //Create button in drawable
android:drawablePadding="20dp" //Set space between Text & CB
android:padding="5dp"
android:text="check box text"
android:textColor="#android:color/black" />

Use the below code
final float scale = this.getResources().getDisplayMetrics().density;
checkbox.setPadding(checkbox.getPaddingLeft()
+ (int) (10.0f * scale + 0.5f),
checkbox.getPaddingTop(),
checkbox.getPaddingRight(),
checkbox.getPaddingBottom());

Add this to your checkbox:
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"

Related

Space between textview and drawable icon

I'm facing problems with the position of an icon. I've set that icon as drawableLeft of a TextView, this is working fine but, if I set the TextView's gravity to center_horizontal, then a padding space appears between the icon and the text. The code is as follows:
<TextView
style="#style/BaseText.White.Bold"
android:gravity="center_horizontal"
android:drawableStart="#drawable/ic_text"
android:drawableLeft="#drawable/ic_text"
android:text="#string/text"
android:layout_marginBottom="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_big"
android:layout_marginLeft="#dimen/margin_big"
android:padding="0dp"
android:drawablePadding="0dp"/>
What do I have to do to ensure that the icon is shown at the text's left side but horizontally centered?
I've make two screenshots to show you the difference when adding or removing the icon's gravity.
When the textview's gravity is not set, the result is as follows:
But, when the gravity is added, then a padding appears between the text and the icon:
Thanks in advance
Only add android:drawablePadding="10dp" field in your text view refer the coad
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Add New Address"
android:textAppearance="#style/Title"
android:id="#+id/tvAddNewAddress"
android:drawablePadding="20dp"
android:layout_weight="1"
android:padding="5dp"
android:textColor="#color/colorAccent"
android:drawableStart="#android:drawable/arrow_down_float"
/>
Try to give android:gravity="center" to Text View. Also add android:layout_width="wrap_content" and android:layout_height="wrap_content" properties in Text View.
Refer this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:drawableLeft="#mipmap/ic_launcher"
android:drawablePadding="0dp"
android:drawableStart="#mipmap/ic_launcher"
android:gravity="center"
android:textSize="22sp"
android:padding="0dp"
android:text="TestingTestingTestingTestingTestingTestingTestingTestingTesting" />
</RelativeLayout>
This is what it showing.

How to resize image of checkbox in android?

I am adding image for a CheckBox widget (that is instead of the default one for both clicked and unclicked ones in .xml file using selector) it's getting added, but the image can't be resized into a smaller one and remains in its original size.
How could I decrease the image size?
The code I used to create the CheckBox is
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:button="#drawable/check_box"
android:drawablePadding="20dp"
android:text="check box text"
android:textColor="#color/labelColor" />
Set the android:button field to null and to set the checkbox as the android:background field of the checkbox
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:drawablePadding="20dp"
android:text="check box text"
android:background="#drawable/check_box" />
To set the android:button field to null and to set the checkbox states as the android:background field of the checkbox.
Your code would then become:
<CheckBox
android:id="#+id/cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:background="#drawable/check_box"
android:drawablePadding="20dp"
android:text="check box text"
android:textColor="#color/labelColor" />
#berry: Please set android:button="#null" and set this in your android:background .
android:button="#null"
android:background="#drawable/check_box"
CheckBox doesn't respect the size of the android:button drawable when the layout width and height are set to wrap_content. So use android:background .

How to remove internal Image padding (Top, Left and Bottom) of an Android Checkbox

I have a Checkbox in Android with a TextView above it:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/default_margin">
<TextView
android:id="#+id/tv_edit_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="false"
android:layout_margin="0dp"
android:gravity="center_vertical|center_horizontal"
android:text="#string/edit_checkbox" />
<CheckBox
android:id="#+id/cb_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:checked="true" />
</LinearLayout>
The problem with Checkbox however is that it's internal "Image" got an invisible border around it. How to remove this? I've tried android:padding="-5dp" but this only worked for the right side of the CheckBox for some reason, not the top, left and bottom (my main concern is the Top).
Here is a screenshot of the Checkbox in Eclipse Graphical Layout window:
LineairLayout selected:
Checkbox selected:
In the second picture you can see the Checkbox has some padding around it when you select it. I want to have this removed (especially on the top), so that the space between the Text and the Checkbox is reduced.
Here is a picture when I have padding="-5dp":
Checkbox selected:
PS: If someone knows a solution with just a Checkbox and it's Text-field, so I can removed the LineairLayout and TextView, while still having the Text above the Checkbox I would also appreciate it. A single Checkbox with a custom style and Text is better for performance than a Checkbox inside a LineairLayout with an additional TextView. (I know this is more something for a different question, but I just add it here since it doesn't have a lot of priority. Everything is working already, except for the padding of the Checkbox.)
Ok, I changed the LineairLayout to a RelativeLayout, and than I can change the margin to a minus dp. This is my end result:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/default_margin">
<TextView
android:id="#+id/tv_edit_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:singleLine="false"
android:gravity="center_horizontal"
android:text="#string/edit_checkbox" />
<CheckBox
android:id="#+id/cb_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_edit_checkbox"
android:layout_centerHorizontal="true"
android:layout_marginTop="-10dp"
android:checked="true" />
</RelativeLayout>
This gives the following result:
RelativeLayout selected:
This does change the space between the Text and the Checkbox. For me this is what I want, however it still doesn't explain why the Android Checkbox' internal Image got a padding at its Top, Left and Bottom sides.. Now idea who of Android had this idea, but it was a pretty bad one.. It was better to just use no padding on the internal image and then have some default internal Margin/Padding that can be changed by users..
OR
Edit :
You can also get the same result with LinearLayout :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="0dp"
android:text="For all products"
android:textSize="10sp" />
<CheckBox
android:id="#+id/checkBox_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:padding="0dp" />
</LinearLayout>

How do you remove the extra inner padding inside a Spinner button in an Android layout?

I am trying to create a Button that looks like a Spinner.
I have done this by creating a Button like this:
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
The problem is that the text ("default text") inside the Button seems to have extra padding around it, which makes the Button look bloated and expanded in its height.
I thought that setting the layout_height for the button to "wrap_content" would fix this and make the button thinner, but it does not have any effect.
Does anyone know how to make this button's height wrap to the text inside it?
Here is the example code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp" >
<TextView
android:id="#+id/dateLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Select date:"
android:textSize="15sp" />
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
</RelativeLayout>
android:gravity="center_vertical|center_horizontal" instead of this you can write
android:gravity="center" but as per your requirment just remove this line.do not add any gravity and change your height size android:layout_height="40dp"
i changed your code
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
style="?android:attr/spinnerStyle"
/>
The padding of this button is decided by the drawable of it. You either need to change the spinner drawable (can be done at runtime) , or provide your own drawable to the given button that would make it look like a spinner, without using the default one

Button view with drawableLeft

I need to add drawable to my button and added drawableLeft to it. If button's width is set to wrap_content, then everything is fine and looks good. But if I set custom width to my button then drawableLeft image goes away from button's caption to left edge of the button. Is this somekind of a design bug in android? How can I fix this to let button look the same on custom width?
Regards,
evilone
Seems that x-position of the drawableLeft depends on left padding and x-scroll position: source. So that's by-design behavior. I think you'd better use SpannableString and ImageSpan classes to display an image to the left of the button's text:
final SpannableStringBuilder builder = new SpannableStringBuilder("\uFFFC");
builder.setSpan(new ImageSpan(getResources.getDrawable(R.drawable.your_drawable)),
0, builder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
builder.append(getString(R.string.your_string));
textView.setText(builder);
Also, you can use Html.fromHtml() method to build Spannable from HTML. But in this case you need to implement Html.ImageGetter interface to load images from resources.
EDIT: There's a way to do a button-like widget using only XML:
<LinearLayout
android:layout_width="200dip"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:background="#android:drawable/btn_default">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:src="#drawable/button_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:text="#string/button_text"/>
</LinearLayout>
Just set android:gravity="center_vertical" to your button attributes.
<Button
android:id="#+id/button_id"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_btn_icon"
android:drawablePadding="5dp"
android:text="Button"
android:gravity="center_vertical" />
I had this problem just right now, but I found out that you just need to set android:padding to the button. That way you push the picture away from left side of the button. Check this code:
`<Button
android:id="#+id/button1"
android:layout_width="170dp"
android:layout_height="50dp"
android:layout_below="#+id/txt1"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:background="#drawable/button"
android:drawableLeft="#drawable/icon"
android:drawablePadding="20dp"
android:minHeight="40dp"
android:onClick="onClick"
android:padding="40dp"
android:text="#string/string1"
android:textSize="16sp" />`

Categories

Resources