Skip to main content
Version: 0.4

UI Configuration

The Fedo feedback board renders on the Material theme surface with a back arrow, so it reads as part of your app. On Android two knobs fine-tune it: FedoFeedbackScreenSlots (app bar back button) and FedoFeedbackScreenStyle (who paints the background). Below: when to use each, complete Compose examples, and the common hosting patterns.

The iOS SDK has no UI configuration options yet — FedoFeedbackView and .presentFedoCreateFeedback(isPresented:) follow the SDK's own styling and the system navigation bar.

When should you customize the UI?​

  • Hide the back button (backButtonIcon = null) when your own navigation owns back.
  • Replace the back icon for custom iconography instead of the default arrow.
  • Change the background color via containerColor when the host container supplies its own — a dialog, bottom sheet, or existing surface — or when you need a brand color.

Both knobs follow the same pattern: call the composable FedoFeedbackScreenDefaults.slots() or FedoFeedbackScreenDefaults.style() inside composition, then .copy() the field you want.

Customizing the back button with FedoFeedbackScreenSlots​

FedoFeedbackScreenSlots is the plug point for the app bar's back button. backButtonIcon is a composable lambda; null removes the button and keeps its space, so the layout does not shift.

FeedbackScreen(
    slots = FedoFeedbackScreenDefaults.slots().copy(backButtonIcon = null),
    onDismiss = { /* close */ }
)

To replace the icon with your own composable:

FeedbackScreen(
    slots = FedoFeedbackScreenDefaults.slots().copy(
        backButtonIcon = { Icon(Icons.Default.Close, contentDescription = "Close") }
    ),
    onDismiss = { /* close */ }
)

Swapping or removing the icon does not change navigation — the board still fires onDismiss on a system back press from the root list screen (see Feedback UI).

Background color with FedoFeedbackScreenStyle​

FedoFeedbackScreenStyle controls the background behind the list, details and editor screens. The default is MaterialTheme.colorScheme.surface. Call FedoFeedbackScreenDefaults.style().copy(containerColor = ...) to change it — any Color works:

// Let the host container show through
FedoFeedbackScreen(
    style = FedoFeedbackScreenDefaults.style().copy(containerColor = Color.Transparent),
    onDismiss = { /* close */ }
)
// Use a brand color
FedoFeedbackScreen(
    style = FedoFeedbackScreenDefaults.style().copy(containerColor = Color(0xFF6200EE)),
    onDismiss = { /* close */ }
)

Color.Transparent is just one option — it removes Fedo's own background paint so the host container shows through. Any androidx.compose.ui.graphics.Color value works.

Where to host FedoFeedbackScreen​

FedoFeedbackScreen() fills the Modifier you give it and belongs anywhere in your Compose hierarchy.

Inside a Dialog​

Set containerColor = Color.Transparent so the Surface is the only painted surface:

Dialog(onDismissRequest = onDismiss) {
    Surface(shape = RoundedCornerShape(16.dp), tonalElevation = 4.dp) {
        FedoFeedbackScreen(
            style = FedoFeedbackScreenDefaults.style().copy(containerColor = Color.Transparent),
            onDismiss = onDismiss
        )
    }
}

On a bottom sheet​

Build on ModalBottomSheet and host the board inside it, optionally setting containerColor = Color.Transparent so the sheet paints the background. FedoCreateFeedbackSheet() — the one-screen submission sheet — is instead self-contained and unaffected by FedoFeedbackScreenStyle; see Feedback UI.

As a navigation destination​

In a NavHost, the board behaves like any destination screen:

composable("feedback") {
    FedoFeedbackScreen(
        modifier = Modifier.fillMaxSize(),
        onDismiss = { navController.popBackStack() }
    )
}

The screen manages its own internal navigation (list → details → editor), so your NavHost only sees the root back press — wire onDismiss to your own stack; the SDK does not touch it.

Troubleshooting and FAQ​

My back button change has no effect. What am I missing?​

Two things. FedoFeedbackScreenStyle never touches the back button — FedoFeedbackScreenSlots does. And the defaults are composable: call FedoFeedbackScreenDefaults.slots() inside composition, then .copy() its result; a bare FedoFeedbackScreenSlots discards the default back icon.

I set containerColor = Color.Transparent but still see a background.​

It only stops Fedo painting — the host container may still paint (a Surface, the light theme). Host the board in a container that paints nothing either — e.g. a Dialog with a bare Box.

The screen shows "not initialized" instead of the board.​

Fedo.initialize was not called (or ran after this screen composed). Call it once at startup, before rendering the UI — see Getting Started.

FedoCreateFeedbackSheet() ignores my FedoFeedbackScreenStyle. Why?​

By design. FedoCreateFeedbackSheet() is the self-contained submission sheet, rendered as its own ModalBottomSheet; FedoFeedbackScreenStyle and FedoFeedbackScreenSlots apply to FedoFeedbackScreen() only.

Do customizations apply to iOS?​

No. The iOS SDK follows its own styling and the system navigation bar, and has no UI configuration options yet.

Last updated on