I have a custom-styled checkbox that I'd like to replicate a number of times in my Android app. The XML for this checkbox is:
<CheckBox
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_large"
android:text="Temporary Text"/>
Obviously, I can simply copy the XML and paste it lower down in my layout file, but in the event that I want to change the design I would have to do it for every pasted checkbox.
Is there a clean way to create a custom template for this checkbox, or should I be implementing this in code?
Is there a clean way to create a custom template for this checkbox, or should I be implementing this in code?
You can use styles. Create
<style name="MyCheckbox">
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:button">#drawable/checkbox_large</item>
<item name="android:text">Temporary Text</item>
</style>
and then just apply to all checkboxes you want:
<CheckBox
style="#style/MyCheckbox"/>
When in need of change, just alter your style.
Related
I'm trying to fight the default behaviour of the Widget.AppCompat.Button.Colored style. By default the button is semi transparent. I want it to be opaque.
Here is my code:
Button in layout:
<Button
android:id="#+id/search"
style="#style/Widget.AppCompat.Button.Colored"
android:theme="#style/AccentButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Search"/>
styles.xml
<style name="AccentButton" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#color/colorAccent</item>
<item name="colorButtonNormal">#f00</item>
</style>
If I remove the style="#style/Widget.AppCompat.Button.Colored" part the button will not turn transparent if disabled.
I've tried to look into the Appcompat/Android source code. No luck though. I can't find the part where it is set to be transparent. The goal is the get a nice solution using mostly AppCompat code. I know I can create a custom drawable button backgroud. I would like to avoid it. Any ideas?
The solution is to use: <item name="android:disabledAlpha">1.0</item> like this:
<style name="AccentButton" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#color/colorAccent</item>
<item name="colorButtonNormal">#f00</item>
<item name="android:disabledAlpha">1.0</item>
</style>
How I got to this answer
After some struggle I've found btn_colored_material.xml source code.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:alpha="?attr/disabledAlpha"
android:color="?attr/colorButtonNormal" />
<item android:color="?attr/colorAccent" />
</selector>
It uses the disabledAlpha attribute. So it was only a matter of using it.
One thing I still don't get is why I have to use it with the android: prefix. I would expect that:
?android:attr/something to be set with <item name='android:something'>(...)
?attr:something to be set with <item name='something'>(...)
My guess is that if Android soruce code code uses it's own attributes it doesn't need the prefix.
edit:
for anyone coming across this, the way I got it to work is to either:
Set the layout directly for each preference item, as in:
<CheckboxPreference
android:layout="#layout/checkbox_preference_item"/>
OR set the style via a theme as I was doing before, but define a widgetlayout and set it instead of an actual layout, like so, where preferenceStyle is set to #style/Preference and checkBoxPreferenceStyle is set to #style/Preference.Checkbox:
<Style name="Preference">
<item name="android:layout">#layout/checkbox_preference_item</item>
</Style>
<Style name="Preference.Checkbox">
<item name="android:widgetLayout">#layout/your_custom_widget</item>
</Style>
I'm trying to customize the layout of a Checkbox Preference item and the checkbox itself is not showing up. I'm modeling after android code and not sure where I'm going wrong. The text views are working fine as well as the rest of the layout but the checkbox is not showing up. Would appreciate any help with this.
Relevant code:
theme.xml:
<style name="Theme.Settings" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/SettingsActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:preferenceCategoryStyle">#style/PreferenceCategory</item>
<item name="android:preferenceStyle">#style/Preference</item>
<item name="android:checkBoxPreferenceStyle">#style/Checkbox</item>
</style>
style.xml
<style name="Checkbox">
<item name="android:layout">#layout/checkbox_preference_item</item>
</style>
<style name="Preference.Text">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">#dimen/preferences_item_font</item>
<item name="android:textColor">#color/preference_text</item>
</style>
<style name="Preference.Text.Extra" parent="Preference.Text">
<item name="android:textSize">#dimen/preferences_header_font</item>
</style>
checkbox_preference_item.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/preferences_item_height"
android:background="#color/white"
android:paddingLeft="#dimen/preferences_item_left">
<LinearLayout android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="center_vertical">
<TextView android:id="#android:id/title"
style="#style/Preference.Text"/>
<TextView android:id="#android:id/summary"
style="#style/Preference.Text.Extra"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible"
android:id="#android:id/widget_frame"
android:layout_alignParentRight="true"/>
</RelativeLayout>
I am not seeing a CheckBox in the layout xml. Am I missing something? You need to specify something like:
<CheckBox android:id="..." ... />
Then you may need to specify something like
<CheckBoxPreference android:key="..." ... />
in the preference xml file. Setting should be android:widgetLayout to the custom CheckBox.
See this post may help you more customizing checkbox preference
PROBLEM
I've tried to change the select highlight in my application but with no luck.
I've been doing it via styles because I have quite a lot of them in my app.
I would be grateful if you have told me what is wrong with my code.
CODE
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionOverflowButtonStyle">#style/MyActionBar</item>
<item name="android:imageButtonStyle">#style/MyImgBtn</item>
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerItemStyle</item>
<item name="android:spinnerStyle">#style/MySpinnerTheme</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
<style name="MySpinnerTheme" parent="android:Widget.Holo.Light.Spinner">
<item name="android:activatedBackgroundIndicator">#drawable/custom_activated_background</item>
</style>
UPDATE
So I've managed to merge two selectors with setting style on setDropDownViewResource layout element. But what I get at the moment are two selectors appearing at the same time.
I've tried to set android:dropDownSelector="#android:color/transparent" on Spinner in XML but still no luck. Posting more code below.
SPINNER
final Spinner yearSpinner = (Spinner) rootView.findViewById(R.id.yearSpinner);
ArrayAdapter<SpinnerItem> adapterYear = new ArrayAdapter<SpinnerItem>(getActivity(),
R.layout.spinner_item_layout , yearsItems);
yearSpinner.setOnItemSelectedListener(itemSelectedListener);
yearSpinner.setAdapter(adapterYear);
<Spinner
android:id="#+id/yearSpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dropDownSelector="#android:color/transparent"
android:layout_below="#id/yearTxt"
android:layout_marginLeft="20dp"
android:popupBackground="#drawable/podpowiedzi"
android:layout_marginRight="20dp"
android:layout_centerHorizontal="true"
>
</Spinner>
SPINNER_ITEM_LAYOUT
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="#style/mySpinnerItemStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="marquee"
android:singleLine="true"
android:textStyle="italic"
android:textAlignment="inherit"
android:textColor="#color/text_color"
>
</TextView>
To change the style and colours of your spinner drop down items add the following to your style.xml
<style name="mySpinnerItemStyle" parent="#style/android:Theme.Holo">
<item name="android:background">#drawable/spinner_selector</item>
<item name="android:gravity">center_vertical</item>
</style>
And then create the "spinner_selector.xml" in your drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="#color/orange" /> <!-- current selected -->
<item android:state_pressed="true" android:drawable="#color/orange_bright" />
<item android:drawable="#android:color/transparent" />
</selector>
If you want to custom highlight colour when you press on the spinner, we need 9 patch images for spinner backgrounds. Do the following steps:
1) visit this website:http://android-holo-colors.com/, select Spinner, select the colour you want for your spinner highlight and download the zip file. (there are many other options depends on your app)
2) In the zip file open res-->drawable and save file "apptheme_spinner_background_holo_light.xml" to your drawable folder
3) save the following images in the right drawable folders:
apptheme_spinner_default_holo_light.9.png
apptheme_spinner_disabled_holo_light.9.png
apptheme_spinner_focused_holo_light.9.png
apptheme_spinner_pressed_holo_light.9.png
4) add this to your style.xml file:
<style name="MySpinnerTheme" parent="#android:Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/apptheme_spinner_background_holo_light</item>
</style>
In future, you can auto generate any style you want with all the resources required (including spinner highlight colour) thr this website:
http://android-holo-colors.com/
i have a List view with seperators, for the header i am using this xml:
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_header_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="2dip"
android:paddingBottom="2dip"
android:paddingLeft="5dip"
android:textSize="20sp"
style="?android:attr/listSeparatorTextViewStyle" />
By using listSeparatorTextViewStyle the default color is gray, how can i change that color or add an image ?
You'll need to create your own style.
The Android Source code is a best friend for quickly gathering and building system styled themes.
Follow this path from the source code you've downloaded via Android SDK Manager
platforms/android-19/data/res/values
You'll find something like this inside styles.xml:
For Dark theme:
<style name="Widget.Holo.TextView.ListSeparator" parent="Widget.TextView.ListSeparator">
<item name="android:background">#android:drawable/list_section_divider_holo_dark</item>
<item name="android:textAllCaps">true</item>
</style>
For Light theme
<style name="Widget.Holo.Light.TextView.ListSeparator" parent="Widget.TextView.ListSeparator">
<item name="android:background">#android:drawable/list_section_divider_holo_light</item>
<item name="android:textAllCaps">true</item>
</style>
By following the path the code mentioned above, you'll get all the assets/images you need to build your own one.
I tried to set up my togglebutton properties layout using style.xml.
Here's my code:
<ToggleButton android:id="#+id/button_toggle_1" style="button_test_1"/>
<ToggleButton android:id="#+id/button_toggle_2"
android:textOff="test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ToggleButton android:id="#+id/button_toggle_3" style="button_test_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
For ID=button_toggle_1, I apply a style (style.xml), here's the code:
<style name="button_test_1">
<item name="android:textOff">test1</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="button_test_3">
<item name="android:textOff">test3</item>
</style>
I can see button 2 and 3 but the text for button 3 is different from what I set it to be. button 3 text = "APAGADO". From this test, I conclude that togglebutton simply cannot set its properties using style.xml. Is this true? or did I do something wrong?
If toggle button is "special", anyone knows the reason why? is this "special" condition applies to other things as well?
Thanks!
You are not referencing the styles correctly. It is style="#style/style_name". See documentation.