I have few buttons.
I'd like to change color of a button when it is pressed.
And to change color of other buttons to normal state.
The problem is that after simple changing the background of a button,
it's shape is also changed. After changing the color the default android
button with shadows
is just replaced with painted rectangle with more button height.
Yes. It is possible to define button in normal and pressed positions as drawable XMLs.
But I'd like to use default android buttons instead of fancy mine.
My code is below:
buttonAny.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
buttonAny.setBackgroundColor(COLOR_BUTTON_SELECTED);
buttonMale.setBackgroundColor(COLOR_BUTTON_GRAY);
buttonFemale.setBackgroundColor(COLOR_BUTTON_GRAY);
}
});
buttonMale.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
buttonAny.setBackgroundColor(COLOR_BUTTON_GRAY);
buttonMale.setBackgroundColor(COLOR_BUTTON_SELECTED);
buttonFemale.setBackgroundColor(COLOR_BUTTON_GRAY);
}
});
XML:
<Button
android:id="#+id/buttonGenderAny"
android:layout_marginLeft="#dimen/dim1"
android:layout_marginRight="#dimen/dim1"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text='Any'
android:textColor="#color/text1"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/buttonGenderMale"
android:layout_marginLeft="#dimen/dim1"
android:layout_marginRight="#dimen/dim1"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text='Male'
android:textColor="#color/text1"
android:textAppearance="?android:attr/textAppearanceSmall" />
My app after start looks as follows
pic1
(Sorry I have not permission to post images)
After I press a button it is as follows:
pic2
Very strange, that the size of the buttons was changed.
There are many similar questions in google.
But it seems they do not suit me.
For example this link.
But there is not written how to define normal or pressed button in drawable.
So. What is the best way to change (switch) colors of a few buttons.
Thanks!
create a new xml file under your drawable resourses with the properties you want to apply to your button... for example...
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#c53e2b" />
<gradient android:angle="-90" android:startColor="#a11005" android:endColor="#d62608" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#c53e2b" />
<solid android:color="#e0341e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#c53e2b" />
<gradient android:angle="-90" android:startColor="#ff6c52" android:endColor="#e0341e" />
</shape>
</item>
</selector>
then in the on click listener aplyy it like this...
buttonMale.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
buttonAny.setBackgroundResource(R.drawable.YOUR_XML_NAME);
buttonMale.setBackgroundResource(R.drawable.YOUR_XML_NAME);
buttonFemale.setBackgroundResource(R.drawable.YOUR_XML_NAME);
}
});
Yeah, don't try to change the button color in your onClick event.
What you are looking for is a StateListDrawable. As an example, check out how the Android platform defines the drawable btn_default_holo_light. You will want to follow exactly this pattern, providing your own drawables (e.g. PNG images) for the different states.
Once you've got these drawables created, you simply reference it in your layout file like this
<Button
...
android:background="#drawable/my_fancy_button_background" />
You can do it like this,create a xml file int project's res/drawable,eg:"buttonGenderAny_bg.xml":
<?xml version="1.0" encoding="utf-8"?>
<item android:drawable="COLOR_BUTTON_SELECTED" android:state_pressed="true"/>
<item android:drawable="COLOR_BUTTON_SELECTED" android:state_focused="true"/>
<item android:drawable="COLOR_BUTTON_SELECTED" android:state_selected="true"/>
<item android:drawable="COLOR_BUTTON_GRAY"/>
then set button's background in layout xml file,eg:
<Button
android:id="#+id/buttonGenderMale"
android:layout_marginLeft="#dimen/dim1"
android:layout_marginRight="#dimen/dim1"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text='Male'
android:textColor="#color/text1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:background="#drawable/buttonGenderAny_bg"/>
Actually I also did some thing like this a few months back with buttons, but I don't recommend it. I think for your situation it is much simpler to use radio buttons.
This is what it looked like!
The advantage of using the RadioGroup method is that you do not have to manage the color state of your "buttons"
To setup the following 3 or 4 files are needed (This is my EXACT usage, but I have also provided a few hints on how to get it like how you want it):
Layout:
<RadioGroup
android:id="#+id/sortOptionsBar"
style="?android:attr/buttonBarStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checkedButton="#+id/rbSortOption1"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/rbSortOption1"
style="#style/menu_buttons"
android:text="#string/sort_option1" />
<RadioButton
android:id="#+id/rbSortOption2"
style="#style/menu_buttons"
android:text="#string/sort_option2" />
<RadioButton
android:id="#+id/rbSortOption3"
style="#style/menu_buttons"
android:text="#string/sort_option3" />
</RadioGroup>
HINT: Above I wanted mine to look like a bar, for yours switch the android:orientation="horizontal" to vertical.
values\style.xml (To bring together all the styling for the radio buttons)
<style name="menu_buttons" parent="#android:style/Widget.Holo.Button.Borderless">
<item name="android:textColor">#color/menu_button_text</item>
<item name="android:background">#color/menu_button_background</item>
<item name="android:button">#android:color/transparent</item>
<item name="android:layout_weight">1.0</item>
</style>
What is important to note is the android:button above, this hides the checkbox of the radiobutton
You can also remove the android:layout_weight I used this in my bar so that all the radio buttons would get equal width.
The parent="#android:style/Widget.Holo.Button.Borderless" will allow you to keep the buttons the same size.
color\menu_button_background.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_pressed="true" android:drawable="#drawable/menu_button_unselected" />
<item android:state_pressed="true" android:drawable="#drawable/menu_button_selected" />
<item android:state_checked="true" android:drawable="#drawable/menu_button_selected" />
<item android:drawable="#drawable/menu_button_unselected" />
</selector>
The same can be done for the #color/menu_button_text. (For example you could invert the color of the text when it is selected)
Then to know which one is selected in the onCheckedChanged event I did this.
int id = sortBar.getCheckedRadioButtonId();
switch (id) {
case R.id.rbSortOption1:
break;
case R.id.rbSortOption2:
break;
case R.id.rbSortOption3:
break;
}
Instead of trying to change colors in the code just use a selector for all the buttons as the background property of each button.
Selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"><color android:color="#color/button_background_pressed" />
</item>
<item android:state_pressed="true"><color android:color="#color/button_background_pressed" />
</item>
<item><color android:color="#color/button_background" />
</item>
</selector>
EDIT:
You can create a selector with the above XML in your drawable folder and just use it as a background with "#drawable/selector_button"
EDIT 2:
Instead of using it like this:
<Button
android:id="#+id/buttonGenderMale"
android:layout_marginLeft="#dimen/dim1"
android:layout_marginRight="#dimen/dim1"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text='Male'
android:textColor="#color/text1"
android:textAppearance="?android:attr/textAppearanceSmall" />
Use it like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="1dip" />
<Button
android:id="#+id/buttonGenderMale"
android:layout_marginLeft="#dimen/dim1"
android:layout_marginRight="#dimen/dim1"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text='Male'
android:textColor="#color/text1"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
Adjust the View for the distance you want between buttons!
All you have to do is create an xml file in the drawable folder which will set the back ground colour of your buttons according to the states i.e pressed or not.
For example create a file and call it button_background.xml and place it in drawable folder.The in the file put the following
<item android:state_pressed="true" >
<shape android:shape="rectangle">
<solid android:color="#449def" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#2f6699" />
</item>
Then in your button background attribute
<Button
android:background="#drawable/button_background"/>
You can edit the colors in the button_background file to your taste.
Related
I can't center my drawableLeft icon.
I can easily put icon on the left of text, but if I set gravity to center, then only text is centered, but no icon.
<Button
android:id="#+id/patient_list_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/patientList"
android:drawableLeft="#drawable/ic_icon_two_heads"
android:layout_marginBottom="15dp"
style="#style/darkBlueButtonWithImage"/>
This is what I want:
This is what I have:
<style name="darkBlueButtonWithImage">
<item name="android:drawablePadding">10dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:background">#drawable/radius_dark_blue_button</item>
<item name="android:gravity">center_vertical|left</item>
<item name="android:drawableTint">#color/white</item> <!-- has to be set in activity.java -->
</style>
How can I achieve this?
Finally, after all these years, we have possibility to achieve such behavior in simple and intuitive way.
All you have to do is use MaterialButton from Google Material library. Then use style with icon. After that you can use app:iconGravity property and set it to textStart
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
app:iconGravity="textStart"
app:icon="#drawable/some_icon" />
The easiest solution IMO:
yourButtonView.text = SpannableString(" ${getString(R.string.your_string)}").apply {
setSpan(
ImageSpan(requireContext(), R.drawable.your_icon),
0,
1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
}
Is a bit hacky? Maybe. Does it work with every button (MaterialButton, AppCompatButton, Button, etc)? It does.
I prefer this rather than going with all the hassle of creating a custom view or something like that.
After giving Google's approach a try over 9000 times, I almost always ended up using a ViewGroup to put both side by side, particularly a RelativeLayout or LinearLayout and then adding an ImageView and a TextView. It's lame, but drawableStart/End have so many missing features that you'll waste a lot of time before you realize "you can't do it".
Alignments, tinting, Vectors, etc. All those things are harder or impossible with the "built in" drawable.
Using Button attributes android:drawableLeft and android:drawablePadding you won't be able to get your expected result. You can create a custom button using RelativeLayout or LinearLayout, TextView and ImageView. Use <selector> to define your button state(normal/pressed) behavior.
Here is an working example. Try this:
<!--- Custom Button -->
<RelativeLayout
android:id="#+id/patient_list_button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:clickable="true"
android:background="#drawable/custom_button_selector">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:gravity="center_vertical">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/icon_refresh"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:textSize="16dp"
android:text="CUSTOM BUTTON"
android:textStyle="bold"
android:textColor="#FFFFFF"/>
</LinearLayout>
</RelativeLayout>
custom_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/bg_custom_button_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/bg_custom_button_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/bg_custom_button_normal" />
</selector>
bg_custom_button_normal.xml
<?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="#01A1DD" >
</solid>
<!-- Here is the corner radius -->
<corners android:radius="8dp" >
</corners>
</shape>
bg_custom_button_pressed.xml
<?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="#303F9F">
</solid>
<!-- Here is the corner radius -->
<corners android:radius="8dp" >
</corners>
</shape>
OUTPUT:
Hope this will help~
a) Increase "paddingLeft" value and shrink or remove "drawablePadding" in your case, adjust the value to a proper one; for example:
android:paddingLeft="50dp"
android:gravity="center_vertical|left"
b) Use a custom view.
A bit hacky solution:
<TextView
android:id="#+id/tv_whatsapp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/tv_call"
app:layout_constraintTop_toBottomOf="#id/tv_completed_message_desc"
android:layout_width="0dp"
android:layout_height="40dp"
android:textStyle="normal"
android:layout_marginTop="#dimen/rs_dp_13"
android:layout_marginRight="#dimen/rs_dp_12"
android:background="#drawable/rs_dark_teal_rectangle_bg"
android:textSize="14sp"
android:textColor="#color/dark_teal"
**android:paddingHorizontal="38dp"**
android:includeFontPadding="false"
**android:drawableStart="#drawable/rs_user_journey_whatsapp_icon"**
**android:drawableLeft="#drawable/rs_user_journey_whatsapp_icon"**
android:visibility="visible"
android:letterSpacing="0.04"
app:layout_constraintHorizontal_chainStyle="packed"
**android:gravity="center_vertical|end"**
android:text="Whatsapp"/>
Setting horizontal padding along with gravity as center_vertical|end will achieve the required behaviour. You can increase/decrease the padding as per requirement.
I'm trying to create a custom switch like this:
What I feel like I need is something like a left/right drawable each in a green/white state, or alternatively a green outline with a drawable for when the choice should be selected.
What I don't understand in posts like this is how all the sample drawables provided slant to the right, and yet the 'on' button slants to the left.
I'm trying with the following 'thumb' drawable.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/choice_right"/>
<item android:drawable="#drawable/choice_left"/>
</selector>
but it seems to cut the ends off the drawables. If I also set a track to something like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/text_input"/>
<corners
android:radius="1dp"
android:bottomLeftRadius="4.5dp"
android:bottomRightRadius="4.5dp"
android:topLeftRadius="4.5dp"
android:topRightRadius="4.5dp" >
</corners>
</shape>
then all I get is a thin line. So, I'm not sure what to try next.
This cannot be with styling alone, this needs custom view implementation. Thats lot of code so my suggestion for you would be to use 3rd party libraries like
https://github.com/hoang8f/android-segmented-control
This library is tried and tested so its safe to use it instead of rewriting it.
I have created an example app that you can find here that should solve your problem. You can have a look at this library that has a proper implementation of the segment control.
Basically I created a custom control that extends LinearLayout with a default weightSum of 2. Two Buttons are added with a weight of 1 and some logic is applied to toggle between them. On toggle an custom event is fired that is built on this interface.
public interface SwitchToggleListener {
void onSwitchToggle(SwitchToggleState switchToggleState);
}
I used drawable resources to style the buttons.
The final result looked like this
you can used RadioGroup with two RadioButton:
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal">
<RadioButton
android:id="#+id/male_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/selector_radio_btn_text"
android:background="#drawable/selector_radio_btn_left_bg"
android:gravity="center"
android:button="#null"
android:text="#string/male_radio_text"
/>
<RadioButton
android:id="#+id/female_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/selector_radio_btn_text"
android:background="#drawable/selector_radio_btn_right_bg"
android:gravity="center"
android:button="#null"
android:text="#string/female_radio_text"/>
</RadioGroup>
where selector_radio_btn_text.xml is text color selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/checkbox_text_color_checked"/>
<item android:state_checked="false" android:color="#color/checkbox_text_color"/>
and selector_radio_btn_left_bg(right bg).xml is backgorund of left and right side
Instead of his using any external libaray or support library this can be done easily by using RadioGroup and radio buttons. As "Dimitry " has mentioned in his answer I too have used the same thing to achieve.
Here is the copy paste of my answer given for the question How to custom switch button?
<RadioGroup
android:checkedButton="#+id/offer"
android:id="#+id/toggle"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginBottom="#dimen/margin_medium"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="#dimen/margin_medium"
android:background="#drawable/pink_out_line"
android:orientation="horizontal">
<RadioButton
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:id="#+id/search"
android:background="#drawable/toggle_widget_background"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="#null"
android:gravity="center"
android:text="Search"
android:textColor="#color/white" />
<RadioButton
android:layout_marginRight="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:id="#+id/offer"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/toggle_widget_background"
android:button="#null"
android:gravity="center"
android:text="Offers"
android:textColor="#color/white" />
</RadioGroup>
pink_out_line.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#80000000" />
<stroke
android:width="1dp"
android:color="#color/pink" />
</shape>
toggle_widget_background.xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/pink" android:state_checked="true" />
<item android:drawable="#color/dark_pink" android:state_pressed="true" />
<item android:drawable="#color/transparent" />
</selector>
Update answer
to do this you should create layer-list in drawable folder
res/drawable/toggle_layerlist.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/choice_right">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/text_input"/>
<corners
android:radius="1dp"
android:bottomLeftRadius="4.5dp"
android:bottomRightRadius="4.5dp"
android:topLeftRadius="4.5dp"
android:topRightRadius="4.5dp" >
</corners>
</shape>
</item>
</layer-list>
add layer list to your selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/toggle_layerlist" android:state_checked="true" />
</selector>
use this selector as background , but make sure you empty text in on/off state
by set android:textOff="" android:textOn=""
<ToggleButton
android:id="#+id/chkState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/toggle_selector"
android:textOff=""
android:textOn=""/>
do the same to other state
I design my button in round shape by using this below code and then i want to show some text on button so i used Frame Layout and then i put some text on my button.
Now the Challange is that my button is still.it doesnot show any effect on click
where the drawable and src both are used one for roundshape button and other for image on button (respectivitly).
Now my button doesnot make any effect on design on click how i make that effect.
<FrameLayout>
<ImageButton
android:id="#+id/btn_profile_view"
android:layout_width="70dp"
android:layout_height="67dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:onClick="compareButtonClick"
android:background="#drawable/roundedbutton"
android:src="#drawable/ic_action_person" />
<TextView
android:layout_width="45dp"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:layout_marginLeft="38dp"
android:clickable="false"
android:text="#string/profile"
android:textColor="#color/btn_txt" >
</TextView>
</FrameLayout>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#D3D3D3" />
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip"
android:topLeftRadius="8dip"
android:topRightRadius="8dip" />
Here you will get your click call back, you dont need to set click listener anywhere
public void compareButtonClick(View v){
Toast.makeText(this, "Image Button Click", Toast.LENGTH_SHORT).show();
}
This might help, but you have to modify it to suit your need.
1) Create roundedbutton.xml in drawable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#D3D3D3" />
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip"
android:topLeftRadius="8dip"
android:topRightRadius="8dip" />
</shape>
2) Create button_normal.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/roundedbutton" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_launcher" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_launcher" android:state_focused="true"/>
<item android:drawable="#drawable/roundedbutton" android:state_focused="false" android:state_pressed="false"/>
<!-- 2 and 3 pressed and selected -->
</selector>
3) Add button_normal.xml as background to your button
android:background="#drawable/button_normal"
Create a selector with different drawables to handle the different states; enabled, disabled, clicked,focused, etc
How do I center the content of an togglebutton without any text inside specified ?
It's a togglebutton without text, but for images for each state.
Edit: Well, I ended up implementing my own ToggleImageButton.
togglebutton.buttonDrawable = ContextCompat.getDrawable(yourContext, R.drawable.your_drawable)
or in your xml
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/your_drawable"/>
You can't.
My solution for this is to use CompoundButton.
A button with two states, checked and unchecked. When the button is pressed or clicked, the state changes automatically.
I do it as my own class (extend CompundButton) and than in init function,
this.setBackground(ContextCompat.getDrawable(context, R.drawable.cell_toggle));
cell_toggle.xml (classic 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="#color/transparent" />
<item android:state_checked="true">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#color/bright_sky_blue"/>
<size
android:width="20dp"
android:height="20dp"/>
</shape>
</item>
Method setButtonDrawable for ToggleButton is not works well.
I use FrameLayout with ToggleButton and ImageView inside. Looks good but you have to use android:translationZ for the ImageView for put drawable on the top.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ToggleButton
android:layout_width="48dp"
android:layout_height="wrap_content"
android:id="#+id/type0"
android:text=""
android:textOn=""
android:textOff=""
android:onClick="onClickToggle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:translationZ="10dp"
android:src="#drawable/type_0"
/>
</FrameLayout>
i am designing for the button using the icon samples, and wish that when icon is not pressed, it is black, and become white when it is pressed. Coding as follows:
in layout xml:
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/icon_new_btn"
android:scaleType="fitXY"
android:id="#+id/newBtn" />
in icon_new_btn.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:drawableTop="#drawable/icon_new_white"
android:background="#android:color/transparent"/>>
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:drawableTop="#drawable/icon_new"
android:background="#android:color/transparent"/>
</shape>
</item>
</selector>
Question1 (seem to be solved using the below modification):
The whole button becomes invisible on the screen (it can still be pressed at that screen location!). How could I modify the above coding for meeting the purposes defined? Thanks!!
Modification but new Question (Question2):
The following modified layout and selector seem to be solving the above Question 1. Yet the resolution become much poorer and icon distorted and looks bigger. See the below screenshot for the first and second icon using the below modified codes (icon 3 to 6 are simply using android:drawableTop="#drawable/icon_save" without any pressing effect and showing higher resolution):
modified layout
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/icon_new_btn"
android:scaleType="fitXY"
android:id="#+id/newBtn" />
modified selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/icon_new_white"
android:state_pressed="true" />
<item android:drawable="#drawable/icon_new" />
</selector>
The reason your graphic is being distored is because it being set as the background. To resolve this, you can instead use an ImageButton:
<ImageButton
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:src="#drawable/icon_new_btn"
android:background="#null"
android:id="#+id/newBtn" />
Also, you had specified android:scaleType="fitXY". You might instead want android:scaleType="centerInside".
Hi I'm posting the answer for you .
create 4 xml files in res/layout.
state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button Focused-->
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#layout/state1"
/>
<!-- Button Focused Pressed-->
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#layout/state1"
/>
<!-- Button Pressed-->
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#layout/state1"
/>
<!-- Button Default Image-->
<item android:drawable="#layout/state2"/>
</selector>
state1.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" shape="rectangle">
<!--this is to give gradient effect -->
<gradient android:angle="270"
android:startColor="#6b6b6b"
android:endColor="#0e0e0e"
/>
<!-- this is make corners of button rounded -->
<corners android:topLeftRadius="5dip"
android:bottomRightRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"/>
</shape>
state2.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" shape="rectangle">
<!--this is to give gradient effect -->
<gradient android:angle="270"
android:startColor="#e7ff47"
android:endColor="#90a501"
/>
<!-- this is make corners of button rounded -->
<corners android:topLeftRadius="5dip"
android:bottomRightRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"/>
</shape>
In activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="183dp"
android:text="Click Here To Change Color"
android:background="#layout/state"/>
</RelativeLayout>
Java file
MainActivity.java
package com.example.getimage;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
thats all enjoy coding:)