Thay đổi màu vòng tròn của nút radio


157

Tôi muốn thay đổi màu của vòng tròn RadioButton trong một dự án của mình , tôi không thể hiểu thuộc tính nào sẽ được đặt. Màu nền tôi đang có là màu đen để nó trở nên vô hình. Tôi muốn đặt màu của vòng tròn thành màu trắng.



Sử dụng hai hình ảnh cho nút radio, một cái được chọn và một hình ảnh khác thì không, hãy chọn hình ảnh này trên Radiobutton bằng cách sử dụng tài nguyên setbackground hoặc bằng cách sử dụng bộ chọn xml.
SAURABH_12

Câu trả lời:


286

Đơn giản hơn, chỉ cần đặt màu nútTint: (chỉ hoạt động ở cấp độ api 21 trở lên)

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:checked="true"
    android:buttonTint="@color/your_color"/>

trong giá trị / colors.xml của bạn, hãy đặt màu của bạn trong trường hợp này là màu đỏ:

<color name="your_color">#e75748</color>

Kết quả:

Nút radio Android màu

Nếu bạn muốn làm điều đó bằng mã (cả api 21 trở lên):

if(Build.VERSION.SDK_INT>=21)
{

    ColorStateList colorStateList = new ColorStateList(
            new int[][]{

                    new int[]{-android.R.attr.state_enabled}, //disabled
                    new int[]{android.R.attr.state_enabled} //enabled
            },
            new int[] {

                    Color.BLACK //disabled
                    ,Color.BLUE //enabled

            }
        );                       


    radio.setButtonTintList(colorStateList);//set the color tint list
    radio.invalidate(); //could not be necessary
}

1
@emaillenin, nếu bạn muốn thay đổi màu sắc theo mã, bạn nên sử dụng control.getDrawable().setColorFilter(getResources().getColor(color), PorterDuff.Mode.SRC_IN);đâu controllà điều khiển bạn muốn thay đổi sắc độ và colorlà giá trị nguyên của màu bạn muốn, ví dụ:R.color.red
Jorge Arimany

1
@JorgeArimany Đối với RadioButton, đó là getButtonDrawable hoặc getCompoundDrawables? getCompoundDrawables trả về một Danh sách
Lenin Raj Rajasekaran

@emaillenin, cảm ơn bạn, câu trả lời của tôi cho nhận xét của bạn là về các điều khiển khác như nút bấm, tôi đã nâng cấp câu trả lời của mình bằng cách thêm mã bạn đang tìm kiếm, hy vọng điều đó sẽ giúp bạn
Jorge Arimany

3
@JorgeArimany Tôi đã làm cho nó hoạt động được> 21 rồi .. Tôi đang tìm câu trả lời cụ thể cho <21
Lenin Raj Rajasekaran

Để thay đổi màu của nút đã chọn, bạn có thể thêm hoặc thay thế trạng thái bằng android.R.attr.state_checkedvà thêm màu.
6

159

Cập nhật: 1. sử dụng cái này thay thế

   <android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/rbtn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:buttonTint="@color/primary" />

2. Sau đó, thêm dòng này vào bố trí cha mẹ hoặc Alt + Entertrong Android Studio để tự động thêm xmlns:app="http://schemas.android.com/apk/res-auto"

Ví dụ tối thiểu sẽ trông như thế này:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/rbtn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:buttonTint="@color/primary" />

</LinearLayout>

3. Trong chương trình của bạn, nên gọi như thế này. AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);

Về cơ bản, loại mẫu này có thể được áp dụng cho tất cả các loại AppCompact như AppCompatCheckBox, AppCompatButton, v.v.

Câu trả lời cũ:

Để hỗ trợ API Android 21 bên dưới, bạn có thể sử dụng AppCompatRadioButton. Sau đó sử dụng setSupportButtonTintListphương pháp để thay đổi màu sắc. Đây là đoạn mã của tôi để tạo nút radio.

    AppCompatRadioButton rb;
    rb = new AppCompatRadioButton(mContext);

    ColorStateList colorStateList = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{

                    Color.DKGRAY
                    , Color.rgb (242,81,112),
            }
    );
    rb.setSupportButtonTintList(colorStateList);

Kết quả thử nghiệm tại API 19:

Cái này được thử nghiệm trên API 19

Xem liên kết tham khảo Android để biết thêm chi tiết.


10
Câu trả lời này nên được chấp nhận. Nếu bạn muốn thêm nút radio hỗ trợ này qua xml, hãy sử dụng<android.support.v7.widget.AppCompatRadioButton ../>
Vinayak Garg

