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.
Related
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.
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.
I'm writing an app that will have 60 checkboxes, numbered 1-60.
My goal is to achieve something like this:
Is there a way to achieve this without having to draw 60 .png files with the number inside? Could I draw only the edges and add the numbers as a text property of the button?
I tried customizing a ToggleButton (got the idea from here)
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/toggle_selector"
android:background="#null"
android:paddingLeft="10dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textOn="60"
android:textOff="60" />
toogle_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/checked" />
<item
android:drawable="#drawable/not_checked" />
</selector>
but as a result, the text was placed at the right of the button. Is it possible to place the text on top of the image?
You can do it with relative layout with textview on top of Toggle button like this. Replace margins and size as per your need
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_floating_material_dark"
tools:context="com.contag.app.fragment.NavDrawerFragment">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/toggle_selector"
android:background="#android:color/transparent"
android:gravity="center"
android:textOn="#null"
android:textOff="#null"
android:minHeight="0dp"
android:minWidth="0dp"
android:id="#+id/toggleButton"
android:layout_marginTop="26dp"
android:layout_marginStart="156dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="60"
android:textColor="#android:color/holo_green_dark"
android:textSize="15sp"
android:id="#+id/textView"
android:layout_alignLeft="#+id/toggleButton"
android:layout_alignTop="#+id/toggleButton"
android:layout_alignRight="#+id/toggleButton"
android:layout_alignBottom="#+id/toggleButton"
android:gravity="center" />
</RelativeLayout>
I need to use custom radio buttons with background image, and space them evenly horizontally, I can achieve the spacing but cannot position the background image in the center of each button. My layout is as below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="58dp">
<RadioGroup
android:id="#+id/group_bottom_bar"
android:layout_width="match_parent"
android:layout_height="52dp"
android:orientation="horizontal">
<RadioButton
android:id="#+id/v4_btn_trip"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_trip" />
<RadioButton
android:id="#+id/v4_btn_agenda"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_agenda" />
<RadioButton
android:id="#+id/v4_btn_favorite"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_favorite" />
<RadioButton
android:id="#+id/v4_btn_settings"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_settings" />
</RadioGroup>
</RelativeLayout>
The style is per below:
<style name="BottomTabBarButtonStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_weight">1</item>
I already set the gravity to center_horizontal.
I tried to replace android:button with android:background but that just stretched the image.
One of the selector files (v4_tabbar_radio_trip)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_bottom_tab_trip_active" android:state_checked="true" android:state_pressed="true" />
<item android:drawable="#drawable/ic_bottom_tab_trip_active" android:state_pressed="true" />
<item android:drawable="#drawable/ic_bottom_tab_trip_active" android:state_checked="true" />
<item android:drawable="#drawable/ic_bottom_tab_trip" />
</selector>
This is its current state.
Update: The expected output is that the background image (the two dots) is in the middle of the greyed area (which is the radio button), not aligned to the left. Similarly for other icons
You can try this layout xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="58dp" >
<RadioGroup
android:id="#+id/group_bottom_bar"
android:layout_width="match_parent"
android:layout_height="52dp"
android:orientation="horizontal" >
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_trip"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_trip" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_agenda"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_agenda" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_favorite"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_favorite" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_settings"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_settings" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</RadioGroup>
</LinearLayout>
I know this is not good way of handling the things but it can do a trick for you and it is feasible for all screens.
Try it. Hope this helps you.
try to write
style="#style/BottomTabBarButtonStyle"
after the
android:button="#drawable/v4_tabbar_radio_settings"
in layout xml file.
Try out this!!
<LinearLayout
android:id="#+id/ll_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:layout_marginBottom="5dp"
android:weightSum="2" >
<RadioGroup
android:id="#+id/radioGrouprecharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/radioPreapaid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:button="#android:drawable/btn_radio" />
<RadioButton
android:id="#+id/radIoPostpaid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center_horizontal" />
</RadioGroup>
</LinearLayout>
You are centering your button, but the drawable is always left-aligned.
The solution appears to be create a new radio group. Here is an example.
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" />