I have a layout with multiple ToggleButtons with a custom layout. Each of them must have a different color.
To achieve that I've created a selector with 2 items in it for the checked and unchecked state. The cheked item has a drawable inside. So I have the xml's like this:
<ToggleButton
android:id="#+id/color_picker_btn_1"
android:layout_width="38dp"
android:layout_height="38dp"
android:textOff=""
android:textOn=""
android:layout_marginEnd="12dp"
android:checked="true"
android:background="#drawable/selector_button_color"/>
The selector_button_color:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_circle_checked" android:state_checked="true"/>
<item android:drawable="#drawable/shape_circle"/>
</selector>
The shape_circle_checked:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:drawable="#drawable/ic_check">
</item>
The problem is that when I apply a background tint on the ToggleButton I can't see the drawable on the Checked state.
I would like to know if there is a way to select the background color of each ToggleButton without messing up the background itself with the drawable. Otherwise I will have to create a custom background for every single ToggleButton.
Thank you very much!
To solve it I created an SVG with the circle and the check. That does the trick!
You can use something like:
<com.google.android.material.button.MaterialButton
android:id="#+id/toogleButtton1"
style="#style/circleButton.Green"
android:layout_width="48dp"
android:layout_height="48dp"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/toogleButtton2"
style="#style/circleButton.Red"
android:layout_width="48dp"
android:layout_height="48dp"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/toogleButtton3"
style="#style/circleButton"
android:layout_width="48dp"
android:layout_height="48dp"
/>
with:
<style name="circleButton" parent="Widget.MaterialComponents.Button">
<item name="shapeAppearanceOverlay">#style/circle</item>
<item name="icon">#drawable/ic_add_24px</item>
<item name="iconTint">#color/custom_button_icontint_selector</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:padding">12dp</item>
<item name="android:checkable">true</item>
</style>
<style name="circleButton.Green">
<item name="materialThemeOverlay">#style/ThemeOverlay.Green</item>
</style>
<style name="ThemeOverlay.Green" parent="">
<item name="colorPrimary">#color/green500</item>
</style>
<style name="circleButton.Red">
<item name="materialThemeOverlay">#style/ThemeOverlay.Red</item>
</style>
<style name="ThemeOverlay.Red" parent="">
<item name="colorPrimary">#color/red600</item>
</style>
<!-- Circular ShapeAppearance -->
<style name="circle">
<item name="cornerSize">50%</item>
</style>
<!-- custom selector for icon tint to hide the icon when unchecked -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorOnPrimary" android:state_checked="true"/>
<item android:color="?attr/colorPrimary" android:state_checked="false"/>
</selector>
Related
Im trying to set a background color from the style xml depending if the state of the button is enabled or not.
Button XML:
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/loginButton"
style="#style/SuccessButton2"
android:layout_width="200dp"
android:layout_height="40dp"
android:text="Iniciar sesión"
android:gravity="center"
android:enabled="true"
/>
Style SuccesButton2:
<style name="SuccessButton2" parent="TextAppearance.MaterialComponents.Button">
<item name="android:textColor">#color/button_text_color</item>
<item name="android:textSize">16sp</item>
<item name="android:background">#color/button_background_color</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">40dp</item>
<item name="android:textAllCaps">false</item>
<item name="fontFamily">#font/myriad_pro_regular</item>
</style>
XML button_background_color:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#color/dark_gray"/>
<item android:state_enabled="true" android:color="#color/red"/>
i have the same for the Text and its working fine:
button_text_color:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#4E4E4E"/>
<item android:state_enabled="true" android:color="#android:color/black"/>
The background item its not working, it show the button with a transparent background only, enabled or not.
You can try with android:backgroundTint .
Tint to apply to the background.
<item name="android:background">#color/button_background_color</item>
<item name="android:backgroundTint">#color/button_background_color</item>
I have created following style for custom AppCompatButton.
<style name="AppTheme.secondary_button" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/secondary_button_color</item>
<item name="colorControlActivated">#color/menu_blue</item>
<item name="android:colorButtonNormal">#color/secondary_button_color</item>
<item name="android:textColorPrimary">#color/gray</item>
<item name="android:textColor">#color/gray</item>
</style>
What is the attribute to change text color on button pressed?
To do this, you just need to replace the textColor you specified with a selector:
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/white" />
<item android:state_focused="true" android:color="#color/grey" /> <!-- (for accessibility) -->
<item android:color="#color/black" />
</selector>
and then assign it like this:
android:textColor="#drawable/button_foreground_selector"
<android.support.v7.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="#style/CustomAppCompatButtonStyle"
android:text="Hi, Neo"/>
Not clicked button:
Clicked button:
Style I used:
<style name="CustomAppCompatButtonStyle" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/red</item>
<item name="colorControlActivated">#color/blue</item>
<item name="android:colorButtonNormal">#color/green</item>
<item name="android:textColorPrimary">#color/gray</item>
<item name="android:textColor">#drawable/button_foreground_selector</item>
</style>
Is there a way to change the color of a disabled button in android through styles or some other form ?
I currently have the following,
drawable/button_default.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_default_shape"/>
</selector>
drawable/button_default_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/button_default_background"/>
<corners android:radius="3dp"/>
</shape>
values/styles.xml
<style name="AppTheme.Button">
<item name="android:background">#drawable/button_default</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textAllCaps">false</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">17sp</item>
<item name="android:textAppearance">#style/CustomFontAppearance</item>
</style>
You'll have to use a selector for different drawables in those states.
You can create a selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_enabled_drawable" android:state_enabled="true" />
<item android:drawable="#drawable/your_disabled_drawable" android:state_enabled="false" />
<!-- default state-->
<item android:drawable="#drawable/your_enabled_drawable" />
</selector>
Specify the color in selector for android:state_enabled="false" as drawable
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape>
<solid android:color="#32ff09" />
</shape>
</item>
</selector>
And apply this drawable resource to background of button
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/drawble_name"
android:enabled="false"
android:text="Selector Applied Button" />
Try this -
drawable/bg_button.xml :-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_button_focused" android:state_selected="true"/>
<item android:drawable="#drawable/bg_button_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/bg_button_disabled" android:state_enabled="false" />
<item android:drawable="#drawable/bg_button_normal"/>
</selector>
After this just set background on your button like this -
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_button"
android:text="Button"/>
UPDATE: For Android MaterialButton
For Android MaterialButton there are two solutions, one for SDK >= v21 and another for SDK < v21.
Here I am also giving how to change the text color of the button depending whether it is enabled or disabled.
First create two color selector .xml file in your color folder. One for button color and another for button text color. For example button_state_colors.xml for button color and button_text_state_colors.xml for text color.
Here are those two color files:
button_state_colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="#303F9F" />
<item android:state_enabled="false" android:color="#BBBBBB" />
</selector>
button_text_state_colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="#FFFFFF" />
<item android:state_enabled="false" android:color="#555555" />
</selector>
Now for all versions of Android SDK you can change the color of button and it's text using style like:
in style.xml:
<style name="Widget.AppTheme.MaterialButton" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#color/button_state_colors</item>
<item name="android:textColor">#color/button_text_state_colors</item>
</style>
in layout.xml:
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
style="#style/Widget.AppTheme.MaterialButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Only for SDK >= 21 you can direct change button color without using style like:
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/button_state_colors"/>
Another way to achieve this is to create a color selector.
Create a file
res/color/your_color.xml
which looks like
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorDisabledBackground" android:state_enabled="false" />
<item android:color="#color/colorEnabledBackground" />
</selector>
Then you may use it as a regular color
in a style:
<style name="YourStyle">
<item name="android:background">#color/your_color</item>
<item name="android:textColor">#android:color/black</item>
</style>
As well is in layouts, shapes or in code as etc.
Here is my code which works properly with button enable and disable state.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="#drawable/ic_button_gradient"/>
<item android:state_enabled="false" android:drawable="#color/gray"/>
</selector>
I am developing Tablet android application. Here i got one issue with the UI of the action bar menu items.
Note: I am using android Native actionbar.
1) How to show divider between menu items like as show in the image.
I tried with divider styles and custom styles but it doesn`t reflect in my action bar.
2) How can I add multiple menu items into a single menu item like as show in the picture.
I tried with custom layout but overflow menu for the items is not showing.
I tried with PopupMenu for the overflow menu but the icon is not visible in overflow list.
Here I was using styles for the action bar application, styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:textAllCaps">false</item>
<item name="android:actionMenuTextAppearance">#style/AppTheme.ActionBar.MenuTextStyle</item>
<item name="android:actionOverflowButtonStyle">#style/OverFlow</item>
<item name="android:divider">#color/dividercolor</item>
</style>
<style name="OverFlow" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/ic_actionbar_dots</item>
</style>
<style name="AppTheme.ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:height">100dip</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.Text</item>
<item name="android:textColor">#color/white</item>
<item name="android:divider">#drawable/divider</item>
<item name="android:showDividers">beginning</item>
<item name="android:dividerPadding">10dp</item>
</style>
<style name="AppTheme.ActionBar.MenuTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
<item name="android:textAllCaps">false</item>
<item name="android:textColor">#color/white</item>
<item name="android:textSize">26sp</item>
</style>
<style name="AppTheme.ActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textAllCaps">false</item>
<item name="android:textColor">#color/white</item>
</style>
menu.xml
<group android:id="#+id/menu_mainGroup" >
<item
android:id="#+id/connection"
android:icon="#drawable/nw_pt_calc"
android:showAsAction="always"
android:title=" ">
</item>
<item
android:id="#+id/status_menu"
android:actionLayout="#layout/application_status_overflowmenu"
android:showAsAction="ifRoom|withText">
</item>
<!--
<item
android:id="#+id/status"
android:icon="#drawable/ic_available"
android:showAsAction="always"
>
<menu>
<item
android:id="#+id/status1"
android:icon="#drawable/ic_available"
android:showAsAction="always"
android:title="#string/menu_available">
</item>
<item
android:id="#+id/status2"
android:icon="#drawable/ic_busy"
android:showAsAction="always"
android:title="#string/menu_busy">
</item>
<item
android:id="#+id/status3"
android:icon="#drawable/ic_logoff"
android:showAsAction="always"
android:title="#string/menu_logoff">
</item>
</menu>
</item>
<item
android:id="#+id/display_pic"
android:icon="#drawable/ic_person"
android:showAsAction="always">
</item>
<item
android:id="#+id/display_name"
android:showAsAction="always">
</item>
-->
<item
android:id="#+id/menu_search"
android:icon="#drawable/ic_search"
android:showAsAction="always"
android:visible="false">
</item>
<item
android:id="#+id/help"
android:icon="#drawable/ic_help"
android:showAsAction="always"
android:visible="false">
</item>
<item
android:id="#+id/about"
android:showAsAction="never"
android:title="#string/about">
</item>
<!--
<item
android:id="#+id/notification_history"
android:showAsAction="never"
android:title="#string/notification_history">
</item>
<item
android:id="#+id/comm_msg_history"
android:showAsAction="never"
android:title="#string/comm_msg_history">
</item>
-->
</group>
Help will be appreciated. Thanks looking forward to hear answers from geeks :).
I don't know if you have resolved your problem. But I can explain you just in case.
First of all, to customize the divider in your ActionBar, you must to do this in your Theme with the parent ActionButton. You do this:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:divider">#color/dividercolor</item>
</style>
<style name="AppTheme.ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:divider">#drawable/divider</item>
</style>
Try this way:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionButtonStyle">#style/ActionButton</item>
<item name="android:actionBarDivider">#color/blue</item>
<item name="actionBarDivider">#color/blue</item>
</style>
<style name="ActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#color/blue</item>
</style>
You can read the solution here: Can't change color of actionBar divider and there: ActionBar MenuItem Divider.
Then, you can create a 9-Patch drawable to look like exactly at your image. Try to use something like this image:
The black border indicate where expand your image. I did it on the left/right sides to expand your divider on its height. You can read Draw 9-patch from the Documentation to know how use the Draw 9-Patch tool in the sdk.
Or, you can make it in xml, something like below:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- first line vertical blue -->
<item android:left="1dp">
<shape android:shape="line">
<stroke
android:color="#color/blue"
android:width="1dp" />
</shape>
</item>
<!-- second line vertical white -->
<item android:right="1dp">
<shape android:shape="line">
<stroke
android:color="#color/white"
android:width="1dp" />
</shape>
</item>
</layer-list>
After that, you just have to declare it in your style.xml as:
<item ...>#drawable/blue_divider</item>.
Now you have customize divider (=
Then, your custom layout in ActionBar.
It's possible to do as below:
ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.application_status_overflowmenu);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM|
ActionBar.DISPLAY_SHOW_HOME);
And application_status_overflowmenu.xml will be something like:
<RelativeLayout
android="#+id/theCustomIcon"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_gravity="right" android:gravity="center"
android:paddingLeft="10dp" android:paddingRight="10dp"
android:clickable="true" >
<ImageView
android:id="#+id/blockCustomIcon"
android:layout_width="50dp" android:layout_height="50dp"
android:src="#drawable/green_block"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
<ImageView
android:id="#+id/imgCustomIcon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/green_block"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/blockCustomIcon" />
<TextView
android:id="#+id/txtCustomIcon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/green_block"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:gravity="left" />
</RelativeLayout>
And finally, you can have access to the Views to update the items:
TextView text = (TextView) actionBar.getCustomView().findViewById(R.id.txtCustomIcon);
text.setText("Emily Nichols");
That's all!
If your menu options disappears, check if your onCreateOptionsMenu is inflating a good layout and if it return true. You can also add the custom item in front of options menu or add item dynamically. I let you do this as you want.
I hope this will be useful and it will helpful too.
I have follow the answer in Android: Create a toggle button with image and no text everything was fine but when I load my application and when I click on my toggle button, nothing happen like it didn't change from off state to on state. So what do i have to do to make the sliding works? Do i need to code anything if yes what should i code?
Thanks
btn_toggle_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background"
android:drawable="#android:color/transparent" />
<item android:id="#+android:id/toggle"
android:drawable="#drawable/btn_toggle" />
</layer-list>
btn_toggle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="#drawable/close" />
<item android:state_checked="true"
android:drawable="#drawable/open" />
</selector>
layout.xml
<ToggleButton
android:id="#+id/toggleButton"
style="#style/toggleButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/btn_toggle_bg"
android:onClick="onToggleClicked"
android:layout_marginLeft="150dp" />
style.xml
<style name="Widget.Button.Toggle" parent="android:Widget">
<item name="android:background">#drawable/btn_toggle_bg</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
<style name="toggleButton" parent="#android:Theme.Black">
<item name="android:buttonStyleToggle">#style/Widget.Button.Toggle</item>
</style>
Follow the three steps and after it all your app's togglebutton got the new style!
toggle.xml: (drawable-folder)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/toggle_off" />
<item android:state_checked="true" android:drawable="#drawable/toggle_on" />
</selector>
styles.xml: (values-folder)
<style name="toggle" parent="#android:style/Widget.Button.Toggle">
<item name="android:background">#drawable/toggle</item>
<item name="android:textOn"> </item>
<item name="android:textOff"> </item>
</style>
and last step you have to teach the current AppTheme that you have a custom toggle-button:
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:buttonStyleToggle">#style/toggle</item>
</style>