Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 192533d7 authored by Anton Potapov's avatar Anton Potapov
Browse files

Mitigate antialiasing on button corners 

Both Expandable and OutlinedIconToggleButton have antialiasing problem when used with [androidx.compose.foundation.BorderStroke] and some contrast container color.

Flag: aconfig new_volume_panel TEAMFOOD
Test: manual on the phone with a headset
Fixes: 331182713
Change-Id: I90759bb480ceb110a22c62e93cb73544cf9895c9
parent dce24433

packages/SystemUI/compose/features/src/com/android/systemui/volume/panel/component/button/ui/composable/BottomComponentButtonSurface.kt

0 → 100644
+41 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2024 The Android Open Source Project

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *      http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



package com.android.systemui.volume.panel.component.button.ui.composable



import androidx.compose.foundation.layout.height

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Surface

import androidx.compose.runtime.Composable

import androidx.compose.ui.Modifier

import androidx.compose.ui.unit.dp



/**

 * Container to create a rim around the button. Both `Expandable` and `OutlinedIconToggleButton`

 * have antialiasing problem when used with [androidx.compose.foundation.BorderStroke] and some

 * contrast container color.

 */

// TODO(b/331584069): Remove this once antialiasing bug is fixed

@Composable

fun BottomComponentButtonSurface(modifier: Modifier = Modifier, content: @Composable () -> Unit) {

    Surface(

        modifier = modifier.height(64.dp),

        shape = RoundedCornerShape(28.dp),

        color = MaterialTheme.colorScheme.surface,

        content = content,

    )

}

packages/SystemUI/compose/features/src/com/android/systemui/volume/panel/component/button/ui/composable/ButtonComponent.kt

+16 −17
Original line number Diff line number Diff line
@@ -16,14 +16,12 @@ 


package com.android.systemui.volume.panel.component.button.ui.composable



import androidx.compose.foundation.BorderStroke

import androidx.compose.foundation.basicMarquee

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material3.MaterialTheme
@@ -64,22 +62,23 @@ class ButtonComponent( 
            verticalArrangement = Arrangement.spacedBy(12.dp),

            horizontalAlignment = Alignment.CenterHorizontally,

        ) {

            BottomComponentButtonSurface {

                Expandable(

                    modifier =

                    Modifier.height(64.dp).fillMaxWidth().semantics {

                        Modifier.fillMaxSize().padding(8.dp).semantics {

                            role = Role.Button

                            contentDescription = label

                        },

                    color = MaterialTheme.colorScheme.primaryContainer,

                    shape = RoundedCornerShape(28.dp),

                    contentColor = MaterialTheme.colorScheme.onPrimaryContainer,

                borderStroke = BorderStroke(8.dp, MaterialTheme.colorScheme.surface),

                    onClick = onClick,

                ) {

                    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

                        Icon(modifier = Modifier.size(24.dp), icon = viewModel.icon)

                    }

                }

            }

            Text(

                modifier = Modifier.clearAndSetSemantics {}.basicMarquee(),

                text = label,

packages/SystemUI/compose/features/src/com/android/systemui/volume/panel/component/button/ui/composable/ToggleButtonComponent.kt

+31 −24
Original line number Diff line number Diff line
@@ -16,23 +16,23 @@ 


package com.android.systemui.volume.panel.component.button.ui.composable



import androidx.compose.foundation.BorderStroke

import androidx.compose.foundation.basicMarquee

import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material3.IconButtonDefaults

import androidx.compose.material3.Button

import androidx.compose.material3.ButtonDefaults

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.OutlinedIconToggleButton

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.collectAsState

import androidx.compose.runtime.getValue

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.semantics.Role

import androidx.compose.ui.semantics.clearAndSetSemantics

import androidx.compose.ui.semantics.contentDescription
@@ -62,26 +62,33 @@ class ToggleButtonComponent( 
            verticalArrangement = Arrangement.spacedBy(12.dp),

            horizontalAlignment = Alignment.CenterHorizontally,

        ) {

            OutlinedIconToggleButton(

            BottomComponentButtonSurface {

                val colors =

                    if (viewModel.isChecked) {

                        ButtonDefaults.buttonColors(

                            containerColor = MaterialTheme.colorScheme.primaryContainer,

                            contentColor = MaterialTheme.colorScheme.onPrimaryContainer,

                        )

                    } else {

                        ButtonDefaults.buttonColors(

                            containerColor = Color.Transparent,

                            contentColor = MaterialTheme.colorScheme.onSurfaceVariant,

                        )

                    }

                Button(

                    modifier =

                    Modifier.height(64.dp).fillMaxWidth().semantics {

                        Modifier.fillMaxSize().padding(8.dp).semantics {

                            role = Role.Switch

                            contentDescription = label

                        },

                checked = viewModel.isChecked,

                onCheckedChange = onCheckedChange,

                    onClick = { onCheckedChange(!viewModel.isChecked) },

                    shape = RoundedCornerShape(28.dp),

                colors =

                    IconButtonDefaults.outlinedIconToggleButtonColors(

                        containerColor = MaterialTheme.colorScheme.surface,

                        contentColor = MaterialTheme.colorScheme.onSurfaceVariant,

                        checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,

                        checkedContentColor = MaterialTheme.colorScheme.onPrimaryContainer,

                    ),

                border = BorderStroke(8.dp, MaterialTheme.colorScheme.surface),

                    colors = colors

                ) {

                    Icon(modifier = Modifier.size(24.dp), icon = viewModel.icon)

                }

            }



            Text(

                modifier = Modifier.clearAndSetSemantics {}.basicMarquee(),

                text = label,