I'm doing a list with Chips. I want this chips can be selected, so, taking a look to https://material.io/develop/android/components/chip/ I see I can have a "Choice Chip".
As I need to create and add dynamically I have to configure with specific colors, color ripplem, ...
So what I have to configure it is:
val chip = Chip(context, null, R.style.CustomChipChoice)
chip.isClickable = true
chip.isCheckable = true
chip.isCheckedIconVisible=false
chip.height = ScreenUtils.dpToPx(40)
chip.chipCornerRadius = (ScreenUtils.dpToPx(20)).toFloat()
chip.chipStrokeWidth = (ScreenUtils.dpToPx(2)).toFloat()
chip.setTextAppearanceResource(R.style.ChipTextStyle)
return chip
What I try with R.style.CustomChipChoice is:
CustomChipChoice style
<style name="CustomChipChoice" parent="#style/Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">#color/background_color_chip_state_list</item>
<item name="chipStrokeColor">#color/background_color_chip_state_list</item>
<item name="rippleColor">#color/topic_social_pressed</item>
</style>
background_color_chip_state_list
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/topic_social_selected" android:state_checked="true" />
<item android:color="#color/topic_social_pressed" android:state_pressed="true" />
<item android:color="#color/topic_unselected_background" />
</selector>
stroke_color_chip_state_list
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/topic_social_pressed" android:state_checked="true"/>
<item android:color="#color/grey_material2" android:state_checked="false"/>
</selector>
As you can see, I make the chip, clickable and checkable (hiding the check icon I don't need).
But when I test it, the colors are not set. The chips just look as default colors (grey's scale)
Where can I apply or how, this custom style?
P.S:
I have done a fast test, to see if my CustomStyle was malformed/etc..
I added a view via xml and worked perfectly...
<android.support.design.chip.Chip
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/CustomChipChoice"
android:checkable="true"
android:clickable="true"
app:checkedIconVisible="false"
android:text="Chip Test"/>
You can't use the constructor val chip = Chip(context, null, R.style.CustomChipChoice) because the 3rd parameter isn't the style but the attribute in the theme as R.attr.chipStyle.
The Chip hasn't a constructor with 4 parameters as other components because it extends AppCompatCheckbox which does not support a 4 parameter constructor.
However you can use something different.
1st option:
Just use a xml layout (single_chip_layout.xml) to define the single Chip with your favorite style:
<com.google.android.material.chip.Chip
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/CustomChipChoice"
...
/>
with
<style name="CustomChipChoice" parent="#style/Widget.MaterialComponents.Chip.Choice">
...
</style>
Then instead of val chip = Chip(context, null, R.style.CustomChipChoice) use:
val chip = layoutInflater.inflate(R.layout.single_chip_layout, chipGroup, false) as Chip
In java:
Chip chip =
(Chip) getLayoutInflater().inflate(R.layout.single_chip_layout, chipGroup, false);
2nd option:
Another option is to use the setChipDrawable method to override the ChipDrawable inside the Chip:
Chip chip = new Chip(this);
ChipDrawable chipDrawable = ChipDrawable.createFromAttributes(this,
null,
0,
R.style.Widget_MaterialComponents_Chip_Choice);
chip.setChipDrawable(chipDrawable);
In order to set the chip style in code you can try the following:
val chip = Chip(context)
val drawable = ChipDrawable.createFromAttributes(context, null, 0, R.style.Widget_MaterialComponents_Chip_Choice)
chip.setChipDrawable(drawable)
the CustomChipChoice is not a style it is just a reference to a style. therefore change R.style.CustomChipChoice to it : R.attr.CustomChipChoice
val newChip = Chip(context, null, R.attr.CustomChipChoice)
but before it you should add this CustomChipChoicein values.xml file in your project.
for this. if your project does not have the values.xml create it in values directory.
then add CustomChipChoice like this.
values.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="CustomChipChoice" format="reference" />
</resources>
now in styles.xml add your style like this.
styles.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
.
.
<item name="CustomChipChoice">#style/CustomChipChoiceStyle</item>
.
.
</style>
now that CustomChipChoice attr references to this style
and now you can create your custom style in styles.xml file.
styles.xml
<style name="CustomChipChoiceStyle" parent="#style/Widget.MaterialComponents.Chip.Action">
.
<item name="checkedIconVisible">false</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="chipBackgroundColor">#color/colorWhite</item>
<item name="chipIcon">#drawable/ic_filter</item>
<item name="chipIconVisible">true</item>
<item name="textStartPadding">0dp</item>
<item name="textEndPadding">0dp</item>
.
.
<item name="android:textAppearance">#style/ChipTextStyleAppearance</item>
</style>
if you want to change text appearance of chip. here is ChipTextStyleAppearance. you can add it like this.
styles.xml
<style name="ChipTextStyleAppearance">
<item name="android:fontFamily">#font/main_font</item>
<item name="android:textSize">13dp</item>
<item name="android:textColor">#ffffff</item>
</style>
dont forget to add the AppTheme in androidManifest.xml on application or activity tags.
androidManifest.xml
<application
.
.
android:theme="#style/AppTheme">
<activity
.
.
android:theme="#style/AppTheme" />
There's another very simple approach to this.
styles.xml
<style name="Widget.MyApp.Chip" parent="Widget.MaterialComponents.Chip.Choice">
<item name="android:textAppearance">#style/TextAppearance.MyApp.Chip</item>
<item name="chipIconTint">?attr/colorPrimary</item>
</style>
theme.xml
<style name="Theme.MyApp.MyTheme" parent="Base.Theme.MyApp">
<item name="chipStyle">#style/Widget.MyApp.Chip</item>
</style>
With this, all chips in activities that have the theme Theme.MyApp.MyActivity applied to it will follow this custom style whether the chip has been added through xml or programmatically.
Kotlin
xml
<com.google.android.material.chip.ChipGroup
android:id="#+id/chipGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
</com.google.android.material.chip.ChipGroup>
Class
data class Parametro(
var idParametro: Long,
var nombreParametro: String? )
Main
listParametro.forEach { it->
val chip = Chip(context)
chip.id= it.idParametro.toInt()
chip.text= it.nombreParametro
chip.isClickable = true
chip.isCheckable = true
chip.setOnCheckedChangeListener { buttonView, isChecked ->
Log.i("checkedChipIds","${buttonView.id} $isChecked")
}
mBinding.chipGroup.addView(chip)
}
it works for me :)
Related
I am in the process of building my first Android app and am running into an issue that should seemingly be very simple, but I'm at a loss on why it won't work. I am trying to use a MaterialButtonGroup where a selection is both required and only one option can be selected at a time. The XML for this is:
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:selectionRequired="true"
android:layout_margin="10dp"
app:singleSelection="true"
app:checkedButton="#id/btnCases">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnCases"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Theme.MyApp.Toggle.Selected"
android:onClick="#{() -> viewModel.changeScanningMode(true)}"
android:text="Cases" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnUnits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Theme.MyApp.Toggle.NotSelected"
android:onClick="#{() -> viewModel.changeScanningMode(false)}"
android:text="Units" />
</com.google.android.material.button.MaterialButtonToggleGroup>
The two buttons inside represent the either/or option (scanning cases or units with a handheld scanner). There are two styles I've created - Selected and NotSelected - which have a parent style of OutlinedButton from MaterialComponents and look like this:
<style name="Theme.MyApp.Toggle.Selected" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:checked">true</item>
<item name="backgroundTint">#color/dark_blue</item>
<item name="android:textColor">#color/white</item>
<item name="strokeColor">#color/dark_blue</item>
</style>
<style name="Theme.MyApp.Toggle.NotSelected" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:checked">false</item>
<item name="backgroundTint">#color/white</item>
<item name="android:textColor">#color/dark_blue</item>
<item name="strokeColor">#color/dark_blue</item>
</style>
When either button is selected, I am trying to essentially swap the styles by having the Fragment this lives on using an Observer to watch for a property change on the ViewModel so it can flip the styles. The ViewModel side works fine, but swapping styles does not. The code for changing styles looks like this:
val btnCases = binding.root.findViewById<MaterialButton>(R.id.btnCases)
val btnUnits = binding.root.findViewById<MaterialButton>(R.id.btnUnits)
when (it) {
ScanningModes.CASE -> {
btnCases.setTextAppearance(R.style.Theme_MyApp_Toggle_Selected)
btnUnits.setTextAppearance(R.style.Theme_MyApp_Toggle_NotSelected)
}
ScanningModes.UNIT -> {
btnUnits.setTextAppearance(R.style.Theme_MyApp_Toggle_Selected)
btnCases.setTextAppearance(R.style.Theme_MyApp_Toggle_NotSelected)
}
}
The desired result is to flip the styles completely, but after a lot of trial and error (which got me to the above), what ends up happening is when Cases is selected (on initial load and by flipping back and forth between it and Units), I get this (desired result):
However, when I select Units, it does this:
This seems like it should be fairly easy to do, but I'm at a loss on how to accomplish this and hoping someone can assist.
Thanks in advance!
You don't need to switch style. You can just use one style with some selectors defining the android:state_checked state.
Something like:
<style name="App.Material3.Button.OutlinedButton" parent="Widget.Material3.Button.OutlinedButton">
<item name="backgroundTint">#color/app_m3_text_button_background_color_selector</item>
<item name="strokeColor">#color/app_button_outline_color_selector</item>
<item name="android:textColor">#color/app_text_button_foreground_color_selector</item>
</style>
with app_m3_text_button_background_color_selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/teal_200" android:alpha="0.12"
android:state_enabled="true" android:state_checked="true"/>
<item android:color="?attr/colorContainer"/>
</selector>
app_button_outline_color_selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false" />
<item android:alpha="0.12" android:color="#color/blu500_dark" android:state_enabled="true" android:state_checked="true"/>
<item android:color="?attr/colorOutline" />
</selector>
app_text_button_foreground_color_selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Disabled -->
<item android:alpha="#dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface" android:state_enabled="false" />
<!-- Uncheckable -->
<item android:color="?attr/colorOnContainer" android:state_checkable="false" />
<!-- Checked Buttons. -->
<item android:color="#color/blu500_dark" android:state_checked="true" />
<!-- Not-checked Buttons. -->
<item android:color="?attr/colorOnSurface" />
</selector>
After reviewing some additional details, I ended up solving the immediate problem by using setTextAppearance and setBackgroundColor since those are all I was really trying to change anyway. End result was this:
val btnCases = binding.root.findViewById<MaterialButton>(R.id.btnCases)
val btnUnits = binding.root.findViewById<MaterialButton>(R.id.btnUnits)
when (it) {
ScanningModes.CASE -> {
//change the text styles
btnCases.setTextAppearance(R.style.Theme_MyApp_Toggle_Selected)
btnUnits.setTextAppearance(R.style.Theme_MyApp_Toggle_NotSelected)
//change the background colors
btnCases.setBackgroundColor(ContextCompat.getColor(requireContext(), R.color.dark_blue))
btnUnits.setBackgroundColor(ContextCompat.getColor(requireContext(), R.color.white))
}
ScanningModes.UNIT -> {
btnUnits.setTextAppearance(R.style.Theme_MyApp_Toggle_Selected)
btnCases.setTextAppearance(R.style.Theme_MyApp_Toggle_NotSelected)
//change the background colors
btnUnits.setBackgroundColor(ContextCompat.getColor(requireContext(), R.color.dark_blue))
btnCases.setBackgroundColor(ContextCompat.getColor(requireContext(), R.color.white))
}
}
It's kind of amazing that changing a style directly isn't supported, but I'm sure there are reasons. Thankfully I didn't have to change more, or I'd have been stuck!
In my XML I'm just declaring a ChipGroup as follows:
<com.google.android.material.chip.ChipGroup
android:id="#+id/chipGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
And then adding each Chip dynamically:
ChipGroup chipGroup = findViewById(R.id.chipGroup);
for (String name : names) {
Chip chip = new Chip(activity);
chip.setText(name);
chipGroup.addView(chip);
}
The colour of a selected Chip (light green below) seems to be coming from the colorSecondaryContainer attribute (I know that, because when I change that in my theme, the Chip colour changes). I'd rather it came from colorPrimaryContainer, but it would be OK as-is except that the text colour does not suit colorSecondaryContainer... in particular, the text colour does not seem to be coming from colorOnSecondaryContainer as I would expect, because colorOnSecondaryContainer is dark in my theme, but what I'm seeing is a light text colour on a light chip colour (and the text colour is light regardless of checked status):
How do I make my Chip style comply with my material theme in general, without having to resort to setting this stuff via setters like chip.setTextColor() etc? I don't declare any Chip via XML so I can't override the style in the individual declaration either.
Add Chip Style in theme.xml file
ChipCustomStyle in theme.xml
<style name="ChipCustomStyle" parent="#style/Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">#color/chip_background_color</item>
<item name="android:textColor">#color/chip_text_color</item>
<item name="chipCornerRadius">5dp</item>
</style>
Create color resource folder under res and Add chip_background_color.xml for chip background color and chip_text_color.xml for chip text color
chip_background_color.xml in color folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/green" android:state_checked="true" />
<item android:color="#color/white" />
</selector>
chip_text_color.xml in color folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_checked="true" />
<item android:color="#color/black" />
</selector>
Create attr.xml in values folder and then add CustomChipChoiceStyle attribute in attr.xml
<resources>
<attr name="CustomChipChoiceStyle" format="reference"/>
</resources>
Add CustomChipChoiceStyle in your current activity theme in theme.xml file
<item name="CustomChipChoiceStyle">#style/ChipCustomStyle</item>
Now add CustomChipChoiceStyle style to your Chip in Kotlin file, Example code:
val chipGroup = findViewById<ChipGroup>(R.id.chipGroup)
for (name in names) {
val chip = Chip(this, null, R.attr.CustomChipChoiceStyle)
//val chip = Chip(this)
chip.text = name
chipGroup.addView(chip)
}
I'd like to remove the blue color (I'm testing my app with Holo) appearing when I click on a Spinner.
My code :
ArrayAdapter<String> array_adapter = new ArrayAdapter<String> (getActivity(),
R.layout.spinner_item, string_array);
array_adapter.setDropDownViewResource(R.layout.spinner_item);
Spinner spinner = (Spinner) getView().findViewById(R.id.spinner);
spinner.setAdapter(array_adapter);
spinner_item.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spinner_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:background="#drawable/item"
style="#style/EquidiaTheme.MySpinner" />
and item.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#android:color/transparent" />
<item android:state_selected="true" android:drawable="#android:color/transparent" />
<item android:drawable="#android:color/transparent" />
</selector>
This doesn't work. Any idea?
Customize android:spinnerDropDownItemStyle
Styling ActionBar dropdown menu
I was able to get rid the blue rectangle on item when I select it when I done this:
First I declare color that I want to use in values.xml:
<resources>
<drawable name="red_color">#ff0000</drawable>
<drawable name="blue_color">#0000ff</drawable>
<drawable name="green_color">#00ff00</drawable>
<drawable name="transparent_color">#00000000</drawable>
</resources>
Than I define custom style in Styles.xml
<resources>
<style name="Theme.Spinner" parent="android:Theme.Holo">
<item name="android:attr/listChoiceBackgroundIndicator">#drawable/transparent_color</item>
</style>
</resources>
in the style I was able to use only colors defined in resources ( Setting color like: #android:color/XXX or #XXX directly in style didn't work)
After all I aplly the them on Activity. I use Xamarin so may code is:
[Activity( Label = "TestLayouts", MainLauncher = true, Icon = "#drawable/icon", Theme="#style/Theme.Spinner")]
but for android it should be:
<activity android:theme="#style/Theme.Spinner">
I use this answer for reference:
Default selector background in Clickable Views
also to get rid the blue rectangle on spinner itself use:
<Spinner
android:background="#null"
You need to use both to completly remove blue rectable.
Also maybe this attributes in style may help you:
<item name="android:attr/colorPressedHighlight">#FF0000</item>
<item name="android:attr/colorLongPressedHighlight">#FF0000</item>
<item name="android:attr/listChoiceIndicatorSingle">#drawable/red_color</item>
A solution without theme. Ideal if you only got a few spinner.
create a drawable (xml) with state (https://developer.android.com/guide/topics/resources/drawable-resource.html#StateList)
use the SAME image for the state PRESSED and NORMAL
then use it as background :
mySpinner.setBackgroundResource(R.drawable.my_spinner_state_drawable)
extra tips:
you can use system drawable (image) from the system resource: like "#android: drawable/btn_dropdown_normal". It is easier to maintain and give a more native look and feel.
ref http://androiddrawables.com/Buttons.html
I have the following code in my activity:
......
DataCell[i] = new TextView(context,null,R.style.TitleRow);
DataCell[i].setText(data[i]);
......
Here is my style.xml file, which is in res >> values folder:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="TitleRow" parent="#android:style/TextAppearance.Medium">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#A0A0A0</item>
<item name="android:layout_marginTop">5dp</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
</style>
</resources>
No value is getting displayed..
But if I use DataCell[i] = new TextView(context) , its working fine. I know there is some problem with the fact that I am using null for attribute set. But after searching for a long time I am unable to find a perfect example of how to do it. I hope someone could clarify this to me once and for all.
Try to inflate your TextView. Like this:
layout/cell_row.xml
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/TitleRow">
YourActivity.java
......
LayoutInflater inflater = getLayoutInflater(); // called from activity
......
DataCell[i] = inflater.inflate(R.layout.cell_row, null);
// or inflater.inflate(R.layout.cell_row, root, false); where root is a parent view for created TexView
DataCell[i].setText(data[i]);
......
I usually end up creating a simple layout file only containing the element I want to instantiate ( TextView in your case ) that has the proper style applied and use the layout inflater to create the instance for me.
layout file: styled_textview.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView ... style="#+style/MyStyle" ... />
code:
activity.getLayoutInflater().inflate(R.layout.styled_textview, <root_node>, true);
I'm creating a spinner in my layout xml files and setting an string array to this spinner.
If I change the textstyle of the spinner the text is not affected by the changes.
I read in the googlegroups that a spinner has no text and therefore the textstyle can not be changed and I have to change the style of the textview that is shown in the spinner. But how can I do that. Preferably in my xml file.
As my predecessor specified, you can't do it on the main XML layout file where the Spinner component is.
And the answer above is nice, but if we want to use Google's best practices, like you know... to use styles for everything... you could do it in 3 'easy' steps as follows:
Step 1: You need an extra file under your layout folder with the look for the Spinner's items:
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/textViewSpinnerItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/SpinnerTextViewItem"
xmlns:android="http://schemas.android.com/apk/res/android" />
Name this file: spinner_item_text.xml
Step 2: Then, on your Activity Class when you are filling the Spinner with an array of items:
adapter = new ArrayAdapter<CharSequence>(this, R.layout.spinner_item_text, items);
spinner.setAdapter(adapter);
Note that the R.layout.spinner_item_text resource is in your own R's file.
Step 3: Under your values folder, create or use (you might have one already) the file styles.xml. The style entry needed should look like this one:
<style name="SpinnerTextViewItem" parent="#android:style/Widget.TextView" >
<item name="android:textSize" >8dp</item>
<item name="android:textStyle" >bold</item>
</style>
And that's it!
So far it has been really, really handy to put all about text sizes, styles, colors, etc... on a styles.xml file so it's easy to maintain.
Via XML Only
As a follow-up to #Cyril REAL's excellent answer, here is a thorough implementation of how to style your Spinners just through XML if you're populating your Spinner via android:entries.
The above answers work if you're creating your Spinner via code but if you're setting your Spinner entries via XML, i.e. using android:entries, then you can adjust the text size and other attributes with the following two theme settings:
In your res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppBaseTheme" parent="android:Theme.Holo">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- For the resting Spinner style -->
<item name="android:spinnerItemStyle">
#style/spinnerItemStyle
</item>
<!-- For each individual Spinner list item once clicked on -->
<item name="android:spinnerDropDownItemStyle">
#style/spinnerDropDownItemStyle
</item>
</style>
<style name="spinnerItemStyle">
<item name="android:padding">10dp</item>
<item name="android:textSize">20sp</item>
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="spinnerDropDownItemStyle">
<item name="android:padding">20dp</item>
<item name="android:textSize">30sp</item>
<item name="android:textColor">#FFFFFF</item>
</style>
</resources>
When you create the Adapter that backs the Spinner you can set a layout for the spinner item.
spinner.setAdapter(new ArrayAdapter(this, R.id.some_text_view));
You can style some_text_view the way you want.
<TextView android:id="#+id/some_text_view" android:textStyle="bold" />
Actually you can customize spinner's text by xml.
In your own style, define a :
<item name="android:spinnerItemStyle">#style/yourStyleForSpinnerItem</item>
and define this style also :
<style name="yourStyleForSpinnerItem">
// Stuff you want for the item style.
</style>
When you instantiate the spinner's adapter in the java code, you can use the default android.R.layout.simple_spinner_item
If you don't want such workarounds, there's a simple way. Get the textview from the spinner and change its parameters:
TextView tv = (TextView) spin.getSelectedView();
tv.setTypeface(Typeface.DEFAULT_BOLD); //to make text bold
tv.setTypeface(Typeface.DEFAULT); //to make text normal
if you want just change background of popup View in spinner, call this method:
spinner.setPopupBackgroundResource(R.color.pa_md_white);