I am trying to change style of the button after clicking on it.
My plan: when user clicks on the button it change background color (orange -> white), border (none->orange border), text color (white->green).
But when I did it with drawable shape (for border as it says here), it changed background colour to orange (stroke color) and not to white (as I write for solid in shape and for buttonPressed.setBackgroundColor
method in function pressSemButton
just in case).
If I don't use drawable shape with border it works and background color changes to white.
My function for changing button's style:
public void pressSemButton(Button buttonPressed, Button button) {
buttonPressed.setBackground(getResources().getDrawable(R.drawable.orange_white_border));
buttonPressed.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.white));
buttonPressed.setTextColor(getResources().getColor(R.color.green_dark));
}
XML for orange_white_border:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="@color/white" />
<corners android:radius="30dp"/>
<stroke android:width="2dp" android:color="@color/orange_light"/>
</shape>
XML code for button in fragment's XML:
<Button
android:id="@+id/firstSemesterButton"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text= "@string/buttonFirstSem"
app:layout_constraintStart_toStartOf="parent"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
What can I do to change background color of button to white with implementing orange_white_border for border on it?
Well the way you try to implement is a little outdated. There are many new libraries and features introduced with Material Design Library. I will describe step by step how to achieve to havee a button as in your question.
In Android Studio in the Project pane, right clik on the res folder and then select new->Android Resource Directory. From the window opened up, select color for the Resource type. A color directory will be created below the res folder.
Now we need to have defined our colors in the color resource file as following:
<color name="white">#FFFFFFFF</color>
<color name="material_orange_400">#FF3D00</color>
<color name="material_green_400">#00E676</color>
Right click on the color folder we've added in step 1, choose new->Color Resource File. Make sure that the root element is selector
.
Name the new file as bg_selector since it will control the background color. And repeat this step to create 2 more files and name them stroke_selector and text_selector respectively.
Here I will list the 3 files' content:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_pressed="true"/>
<item android:color="@color/material_orange_400"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/material_orange_400" android:state_pressed="true"/>
<item android:color="@android:color/transparent"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/material_green_400" android:state_pressed="true"/>
<item android:color="@color/white"/>
</selector>
These selectors are managed by Android automatically, so you don't need to set anything when a button press detected since we used the android:state_pressed="true"
. The colors that are defined with this attribute will only be showed when the button is in the pressed state. for the rest of the states the second item's color will be shown by the system.
Now let's have a look at how our button should look like in the xml.
<Button
android:id="@+id/button_first"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:backgroundTint="@color/bg_selector"
android:text="Click me!"
android:textColor="@color/text_selector"
app:cornerRadius="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="@color/stroke_selector"
app:strokeWidth="2dp" />
Altough the buttons' default style is Material, if somehow the attributes like cornerRadius
and strokeColor
does not appear, then make sure you set the button's style to @style/Widget.MaterialComponents.Button
in order to make use of these attributes.
Finally you should get the following results:
Just exactly as you wish!