22
setSupportButtonTintListlà một phương pháp riêng tư mà bạn không có ý định sử dụng. Các nút radio sẽ hoạt động kỳ quặc trên một số phiên bản Android nhất định. Thay vào đó, sử dụng CompoundButtonCompat.setButtonTintList(rb, colorStateList).
wampastompa 18/03/2016

2
@wampastompa nói đúng. Trên API 22, kết quả là tôi chỉ thấy một vòng tròn bên ngoài, không bao giờ được điền khi kiểm tra. @aknay; vui lòng cập nhật câu trả lời của bạn
Nino van Hooff

1
Tôi đang sử dụng API 16. Tôi thêm các nút AppCompat Radio như được liệt kê ở trên, tuy nhiên nó vẫn không hiển thị chính xác.
tccpg288

1
bạn không cần bất kỳ mã nào, xem câu trả lời của IgorOliveira. Hoạt động cho tất cả các phiên bản.
Kirill Karmazin

77
<android.support.v7.widget.AppCompatRadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:buttonTint="@color/Color" />

11
Đây là câu trả lời cho các thiết bị lollypop trước, hiện tại và sau !! Tuyệt vời
sdelvalle57

1
Đây phải là câu trả lời được chấp nhận. Ngắn gọn và hoàn hảo. LƯU Ý: sử dụng ứng dụng: buttonTint = "@ color / Color" nhưng không andoid: buttonTint = "@ color / Color"!
Kirill Karmazin

@KirillKarmazin được chấp nhận sẽ hoạt động cho <21
user924

56

Làm việc trên API trước 21 cũng như bài 21. Trong lệnh của bạn styles.xml:

<!-- custom style -->
<style name="radionbutton"
       parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
    <item name="android:button">@drawable/radiobutton_drawable</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

radio buttonXml của bạn sẽ giống như:

<RadioButton
    android:layout_width="wrap_content"
    style="@style/radionbutton"
    android:checked="false"
    android:layout_height="wrap_content"
    />

Bây giờ tất cả bạn cần làm là làm cho một radiobutton_drawable.xmltrong của bạn drawable folder. Đây là những gì bạn cần đặt trong đó:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/radio_unchecked" android:state_checked="false" android:state_focused="true"/>
  <item android:drawable="@drawable/radio_unchecked" android:state_checked="false" android:state_focused="false"/>
  <item android:drawable="@drawable/radio_checked" android:state_checked="true" android:state_focused="true"/>
  <item android:drawable="@drawable/radio_checked" android:state_checked="true" android:state_focused="false"/>
</selector>

của bạn radio_unchecked.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <stroke android:width="1dp" android:color="@color/colorAccent"/>
  <size android:width="30dp" android:height="30dp"/>
</shape>

của bạn radio_checked.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="oval">
      <stroke android:width="1dp" android:color="@color/colorAccent"/>
      <size android:width="30dp" android:height="30dp"/>
    </shape>
  </item>
  <item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
    <shape android:shape="oval">
      <solid android:width="1dp" android:color="@color/colorAccent"/>
      <size android:width="10dp" android:height="10dp"/>
    </shape>
  </item>
</layer-list>

Chỉ cần thay thế @color/colorAccentbằng màu sắc của sự lựa chọn của bạn.


Làm thế nào tôi có thể làm điều này lập trình?
tccpg288

@ tccpg288 Nếu bạn sử dụng xml này và nếu bạn muốn thay đổi màu lập trình, chỉ cần sử dụng radioButton.setChecked (false) hoặc radioButton.setChecked (true)
Vaibhav Sharma

Tôi không hiểu câu hỏi của bạn. Bạn có thể vui lòng giải thích?
Vaibhav Sharma

Lỗi của tôi, có vấn đề gì không nếu tôi sử dụng RadioButton thông thường hoặc RadioButton AppCompat?
tccpg288

1
Nó không hoạt động, còn khi tôi khởi tạo RadioButton thì sao? Đây là mã của tôi: mPollAnswerArrayList.add ((indexCreated), RadioButton mới ((getActivity (). GetApplicationContext ()), null, R.style.radiobutton));
tccpg288

18

Bạn phải sử dụng mã này:

<android.support.v7.widget.AppCompatRadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:buttonTint="@color/black"
                    android:text="Radiobutton1"
                    app:buttonTint="@color/black" />

Sử dụng app:buttonTintthay vì android:buttonTintvà cũng android.support.v7.widget.AppCompatRadioButtonthay vì Radiobutton!


