Merge "Mitigate antialiasing on button corners" into main (71fc2139) · Commits · e / os / android_frameworks_base

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,