Android RadioButton shows only text, not the actual button in device emulator

Question

I have a group of radio buttons displaying fine in my XML design window, but in the emulator (and on my actual device that I installed the app on) it only shows the button text and not the button.

screenshot

Here is the XML file for this activity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Question1">

<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="25dp"
    android:layout_marginLeft="25dp"
    android:layout_marginEnd="25dp"
    android:layout_marginRight="25dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0">

    <TextView
        android:id="@+id/errorView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:text="@string/error_msg"
        android:textColor="@android:color/holo_red_light"
        android:visibility="invisible" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:text="@string/my_gender_is"
        android:textSize="20sp"
        android:textStyle="bold" />

    <RadioGroup
        android:id="@+id/gender_group"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <RadioButton
            android:id="@+id/radio_male"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="@string/male"
            android:textColor="#636363"
            android:textSize="18sp" />

        <RadioButton
            android:id="@+id/radio_female"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/female"
            android:textColor="#636363"
            android:textSize="18sp" />

    </RadioGroup>

</LinearLayout>

<Button
    android:id="@+id/nextPage"
    android:layout_width="120dp"
    android:layout_height="50dp"
    android:layout_marginStart="15dp"
    android:layout_marginLeft="15dp"
    android:layout_marginBottom="15dp"
    android:layout_weight="1"
    android:background="@color/colorPrimary"
    android:fontFamily="@font/segoeuil"
    android:gravity="center"
    android:includeFontPadding="false"
    android:paddingTop="-9dp"
    android:paddingBottom="5dp"
    android:text="@string/next"
    android:textAlignment="gravity"
    android:textAllCaps="false"
    android:textSize="26sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

Styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:colorBackground">@color/background</item>

    </style>

    <!-- No title bar theme -->
    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:colorBackground">@color/background</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:textColorPrimaryInverse">@color/primary_text_material_dark</item>
    </style>

</resources>

It looks fine in the preview but on my device and in the emulator is seems to exclude the radio buttons.

I think it has something to do with your app theme. Can you check your syles.xml file. Because your code is running fine on my device — Umair, Dec 28 '18 at 06:46
@Umair I've added my styles.xml as well as my manifest. I am using a custom theme, but I'm not entirely sure how they work. I can post my colors in the theme editor if it helps — Connor S, Dec 28 '18 at 06:55
@ConnorS Ok let me check but no need for the manifest :). Can you tell me one more thing if your activity is extending `AppCompatActivity` or `Activity`. — Umair, Dec 28 '18 at 07:00
@Umair Thank you for the help. I am extending AppCompatActivity — Connor S, Dec 28 '18 at 07:00
@ConnorS Please try my answer and check if it works for your or not. Because it seems like your styles.xml is alright. — Umair, Dec 28 '18 at 07:08
I will try it. I should mention they used to show up, until I employed the custom theme — Connor S, Dec 28 '18 at 07:08

Umair · Accepted Answer · 2018-12-29T15:42:35.303

1

You are using in a wrong way I guess use it as following:

First declare your custom styles in styles.xml file like this:

    <style name="MyRaidoButton" parent="Widget.AppCompat.CompoundButton.RadioButton">
    <item name="colorAccent">#0091ea</item>
    <item name="android:textColorPrimaryDisableOnly">#f44336</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

Once the style is done now all you need is to assign that particular style to your radio button or group like the following:

<RadioButton
android:id="@+id/products"
. . .
android:theme="@style/MyRaidoButton"/>

For more info take a look at the following links:

http://www.zoftino.com/android-ui-control-radiobutton

How to customize default theme of radio button in android?

edited Dec 29 '18 at 15:42

answered Dec 28 '18 at 07:07

Umair

6,366
15
42
50

Just tried this, didn't work. As mentioned above, the buttons used to show up until I started using a custom theme. – Connor S Dec 28 '18 at 07:11
@ConnorS there are only two themes in your styles.xml file. Can you post that specific custom theme ? – Umair Dec 28 '18 at 07:12
would that be in themes.xml? – Connor S Dec 28 '18 at 07:15
@ConnorS you should know it :). Normally all custom themes you make are in styles.xml file/folder. – Umair Dec 28 '18 at 07:17
Lol this is where my break down is happening I think. I wasn't sure how to properly implement a theme, so I just defined a bunch of colors in the color.xml file, and used theme editor to make this: https://i.imgur.com/lAdT0xl.png – Connor S Dec 28 '18 at 07:20
The NoActionBar theme in styles.xml is the one I am using – Connor S Dec 28 '18 at 07:21
@ConnorS lol you implemented the theme directly. and now can't find it :P. Can you undo it and implement it like this ? http://www.zoftino.com/android-ui-control-radiobutton or like this https://stackoverflow.com/questions/35150890/how-to-customize-default-theme-of-radio-button-in-android :) – Umair Dec 28 '18 at 07:31
Looks like it worked! The zoftino article had a good solution. I needed to create a new style that had Widget.AppCompat.CompoundButton.RadioButton as it's parent, and make each radio button use that as its theme – Connor S Dec 28 '18 at 08:37
@ConnorS you should **accept** and **upvote** this answer for doing your help. – Rumit Patel Dec 28 '18 at 09:08
Yes absolutely. However, would you mind updating the answer with that detail? The current contents of the answer did not solve the problem. It was the zoftino article that explained making a new theme with the proper parent – Connor S Dec 28 '18 at 22:03
@ConnorS yes I have updated my answer. Glad I could be of help. Happy coding :) – Umair Dec 29 '18 at 15:43

Android RadioButton shows only text, not the actual button in device emulator

1 Answers1