SegmentedButtonGroup background is being ignored

[Runman44]

When creating rounded buttons the background of the left-overs is from the parent and not the SegmentedButtonGroup!

setting android:background="COLOR" on SegmentedButtonGroup doesnt change this fact

[addisonElliott]

I somewhat understand the problem you're describing, but do you mind giving me a simple example I can rerun. (Sounds like we should only need the layout XML for the example)

Thanks!

[Runman44]

Thanks for responding so quickly!

<com.addisonelliott.segmentedbutton.SegmentedButtonGroup
                android:id="@+id/buttonGroup_lordOfTheRings"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="32dp"
                android:layout_marginBottom="8dp"
                android:background="@color/whiteOriginal"
                android:elevation="4dp"
                app:borderColor="@color/whiteOriginal"
                app:borderWidth="6dp"
                app:divider="@color/transparent"
                app:dividerPadding="10dp"
                app:dividerWidth="1dp"
                app:layout_constraintBottom_toTopOf="@+id/bankIbanNextButton"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/bankIbanNameEditText"
                app:layout_constraintVertical_bias="0.0"
                app:radius="360dp"
                app:selectedBackground="@color/orangeOriginal">

                <com.addisonelliott.segmentedbutton.SegmentedButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:fontFamily="@font/grotesque_regular"
                    android:padding="18dp"
                    app:selectedTextColor="@color/whiteOriginal"
                    android:background="@color/whiteOriginal"
                    app:text="Betaalrekening"
                    app:textColor="@color/grey"
                    app:rounded="true"
                    app:textSize="18sp" />

                <com.addisonelliott.segmentedbutton.SegmentedButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@color/whiteOriginal"
                    android:fontFamily="@font/grotesque_regular"
                    android:padding="18dp"
                    app:rounded="true"
                    app:selectedTextColor="@color/whiteOriginal"
                    app:text="Spaarrekening"
                    app:textColor="@color/grey"
                    app:textSize="18sp" />

            </com.addisonelliott.segmentedbutton.SegmentedButtonGroup>

[addisonElliott]

No problem. So at first glance, I don't see anything wrong with the code, so it seems like a valid bug.

I'm a bit confused that I have a similar test case as shown here:

The interesting thing is that it is showing the white background and not the gray one.

Anyway, I'll play around with this within the next few days to see if I can reproduce. There's a possibility that maybe the device you're using is having problems. I'll keep you up to date with my findings.

[addisonElliott]

Alright, I figured it out. Took me a little while to understand what was going on.

The issue is that you have app:rounded="true" in the SegmentedButton's. This does not do what you think it does and it is what is causing the problem.

Here is the PR for the rounded attribute, added in April: https://github.com/addisonElliott/SegmentedButton/pull/12

Here's the relevant line of code to explain what rounded is doing: https://github.com/addisonElliott/SegmentedButton/blob/master/library/src/main/java/com/addisonelliott/segmentedbutton/SegmentedButton.java#L971

So, the rounded attribute will round both sides of the button regardless of it's position. So the buttons were being rounded and that's why the background was bleeding through, so to speak. The purpose of the rounded attribute is for buttons with a transparent background. Look at this example in the sample code: This is the use case for the rounded attribute.

Just so I'm clear, you should remove the rounded attribute from the buttons and then it all works as expected.

So, with that in mind, I think there are some improvements that could be made to the documentation, such as:

• [x] Add another animated image on README showing this new test
• [x] Maybe link to example layout XML in README for animated preview images
• [x] Update README, particularly the rounded attribute row with better detail of what this parameter is for.

I'll be leaving this issue open for others to reference until PRs are submitted for the following changes. I won't have time to do this so I'll leave it for anyone that is interested.

[Runman44]

Thanks for replying and sorry for my late response. I have some deadlines, if I have time left I will look at fixing this problem in the code. For now a work-a-round is to have a viewgroup container with the background color as desired. That way I can still have rounded buttons!

[addisonElliott]

No problem. I'm a bit confused by your message. In terms of code/functionality, what you are wanting can be done, the primary issue is the confusion in documentation. If you take out the app:rounded attribute, you can still have rounded selected buttons just like you want.

So there should be no need for a workaround to get your code working. Does that make sense?

The functionality you want is shown in the examples with Yes/No/maybe just with different styling and such.

[Runman44]

ah, you are right using "app:selectedButtonRadius" fixed this issue for me! Thanks for responding man !

[addisonElliott]

Added additional documentation in 3.1.5