i have tried out the suggestions given but unable to reduce the size...on reduction of size in graphical layout,the border lines of the checkbox disappear...iam new to android...any help will be appreciated
thanks
here is code...
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F3CAE5"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="8dp" >
<CheckBox
android:id="#+id/cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/txt_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#000" />
<TextView
android:id="#+id/txt_fName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#000" />
</LinearLayout>
height and width change removes the border lines...check box appears in a list view that is populated dynamically...
the below code works for changing the checkbox image but now iam unable to check the box ie the tick mark does not appear on checking the box???
The text determines the size of the check box. try this:
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="new checkbox"
....... />
use custom image for check box
and use image of your size
<CheckBox
android:id="#+id/cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_selector" />
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/checked" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/unchecked" />
<item android:state_checked="false"
android:drawable="#drawable/unchecked" />
<item android:state_checked="true"
android:drawable="#drawable/checked" />
</selector>
Related
Why is my toggle button taking the wrong width and have the space of text?
I want this toggle button to be exactly the same width as the other buttons
Here is the code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#242424"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten_dp"
android:layout_weight="30"
android:background="#drawable/action_bar_btn_bg"
android:text="Close"
android:textColor="#color/abc_primary_text_material_dark" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="70"
android:gravity="right"
android:orientation="horizontal"
android:padding="#dimen/ten_dp" >
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/five_dp"
android:background="#drawable/action_bar_btn_bg"
android:button="#drawable/btn_fav"
android:gravity="center"
android:textOn="#null"
android:textOff="#null" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/five_dp"
android:background="#drawable/action_bar_btn_bg"
android:src="#drawable/ic_action_left" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_btn_bg"
android:src="#drawable/ic_action_right" />
</LinearLayout>
</LinearLayout>
#drawable/action_bar_btn_bg
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_bar_btn_bg_pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#drawable/action_bar_btn_bg_pressed" android:state_enabled="true" android:state_focused="true"/>
<item android:drawable="#drawable/action_bar_btn_bg_pressed" android:state_enabled="true" android:state_selected="true"/>
<item android:drawable="#drawable/action_bar_btn_bg_normal"/>
#drawable/btn_fav
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_action_star_normal" android:state_checked="false" />
<item android:drawable="#drawable/ic_action_star_active" android:state_checked="true"/>
Please help me and tell me where I am going wrong?
Thank you.
Try adding a weight sum tag in the linear layout
android:weightSum = "3"
Then add weight attributes to the toggle and image buttons
android:weight="1"
EDIT: since you want to center the image within the toggleButton,
I recommend trying this in addition:
<ToggleButton
android:id="#+id/YourID
android:layout_width="0"
android:layout_height="75dp"
android:layout_weight="1"
android:checked="false"
android:textOn=""
android:textOff=""
android:drawableTop="#drawable/yourImage"
android:layout_gravity="center"
android:textColor="#yourColor"
I've developed a custom drawable for Switch's thumb and track but the problem is that it's appearing stretched:
Does anyone have any idea what's causing this?
My XML's are below:
Layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toLeftOf="#+id/switch1"
android:padding="5dp" />
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:thumb="#drawable/switch_thumb_selector"
android:track="#drawable/switch_track_selector" />
<TextView
android:id="#+id/switchErrorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_below="#id/switch1"
android:layout_centerHorizontal="true"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#android:color/holo_red_light"
android:visibility="gone" />
</RelativeLayout>
switch_thumb_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_thumb_inactive" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_thumb_inactive" android:state_checked="true"/>
<item android:drawable="#drawable/switch_thumb_inactive"/>
</selector>
switch_track_selector.xml
<item android:drawable="#drawable/switch_track_green" android:state_checked="true"/>
<item android:drawable="#drawable/switch_track_white" android:state_checked="false"/>
<item android:drawable="#drawable/switch_track_white"/>
Green Track Drawable:
I think thats bad behavior has appeared because you didn't draw "content" area. Try this drawable, I've tested and it was working for me.
I was using the standard Android checkbox, but when I installed my app on other peoples phones for testing, the checkbox was different on each phone.
On one of the phones, the checkbox was so light you could hardly see the box when it was checked.
So I tried to make a custom checkbox checked image.
This worked ok, but I can still see the original deafult checkbox image in the background?
Any ideas why?
Here is my checkable linear layout, to be honest I'm not even sure if I need this?
<?xml version="1.0" encoding="utf-8"?>
<com.myapp.myappname.CheckableLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox"
android:background="#drawable/customcheckbox"/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</com.myapp.myappname.CheckableLinearLayout>
Then I have a custom list row which is my custom ListView:
<?xml version="1.0" encoding="utf-8"?>
<com.myapp.myappname.CheckableLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dip" >
<!-- Thumbnail image -->
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/list_image"
android:layout_width="60dip"
android:layout_height="60dip"
android:focusable="false"
/>
</LinearLayout>
<!-- File Name -->
<TextView
android:id="#+id/filename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:textColor="#343434"
android:textSize="12dip"
android:layout_marginTop="10dip"
android:layout_toRightOf="#+id/thumbnail"
android:focusable="false"
android:text="Some Text." />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentRight="true"
android:background="#drawable/customcheckbox"
android:enabled="false" />
</RelativeLayout>
</com.myapp.myappname.CheckableLinearLayout>
Any ideas how to suppress the original?
Custom checkbox:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item android:state_checked="false" android:drawable="#drawable/unchecked" />-->
<item android:state_checked="true" android:drawable="#drawable/checked" />
<!--<item android:drawable="#drawable/unchecked" /> <!– default –>-->
</selector>
The attribute you want to change is button, not background.
First, design your custom graphics for different button states. Use a state list drawable (docs) to associate the various images. For example:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checked" />
<item android:state_checked="false" android:drawable="#drawable/unchecked" />
</selector>
Save this into your drawable resources folder, something like my_checkbox.xml.
Now, use the button attribute on your checkbox layout definition:
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentRight="true"
android:button="#drawable/my_checkbox"
android:enabled="false" />
I have this relative layout:
<RelativeLayout
android:id="#+id/relativeLayout5"
android:layout_width="fill_parent"
android:layout_height="110dp"
android:layout_below="#+id/relativeLayout4"
android:background="#drawable/pigs_banner_selector"
android:clickable="true"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="220dp"
android:layout_height="60dp"
android:layout_marginTop="60dp"
android:layout_marginLeft="0dp"
android:layout_marginBottom="-10dp"
android:src="#drawable/banner_games_pighunt_hill" />
<TextView
android:id="#+id/textView3"
android:fontFamily="sans-serif-condensed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/gluecksschweinjagd"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:textSize="31sp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="6dp"
android:textStyle="bold" />
</RelativeLayout>
and the selector of the RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="#color/white"/>
<item android:state_pressed="true" android:drawable="#color/highlight_pigs_banner" />
<item android:drawable="#color/pigs_banner"/>
</selector>
The behavior is this: The relativeLayout changes it´s color as intended. But I want the Child elements (the ImageView) to also get the color of the selector (#color/highlight_pigs_banner).
EDIT:
The color highlight_pigs_banner basically puts alpha value on the color. How can I achieve this also on the imageview (child element) by still clicking only the RelativeLayout
I tried adding android:clickable="true" to the child elements, which didnt work, and android:addStatesFromChildren="true" to the relativeLayout which gave me an stackoverflow exception. Anyone knows how to achieve this? Thanks.
You should use Selector for ImageView and TextView as well.
<TextView android:id="#+id/textView3"
android:fontFamily="sans-serif-condensed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/text_selector" />
text_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false"
android:state_pressed="false"
android:color="#color/normal"/>
<item android:state_pressed="true"
android:color="#drawable/highlight"/>
<item android:state_selected="true"
android:state_pressed="false"
android:color="#drawable/highlight"/>
</selector>
colors.xml
<drawable name="highlight">#ff590d</drawable>
I have a custom radiobutton with a 9-patch image as background. I use a Selector to determine the background.
I also have some text i want to put over the background of the image, but the text is aligning next to the button.
This is the RadioGroup
<LinearLayout
android:id="#+id/segmented"
android:layout_width="fill_parent"
android:layout_height="50sp"
android:gravity="center"
android:layout_below="#+id/header">
<RadioGroup android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/group1"
android:gravity="center">
<RadioButton
android:checked="false"
android:layout_width="90sp"
android:id="#+id/rbVerzekeringen"
android:text="Verzekeringen"
android:textSize="10sp"
android:button="#drawable/checkbox_theme" />
<RadioButton
android:checked="false"
android:layout_width="90sp"
android:id="#+id/rbPersoonlijk"
android:text="Persoonlijk"
android:textSize="10sp"
android:button="#drawable/checkbox_theme" />
<RadioButton
android:checked="false"
android:layout_width="90sp"
android:id="#+id/rbNotities"
android:text="Notities"
android:textSize="10sp"
android:button="#drawable/checkbox_theme" />
</RadioGroup>
</LinearLayout>
This is the Selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_window_focused="false"
android:drawable="#drawable/bt_filter_active" />
<item android:state_checked="false" android:state_window_focused="false"
android:drawable="#drawable/bt_filter" />
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/bt_filter_active" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/bt_filter" />
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/bt_filter_active" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/bt_filter" />
<item android:state_checked="false" android:drawable="#drawable/bt_filter" />
<item android:state_checked="true" android:drawable="#drawable/bt_filter_active" />
</selector>
And this is what it lookes like:
As you can figure out I want 3 large buttons with the text over it.
How can I do this?
EDIT:
I set the selector at background in stead of button and set the button to null.
The code looks like this now:
<LinearLayout
android:id="#+id/segmented"
android:layout_width="fill_parent"
android:layout_height="50sp"
android:gravity="center"
android:layout_below="#+id/header">
<RadioGroup android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/group1"
android:gravity="center">
<RadioButton
android:checked="false"
android:layout_width="100sp"
android:layout_height="40sp"
android:id="#+id/rbVerzekeringen"
android:text="Verzekeringen"
android:textSize="13sp"
android:orientation="vertical"
android:background="#drawable/checkbox_theme"
android:button="#null"
android:gravity="center"/>
<RadioButton
android:checked="false"
android:layout_width="100sp"
android:layout_height="35sp"
android:id="#+id/rbPersoonlijk"
android:text="Persoonlijk"
android:textSize="35sp"
android:background="#drawable/checkbox_theme"
android:button="#null"
android:gravity="center"/>
<RadioButton
android:checked="false"
android:layout_width="100sp"
android:layout_height="30sp"
android:id="#+id/rbNotities"
android:text="Notities"
android:textSize="13sp"
android:background="#drawable/checkbox_theme"
android:button="#null"
android:gravity="center"/>
</RadioGroup>
</LinearLayout>
But now when I make the buttons larger or smaller the text in it just disappears like this (height of the first image is 40sp, the second is 35sp and the last one is 30sp):
How can I make the background image smaller without cutting the text in it?
did you try setting the drawable as android:background instead of button?
see here.
EDIT:
I'm not sure but I think it depends on 9-patch content area (bottom and right edges lines), Android sets padding based on that if the 9-patch is set as background. The content area stretches with the image.