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. They do pick up the .tint() you set on an enclosing view: the vote button, send button, highlighted comment and default avatar use it.

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. It does use the .tint() of the enclosing view for its accent color.

Last updated on