I am trying to get the Google apps photo select UI .. Am using Appcompat checkbox to achieve that with out success. The steps I am working on ,
1. Set the checkbox background to custom circular shape
2. define custom shape in xml
This is my check box xml looks like ,
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:button="#drawable/custom_checkbox"
android:background="#drawable/checkbox_drawable"
/>
My custom checkbox background,
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#78d9ff"/>
<solid
android:color="#79bfea"/>
</shape>
My checkbox button ,
<selector>
<item android:drawable="#drawable/checkbox_drawable"
android:state_checked="false"/>
<item android:drawable="#drawable/selected_check"
android:state_checked="true"/>
</selector>
I even changed from android:background to android:button .. nothing gives me the circular check box .. Any help is appreciated ? Should I use floating action bar ? or a view ? Any suggestions ?
Custom Checkbox with two drawable image.
1. In .xml file
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/checkBox"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/checkbox_selector"
android:button="#color/white"
android:checked="true" />
2. Create checkbox_selector.xml in drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/cancel"
android:state_checked="false"/>
<item android:drawable="#drawable/checked"
android:state_checked="true"/>
</selector>
3. Add checked.png and cansel.phd image in drawable folder from the below link
https://icons8.com/icon/set/yes/all
And
https://icons8.com/icon/set/cross/all
4. Checkbox click event
AppCompatCheckBox checkBox = (AppCompatCheckBox) view.findViewById(R.id.checkBox);
checkBox.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (checkBox.isChecked()){
checkBox.setChecked(false);
}else {
checkBox.setChecked(true);
}
}
});
You need to give size to your drawable when you want to use it for button attribute.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<stroke
android:width="1dp"
android:color="#78d9ff"/>
<solid android:color="#79bfea"/>
<size
android:width="20dp"
android:height="20dp"/>
</shape>
And apply to CheckBox with android:button.
Also since this is a checkbox, you should use selector to have checked and unchecked state.
An example of selector is
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/normal"
android:state_checked="false"/>
<item android:drawable="#drawable/checked"
android:state_checked="true"/>
<item android:drawable="#drawable/normal"/>
</selector>
You may not be looking now, however i have code which seems to make circular image with checkbox please have a look at my answer given on another thread.
Click here to view answer on another thread
check my answer on the question in the link, with that you will be able to create and customise your checkbox without the need of coding
answer here
Create a custom checkbox background
custom_check_box_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_unchecked_check_box_background"
android:state_checked="false"/>
<item android:drawable="#drawable/ic_checked_check_box_background"
android:state_checked="true"/>
</selector>
After this go to the checkbox and call this xml file from the checkbox
<androidx.appcompat.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:checked="true"
android:button="#drawable/custom_check_box_background"
android:gravity="center" />
This will allow you to switch the icons based on the status of checkbox.
Note: You can add your own drawable as background to obtain your desired shape.
Related
I would like to change color of the text when CheckBox is checked. This is what I have for now:
<CheckBox
android:id="#+id/checkbox"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/states"
android:gravity="center_horizontal|center_vertical"
android:button="#null"
android:text="test/>
Checkbox background is normally changed when checkbox is checked. The problem is text. It's always the same color. How can I also change text color when checkbox is checked?
This is how I change states for checkbox background (I removed extras because of simplicity):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<layer-list >
<item>
<shape android:shape="oval">
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true" >
<layer-list >
<item>
<shape android:shape="oval">
</shape>
</item>
</layer-list >
</item>
</selector>
You can use selector as well but instead of /res/drawable put it in /res/color.
/res/color/text_my_checked.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#ffcc00"/> <!-- checked -->
<item android:color="#ffffff"/> <!-- anything else -->
</selector>
You would get this color as ColorStateList by calling getResources().getColorStateList(R.color.text_my_checked).
EDIT:
Ever since appcompat-v7 24.0.0 we can use theme references in color state lists on platforms down to API 9. This was originally introduced in API 23.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="?colorControlActivated"/> <!-- checked -->
<item android:state_checked="true" android:state_enabled="false" app:alpha="?android:disabledAlpha" android:color="?colorControlActivated"/> <!-- checked, disabled -->
<item android:color="?android:textColorPrimary"/> <!-- anything else -->
</selector>
Call AppCompatResources.getColorStateList(checkbox.getContext(), R.color.text_my_checked) to obtain the color state list.
You might do that programmatically, recalling your Checkbox and setting an onCheckedChangeListener.
CheckBox cb = (CheckBox) findViewById(R.id.checkbox);
cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) { buttonView.setTextColor(...) }
if (!isChecked) { buttonView.setTextColor(...); }
}
});
I'm not sure why there isn't mentioned setting the text color through xml.
If you create text_my_checked.xml like #Eugen mentioned.
You are able to set it in xml like this
<CheckBox
android:id="#+id/checkbox"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/states"
android:gravity="center_horizontal|center_vertical"
android:button="#null"
android:textColor="#drawable/text_my_checked"
android:text="test/>
I want to make a weekly calendar, where every day is a custom checkbox with objective to look like the image bellow:
(http://i.imgur.com/WjIKCd0.png)
When the user clicks on a day (Monday in this case), the "background" and "button" checkbox changes as well the text color...
I made the drawables and it seems to work fine... check bellow the code:
Checkbox layout:
<CheckBox
android:id="#+id/selectMonday"
android:layout_width="40dp"
android:layout_height="40dp"
android:button="#drawable/ic_none"
style="#style/CheckBoxBackgroundView"
android:onClick="selectDay"
android:text="#string/monday_letter"
android:gravity="center"
android:checked="true"/>
(the drawable "ic_none", is simple a 135x135 "transparent" image with nothing in it...)
Style (CheckBoxBackgroundView):
<style name="CheckBoxBackgroundView">
<item name="android:background">#drawable/background_day_week_picker_box_selector</item>
<item name="android:textColor">#color/text_color_day_week_picker_box_selector</item>
<item name="android:textSize">#dimen/text_spinner_text</item>
<item name="android:textStyle">bold</item>
</style>
Background Selector (background_day_week_picker_box_selector):
<?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/background_day_of_week_picker_unselected" />
<item android:state_checked="true"
android:drawable="#drawable/background_day_of_week_picker_selected" />
</selector>
Background selected (background_day_of_week_picker_selected):
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- view background color -->
<solid
android:color="#color/red_color" >
</solid>
<!-- view border color and width -->
<stroke
android:width="3dp"
android:color="#color/transparent">
</stroke>
<!-- Here is the corner radius -->
<corners
android:radius="10dp" >
</corners>
</shape>
and finally the color selector (text_color_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:color="#color/red_color"></item>
<item android:state_checked="true"
android:color="#color/white"></item>
</selector>
I tried this in several devices... in some, it appears like it suppose to, in others the text disappears and it looks like this:
(http://i.imgur.com/Jy9FrPS.png)
probably is coincidence, but all the devices that worked are below 5 inches...
is there anything wrong with my code that I'm not seeing? anyone have any suggestions?
Thanks in advance
The problem is that the 135x135 button drawable is pushing the text out of the bounds of your CheckBox's width. Instead of using a drawable, you can just set android:button="#color/transparent".
I tried to change the background color of the toggle button using XML file as white color, but the toggle button is totally damaged. It looks like all the button was covered with white.
There is no indication of ON or OFF on the toggle button when I have changed the color of the toggle button to white. Is there is another way to change the background which will not damage the indication of the toggle button?
<ToggleButton android:id="#+id/togglebutton"
android:layout_width="100px"
android:layout_height="46px"
android:background="#ffffff"
android:layout_above ="#+id/save"
android:textOn="DAY"
android:textOff="NIGHT" />
This is how my XML code look for the toggle button.
Yes, there is a way to change the background as you wish, but you have to use a selector like this as background:
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/some_image" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/some_other_image" />
<item
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/some_image1" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/other_image" />
</selector>
For #Drawable, etc. (you can use a color or make a gradient. Check this for more information about gradients.
Follow this way to make your ToogleButton have background color red when On and green when OFF
First, create tooglebutton_selector.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/togglebutton_on"
android:state_checked="true" />
<item android:drawable="#drawable/togglebutton_off"
android:state_checked="false"
/>
</selector>
Second, create togglebutton_on.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ff0000" /> // red color
</shape>
Third, create togglebutton_off.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#00FF00" /> // green color
</shape>
Finally, in your ToggleButton
<ToggleButton
android:id="#+id/btnMon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tooglebutton_selector" //set background of ToggleButton to tooglebutton_selector
/>
When you decompile your SystemUI.apk, you should go to the following file: SystemUI/res/values/colors.xml
Then change the following line:
#ff000000
#ffffffff
#80000000
#ffadc1d6
#ffffffff
#ffe6e6e6
I am using an ImageButton. But I don get the highlight when clicked. I googled and many suggested to use selector where another image is displayed. Is there any way around this. by using only one image and highlighting it or giving it a glow effect. so that the user knows that button has been clicked.
This is actually not very difficult to do. You don't even need to create 2 seperate .png files or anything like that. For instance, if you want to have a button which has a gradient, and then change it when the button is pressed:
Step 1:
Create default button gradient (drawable/default_button.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp" />
<gradient android:endColor="#8ba0bb" android:startColor="#43708f" android:angle="90" />
<stroke android:width="1dp" android:color="#33364252" />
</shape>
Step 2: Create default button pressed gradient (drawable/default_button_pressed.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp" />
<gradient android:endColor="#43708f" android:startColor="#8ba0bb" android:angle="90" />
<stroke android:width="1dp" android:color="#33364252" />
</shape>
Step 3: Create selector (drawable/default_button_selector.xml):
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="#drawable/default_button_pressed" />
<item android:drawable="#drawable/default_button" />
</selector>
Step 4 (optional): Create style for the button (values/style.xml):
<resources>
<style name="DefaultButton">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/default_button_selector</item>
</style>
</resources>
Step 5: use the button (layout/main.xml):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<button style="#style/DefaultButton" />
</RelativeLayout>
As you can see, it's not particularly difficult to do.
Without having to create multiple images (pressed, normal etc) and even don't have to create selector. Use setOnTouchListener rather than setOnClickListener. The below code will give you the grey overlay on the clicked item.
((ImageButton)findViewById(R.id.myImageBtn)).setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
ImageButton view = (ImageButton ) v;
view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);
v.invalidate();
break;
}
case MotionEvent.ACTION_UP:
// Your action here on button click
case MotionEvent.ACTION_CANCEL: {
ImageButton view = (ImageButton) v;
view.getBackground().clearColorFilter();
view.invalidate();
break;
}
}
return true;
}
});
You can simply use android:foreground for your View to achieve clickable effect:
android:foreground="?android:attr/selectableItemBackground"
For use with dark theme add also theme to your layout (to make clickable effect clear):
android:theme="#android:style/ThemeOverlay.Material.Dark"
In order not to have to set several drawable for each button I set the color filter attribute of the image button in an on touch listener.
See code here in another post:
https://stackoverflow.com/a/14278790/891479
I managed to do this!!
First you declare buttonStyle.xml in drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/button_pressed" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/button_pressed" />
<item android:drawable="#drawable/button_normal" />
</selector>
Then you create button_pressed.xml in drawable folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/semiTransparentGnfrBlueColor" />
<stroke android:width="10dp" android:color="#android:color/transparent" />
</shape>
After that, you create button_normal.xml in drawable folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="rectangle">
<solid android:color="#color/gnfrBlueColor"/>
<stroke android:width="10dp" android:color="#android:color/transparent" />
</shape>
You can use default colors but if you want to do it like me, you need to have a file named colors.xml in values folder and this values inside:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="gnfrBlueColor" type="color">#2A3748</item>
<item name="semiTransparentGnfrBlueColor" type="color">#602A3748</item>
<integer-array name="androidcolors">
<item>#color/gnfrBlueColor</item>
<item>#color/semiTransparentGnfrBlueColor</item>
</integer-array>
</resources>
Finally you set this to your button or whatever:
savedAccountLoginButton.SetBackgroundResource(Resource.Drawable.buttonStyle);
NOTICE THAT I set a stroke with color transparent because when you set backgroundresource your button becomes bigger and with this trick it remains original.
This is the only way I could archieve this programmatically.
If you want to do this by XML:
<Button
android:text="ENTRAR"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/buttonstyle"
android:textColor="#color/white"
android:textSize="18sp"
android:id="#+id/button1" />
I have a textview, I set it as clickable and focusable - how do I get it to highlight to orange (like a button) when the user focuses it with the trackwheel etc?:
TextView tv = ...;
tv.setClickable(true);
tv.setFocusable(true);
Thanks
This is quite easy. Here is the solution.
You have an TextView element with its background attribute set to #drawable/tbselector like this.
<TextView android:text="My text"
android:id="#+id/tv01"
android:layout_width="300dip"
android:layout_height="150dip"
android:layout_gravity="center_horizontal"
android:background="#drawable/tbselector"/>
The last attribute android:background is essential the other stuff is up to you.
Now you create a tbselector.xml in your drawable subdirectory. Which looks like this.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/bgdefault"
android:state_focused="false"
android:state_selected="false"/>
<item
android:drawable="#drawable/bgselected"
android:state_focused="true"
android:state_selected="false"/>
</selector>
Now you create a bgdefault.xml in your drawable subdirectory which looks like this.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="200dip"
android:height="150dip"
android:color="#00FF00"/>
<solid
android:color="#00FF00"/>
</shape>
Finally create a bgselected.xml in your drawable subdirectory which looks like the other one with other color values like this for example.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="200dip"
android:height="150dip"
android:color="#FFFF00"/>
<solid
android:color="#FFFF00"/>
</shape>
And thats it you now have a state dependent TextView background. You can however decide to set your drawables in your selector XML it's totally up to you. My values are just random values to show you the difference.
Hope it helps.
I have no chance to try it at the moment, but what about adding a OnFocusChangeListener to your TextView and then use the setBackgroundColor(int color) method to change the background to orange