16
  1. Khai báo kiểu tùy chỉnh trong tệp kiểu tệp của bạn.

    <style name="MyRadioButton" parent="Theme.AppCompat.Light">  
      <item name="colorControlNormal">@color/indigo</item>
      <item name="colorControlActivated">@color/pink</item>
    </style>  
  2. Áp dụng kiểu này cho RadioButton của bạn thông qua thuộc tính android: theme.

    <RadioButton  
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Radio Button"
        android:theme="@style/MyRadioButton"/>

    chỉ khi hoạt động của bạn kéo dài AppCompatActivity


1
Điều này nên được chấp nhận như một câu trả lời, nó hoạt động trên tất cả các phiên bản và nó sạch nhất
Antonis Radz

Tôi đã phải sử dụng <item name="android:colorControlActivated">@color/pink</item>nó để làm việc cho tôi. Tôi vẫn không chắc tại sao. Nếu không, đây là một câu trả lời tốt.
Taylor Venissat

16

Đối với API 21

Tạo kiểu tùy chỉnh RadioButton style.xml

 <style name="RadioButton" parent="Theme.AppCompat.Light">
     <item name="colorAccent">@color/green</item>
     <item name="android:textColorSecondary">@color/mediumGray</item>
     <item name="colorControlNormal">@color/red</item>
 </style>

Trong bố cục sử dụng chủ đề:

<RadioButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:theme="@style/RadioButton" />

Đối với API 21 trở lên

Chỉ cần sử dụng nútTint

 <RadioButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:buttonTint="@color/green" />

Cần được làm rõ: buttonTint hoạt động cho API 21 các ứng dụng sử dụng AppCompat / AndroidX, bất kể API
Chisko

12

Câu hỏi đã cũ nhưng tôi nghĩ câu trả lời của tôi sẽ giúp được mọi người. Bạn có thể thay đổi màu của trạng thái không được kiểm tra và kiểm tra của nút radio bằng cách sử dụng kiểu trong xml.

<RadioButton
    android:id="@+id/rb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RadioButtonStyle" />

Trong style.xml

<style name="RadioButtonStyle" parent="Theme.AppCompat.Light">
        <item name="colorAccent">@android:color/white</item>
        <item name="android:textColorSecondary">@android:color/white</item>
</style>

Bạn có thể thiết lập màu sắc mong muốn theo phong cách này.


Chủ đề bên trong RadioButton không hoạt động (nữa?). Nó gặp sự cố trong khi nhấp vào nút, vì không tìm thấy phương thức onClick, mặc dù nó ở đây.
Bevor

vấn đề này sẽ có một số lý do khác. Đảm bảo rằng bạn đang nhận được ID của chế độ xem chính xác trước khi triển khai onClick trên chế độ xem đó.
Jaura

9

Đặt thuộc buttonTinttính. Ví dụ , android:buttonTint="#99FF33".


9
Điều này chỉ sau API 21
miracle-doh

7

Tôi đã thực hiện theo cách ngắn gọn như thế này (Làm việc trên API trước 21 cũng như bài 21)

Nút radio của bạn trong xml sẽ trông như thế này

  <RadioButton android:id="@+id/radioid"                    
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"                 
                android:button="@drawable/radiodraw" />

trong radiodraw.xml

  <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">    
      <item android:state_checked="false" >
          <shape  android:shape="oval" >
              <stroke android:width="1dp" android:color="#000"/>
              <size android:width="30dp" android:height="30dp"/>
              <solid android:color="@android:color/transparent"/>
          </shape>
      </item>
      <item android:state_checked="true">
          <layer-list>
              <item>
                  <shape android:shape="oval">
                      <stroke android:width="1dp" android:color="#000"/>
                      <size android:width="30dp" android:height="30dp"/>
                      <solid android:color="@android:color/transparent"/>
                  </shape>
              </item>
              <item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
                  <shape android:shape="oval">
                      <solid android:width="1dp" android:color="#000"/>
                      <size android:width="10dp" android:height="10dp"/>
                  </shape>
              </item>
          </layer-list>
      </item>
  </selector>

phải thêm màu trong suốt để vẽ trạng thái không được kiểm tra, nếu không nó sẽ vẽ hình bầu dục màu đen đặc.


6

Đôi khi bạn chỉ cần ghi đè colorControlN normal như thế này:

    <style name="RadioButtonStyle" parent="AppTheme">
       <item name="colorControlNormal">@color/pink</item>
       <item name="colorAccent">@color/colorPrimary</item>
       <item name="android:textColorSecondary">@color/black</item>
    </style>

