How to change checkbox background color to match my theme color?

Question

I can not figure out how to change the background color of a checkbox in react native? I am from frontend background and have pretty little knowledge on Android. I am using react native CheckBox component and am not using any libraries for this purpose.

Let see this links and follow the steps given here. 1)https://stackoverflow.com/questions/41930297/how-to-change-background-of-android-checkbox 2)https://stackoverflow.com/questions/5854047/how-to-change-the-color-of-a-checkbox/36635925 — Rahul Kushwaha, Jan 14 '19 at 05:18
I believe these solutions work. But they are speaking in some foreign language. Can the solution be interpreted in React Nativeish way? :P — Surendra Pathak, Jan 14 '19 at 05:43

Niroshan Ranapathi · Answer 1 · 2019-01-14T05:41:35.210

0

Try this to change backgroud color of checkbox component

 <View style={{ backgroundColor:this.state.checked? 'red':'white'}}>
      <CheckBox value={this.state.checked} this.setState({ checked: !this.state.checked }) />
 </View>

Try to change change code natively

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:buttonTint="@color/CHECK_COLOR" />

for v7 older API levels:

<android.support.v7.widget.AppCompatCheckBox 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:buttonTint="@color/COLOR_HERE" />

edited Jan 14 '19 at 05:41

answered Jan 14 '19 at 05:02

Niroshan Ranapathi

3,007
1
25
35

This makes the whole view background red. I want to change the background of checkbox only when the checkbox is checked. Now, checkbox background is green when checked. – Surendra Pathak Jan 14 '19 at 05:09
you can use a custom view for checkbox and change it color programmatically when checked – Niroshan Ranapathi Jan 14 '19 at 05:13
No any props for backgroud color its should be render on view or any other container ( https://facebook.github.io/react-native/docs/checkbox ) – Niroshan Ranapathi Jan 14 '19 at 05:14
Yeah, there are no props for background color. Changing the view container does not give the desired result. Did the solution work on your end? – Surendra Pathak Jan 14 '19 at 05:19
try @SurendraPathak – Niroshan Ranapathi Jan 14 '19 at 05:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186643/discussion-between-niroshan-ranapathi-and-surendra-pathak). – Niroshan Ranapathi Jan 14 '19 at 05:29

score 0 · Answer 2 · answered Jan 14 '19 at 05:48

In order to do that if you have view you can use

int color = Color.TRANSPARENT;
Drawable background = view.getBackground();
if (background instanceof ColorDrawable)
color = ((ColorDrawable) background).getColor();

or you can use color palettes

https://material.io/design/color/the-color-system.html#color-usage-palettes

How to change checkbox background color to match my theme color?

2 Answers2