I'm trying to style my RadioButton as normal buttons and support color change on the buttons, with ripple effect when one of them is clicked.
What happens now, is that all buttons are grey, they ripple in purple when they are clicked but don't change their color to purple permenently - which is the problem I'm trying to solve.
Thisi s how he buttons look right now
RadioButton in whatever.xml
<RadioButton
style="#style/Widget.AppCompat.Button"
android:id="#+id/product_size2"
android:layout_width="48dp"
android:layout_height="48dp"
android:text="S"
android:button="#null"
android:textColor="#color/material_light_white"/>
Relevant items in style.xml
<item name="android:colorButtonNormal">#color/material_grey_700</item>
<item name="android:colorControlHighlight">#color/material_purple_500</item>
I want the buttons to stay purple when they are chosen - solution?
radiobutton_background.xml:
<?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/material_purple_500" />
<item android:state_checked="false" android:drawable="#color/material_grey_700" />
</selector>
And use it as a Background:
android:background="#drawable/radiobutton_background" />
Related
I want to create a control panel at the bottom of my screen that looks something like this.
Here is the image
And I want to simulate button press by having the clicked on item be blacked, and everything that isn't clicked be greyed out. As shown in the image, the picture icon had been clicked on.
At the moment, my solution is to overlay two rows of identical ImageViews. One layer consist of all black icons, and one layer consist of all grey icons. When I click on an image, I run a code that looks like this:
private void galleryClicked() {
mGalleryImageView_unclicked.setVisibility(View.INVISIBLE);
mPersonalImageView_unclicked.setVisibility(View.VISIBLE);
mExploreImageView_unclicked.setVisibility(View.VISIBLE);
mMenuImageView_unclicked.setVisibility(View.VISIBLE);
mGalleryImageView_clicked.setVisibility(View.VISIBLE);
mPersonalImageView_clicked.setVisibility(View.INVISIBLE);
mExploreImageView_clicked.setVisibility(View.INVISIBLE);
mMenuImageView_clicked.setVisibility(View.INVISIBLE);
}
I'm just wondering if there's a more efficient or better way of doing this. When I run this on my phone, and can feel some lag in the response. Thank you!
I have better solution, that is using selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/clicked" android:state_enabled="true" />
<item android:drawable="#drawable/unclicked" android:state_enabled="false" />
</selector>
so now you just set mGalleryImageView.setEnabled(true); or mGalleryImageView.setEnabled(false)
You can use Radiobuttons with RadioGroup, and each RadioButton has its own selector Drawable. Then the RadioGroup will take care of the selection for you (check one will uncheck all others).
Example code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioGroup
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RadioButton
android:id="#+id/item_one"
style="#style/TabItem"
android:checked="true"
android:drawableTop="#drawable/selector_tab_item_one" />
<RadioButton
android:id="#+id/item_two"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_two" />
<RadioButton
android:id="#+id/item_three"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_three" />
<RadioButton
android:id="#+id/item_four"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_four"/>
</RadioGroup>
</RelativeLayout>
Declare #style/TabItem in res/values/styles.xml:
<style name="TabItem" parent="android:style/Widget.Holo.Light.TextView">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:paddingTop">15dp</item>
<item name="android:drawablePadding">1dp</item>
<item name="android:button">#null</item>
<item name="android:background">#null</item>
<item name="android:gravity">bottom|center_horizontal</item>
</style>
The selector Drawable is like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/item_one_highlighted" android:state_checked="true"/>
<item android:drawable="#drawable/item_one_highlighted" android:state_pressed="true"/>
<item android:drawable="#drawable/item_one_default" />
</selector>
Results:
I need to do an animation for my button that changes its color from inside out without any flickering.It means the color should change from the center and the button should be stable.The button should not shrink or fade.The button color should change from the center point of button to the overall button.
res/drawable/effect.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary"/>
<item android:state_pressed="true" android:drawable="#color/your_red_color" />
</selector>
Add effect.xml as background of button:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/effect"
android:text="Click Me" />
I have many buttons for my view. Each button has different image resource. I want to change the click and hover effect for each button like this:
Button 1
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn1_selector"
android:text="name"
/>
btn1_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn1"></item>
</selector>
Button 2
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn2_selector"
android:text="name"
/>
btn2_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn2"></item>
</selector>
// etc...
The problem is that I have to create many selectors for all buttons. But I just need to change the hover state for all of them with 1 image hover_btn.png. Is there any way to have a hover state by default without creating all selectors for all buttons?
I would like to change the default button button style of Android radio buttons to suit my theme. How could I achieve that?
Create a selector drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/radio_selected" android:state_checked="true" />
<item android:drawable="#drawable/radio_normal" />
</selector>
then in your xml of the radio button
android:button="#drawable/(your drawable name)"
example:
<RadioButton
android:id="#+id/radio_button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/your_drawable_name"
android:text="your_text" />
See Adding custom radio buttons in android. Hope this helps you.
I'm developing an Android application and I use this to customize RadioButtons:
<!-- Radio button style -->
<style name="RadioButton" parent="#android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">#drawable/checkbox_unchecked</item>
</style>
But the image #drawable/checkbox_unchecked is very big.
Do you know how can I make it smaller?
I know you can achieve what you want by reducing the size of your image. But I would recommend using the following code. This will help you set images for both the unselected and selected modes.
This is how you can achieve it, in a few steps:
-Create Image Drawables for their two states (checked/unchecked).
-Create selector for this two drawables. The sample content should be something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/unchecked" />
<item android:state_checked="false" android:drawable="#drawable/checked" />
</selector>
-Add this selector as a android:button attribute to RadioButton
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_selector"
android:text="Custom RadioButton" />
</LinearLayout>