Và bạn sẽ nhận được một nút như thế này:

nhập mô tả hình ảnh ở đây

colorControlN normal được sử dụng cho trạng thái không được kiểm tra và colorAccent để kiểm tra.


5

Có một thuộc tính xml cho nó:

android:buttonTint="yourcolor"

Đảm bảo API tối thiểu của bạn cao hơn 21 hoặc điều này sẽ không hoạt động
Jcorretjer

bạn có thể sử dụng tính năng này để tương thích ngược: app: buttonTint = "your_color"
Mridul Das

"Make sure your min API is higher then 21 or this won't work"điều đó là sai. Tôi đang nhắm mục tiêu API 17 với AndroidX và đây là điều duy nhất hiệu quả với tôi
Chisko

3

Đối với những người muốn thay đổi vô hiệu hóa, hãy kiểm tra và kích hoạt trạng thái mà bạn mèo thực hiện các bước sau:

<!-- Or androidX radio button or material design radio button -->
<android.support.v7.widget.AppCompatRadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:buttonTint="@color/black"
                    android:text="Radiobutton1"
                    app:buttonTint="@color/radio_button_color" />

sau đó trong thư mục res màu, tạo một tệp có tên "radio_button_color.xml":

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/yellow900" android:state_selected="true" />
    <item android:color="@color/yellow800" android:state_checked="true" />
    <item android:color="@color/gray800" android:state_enabled="false" />
    <item android:color="@color/yellow800" android:state_enabled="true" />
</selector>

2
<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:buttonTint="@color/my_color"/>

Tất cả nút sẽ thay đổi màu sắc, hộp hình tròn và kiểm tra trung tâm.


1
Nhưng không phải là Ripple ;-)
Waza_Be

1

RadioButton theo mặc định sẽ lấy màu của colorAccent trong tệp res / value / colors.xml. Vì vậy, đi đến tập tin đó và thay đổi giá trị của

<color name="colorAccent">#3F51B5</color>

đến màu bạn muốn


0

Cách dễ nhất là thay đổi colourAccentmàu sắc values->colours.xml
nhưng lưu ý rằng nó cũng sẽ thay đổi những thứ khác như chỉnh sửa màu con trỏ văn bản, v.v.

< color name="colorAccent">#75aeff</color >


0

Nếu bạn muốn đặt màu khác nhau cho nút radio đã nhấp và chưa bấm, chỉ cần sử dụng:

   android:buttonTint="@drawable/radiobutton"  in xml of the radiobutton and your radiobutton.xml will be:  
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#1E88E5"/>
<item android:state_checked="true" android:color="#00e676"/>
<item android:color="#ffffff"/>


0

Chỉ cần sử dụng android:buttonTint="@color/colorPrimary"thuộc tính trên thẻ, hy vọng nó sẽ giúp


0

Tôi đã có vấn đề này. Nếu ứng dụng của bạn có nền màu đen và bạn có rất nhiều RadioButton không thể nhìn thấy do nền, thì việc chỉnh sửa android: buttonTint của mỗi cái là rất phức tạp, giải pháp tốt nhất là thay đổi chủ đề gốc trong tệp tệp style.xml của bạn

tôi đã thay đổi

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

đến

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

Vì vậy, các vòng tròn của RadioButtons đã trở thành một màu xám nhạt hơn và bây giờ chúng có thể nhìn thấy ngay cả với nền đen.

Đây là tệp style.xml của tôi:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>


-4

@ jh314 đúng. Trong AndroidManifest.xml,

 <application
    android:allowBackup="true"
    android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"></application>

Trong style.xml

  <!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/red</item>
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>

Tên mục phải là colorAccent, nó quyết định màu mặc định của widget của ứng dụng.

Nhưng nếu bạn muốn thay đổi màu trong mã, câu trả lời của Có thể @ aknay là chính xác.


Điều này không cung cấp một câu trả lời cho câu hỏi. Một khi bạn có đủ danh tiếng, bạn sẽ có thể nhận xét về bất kỳ bài đăng nào ; thay vào đó, cung cấp câu trả lời không yêu cầu làm rõ từ người hỏi . - Từ đánh giá
semirturgay

Câu trả lời của tôi là thay đổi màu cơ bản của ứng dụng và tất nhiên nó có thể thay đổi màu của radiobutton thành màu trắng.
Iturbo
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.