I have two layouts both consisting of 2 TextViews each. The code goes like this
First Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
>
<TextView
android:id="#+id/total_hours_spend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/total_hours_spend"
android:textSize="14sp"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:textStyle="bold"
android:padding="#dimen/margin_padding_2dp"
android:background="#drawable/rectangle_selector"/>
<TextView
android:id="#+id/total_budget_spend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/total_budget_spend"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:padding="#dimen/margin_padding_2dp"
android:textStyle="bold"
android:background="#drawable/rectangle_selector"
android:textSize="14sp"/>
</LinearLayout>
Second Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_padding_4dp"
android:padding="#dimen/margin_padding_4dp"
>
<TextView
android:id="#+id/training"
android:layout_width="#dimen/margin_0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_margin="#dimen/margin_padding_2dp"
android:padding="#dimen/margin_padding_5dp"
android:text="Trainings"
android:textStyle="bold"
android:gravity="center"
android:textSize="17sp"
android:background="#drawable/background_selector"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
/>
<TextView
android:id="#+id/learning_programs"
android:layout_width="#dimen/margin_0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Learning Programs"
android:padding="#dimen/margin_padding_5dp"
android:textStyle="bold"
android:textSize="#dimen/text_size_seventeen"
android:background="#drawable/background_selector"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
/>
</LinearLayout>
For both these layouts, I have need to toggle between background images which I am doing using item_selectors.Something like this
Back_Selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_enabled="true" android:drawable="#drawable/rounded_corner" />
<item android:state_focused="true" android:drawable="#drawable/rounded_corner"/>
<item android:drawable="#drawable/rounded_corner_grey"/>
</selector>
and Rectangle_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_enabled="true" android:drawable="#drawable/blue_rectangle"/>
<item android:state_focused="true" android:drawable="#drawable/blue_rectangle"/>
<item android:drawable="#drawable/grey_rectangle"/>
</selector>
The default design for the screen is that TextView Training and TextView Total hours spend should be highlighted with the respective drawables set in the selector xml files.Also, one of the TextViews in both the layouts should be active all the time.
The problem is that only Training is highlighted when the app is launched. In the second layout, both the textViews are inactive.
When I click something on the second layout, the TextViews from the second layout becomes inactive.
What I mean is, out of 4 textviews two should be active all the time.
But with the above code, I only have one TextVIew active.
What changes should I do here?
What's happening is that each text view can have focus one at a time (drawable focused state), so if you click in another TextView, it will gain focus while the other loses it.
Bearing this in mind and also the fact that you need one of the TextViews in both the layouts should be active all the time, the best solution I can see to your problem is to have 2 RadioGroups containing 2 RadioButtons instead of the TextView's:
First layout:
<RadioGroup android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="40dp"
android:weightSum="1">
<RadioButton
android:id="#+id/total_hours_spend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:button="#null"
android:text="#string/total_hours_spend"
android:textSize="14sp"
android:textStyle="bold"
android:padding="#dimen/margin_padding_2dp"
android:background="#drawable/rectangle_selector"/>
<RadioButton
android:id="#+id/total_budget_spend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:button="#null"
android:text="#string/total_budget_spend"
android:padding="#dimen/margin_padding_2dp"
android:textStyle="bold"
android:background="#drawable/rectangle_selector"
android:textSize="14sp"/>
</RadioGroup>
Second Layout:
<RadioGroup android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_padding_4dp"
android:padding="#dimen/margin_padding_4dp"
android:weightSum="1">
<RadioButton
android:id="#+id/training"
android:layout_width="#dimen/margin_0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_margin="#dimen/margin_padding_2dp"
android:padding="#dimen/margin_padding_5dp"
android:button="#null"
android:text="Trainings"
android:textStyle="bold"
android:gravity="center"
android:textSize="17sp"
android:background="#drawable/background_selector"/>
<RadioButton
android:id="#+id/learning_programs"
android:layout_width="#dimen/margin_0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:button="#null"
android:text="Learning Programs"
android:padding="#dimen/margin_padding_5dp"
android:textStyle="bold"
android:textSize="#dimen/text_size_seventeen"
android:background="#drawable/background_selector"
android:gravity="center"/>
</RadioGroup>
background_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/blue_rectangle"/>
<item android:state_checked="false" android:drawable="#drawable/rounded_corner_grey"/>
<item android:drawable="#drawable/rounded_corner_grey"/>
</selector>
rectangle_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/blue_rectangle"/>
<item android:state_checked="false" android:drawable="#drawable/grey_rectangle"/>
<item android:drawable="#drawable/grey_rectangle"/>
</selector>
This way it will work as you exposed.
If you still want to use TextView's, the only way I see is to create programmatically a TextView that implements the Checkable interface and then deal with the logic of having only one checked at a time in each layout. I think the solution I propose takes less time and achieves the desired effect.
Related
I want to style radio buttons and show icons instead as
I have radio buttons radio group as
<RadioGroup android:id="#+id/detial_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical">
<RadioButton android:id="#+id/bus"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/bus"/>
<RadioButton android:id="#+id/train"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/train"/>
<RadioButton android:id="#+id/plane"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/plane" />
<RadioButton android:id="#+id/pluse"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="#drawable/pluse" />
</RadioGroup>
one of my drawables is
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#mipmap/bus_light" />
<item
android:state_checked="false"
android:drawable="#mipmap/bus_dark" />
</selector>
and all other three for train, plane and pluse are same as above except icons, when I apply the above things I get radio buttons as
mean to say there is still radio button border in back ground, how can I remove that and get the icons as in first image.
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"
Can someone tell me how can I create a radioGroup with radio buttons that will have the look like on the image:
Here is my xml code:
<RadioGroup
android:id="#+id/network_creation_radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="20dp">
<RadioButton
android:id="#+id/network_creation_private"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="false"
android:drawableRight="#drawable/lock"
android:text="Private"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
style="#style/TextView_LightGrey"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Anyone can join" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#color/dark_gray" />
<RadioButton
android:id="#+id/network_creation_public"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:drawableRight="#drawable/unlock"
android:text="Public"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
style="#style/TextView_LightGrey"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Join via a suggest from existing\nnetwork members" />
</RadioGroup>
Radio Button Selector xml
res/drawable/radio_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_selected" android:state_checked="true"/>
<item android:drawable="#drawable/btn_unselected" android:state_checked="false"/>
</selector>
Now add android:background="#drawable/radio_selector" android:drawableRight="#drawable/radio_selector" to every radio button tag.
Instead of radio button you can use Checked Text View here and here is the example but in this you have to handle the checked states like radio group. Means if one is checked you have to make another one is unchecked.
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>
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.