---
title: "Tally — Shared Bill"
platform: android
slug: tally-shared-bill-android
screens: ["dashboard"]
domains: ["fintech"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "card", "badge", "segmented-control", "avatar", "checkbox", "divider", "stepper"]
score: {clean: 100, consistent: 74, accessible: 96, comprehensible: 58}
url: https://gui.farm/android/tally-shared-bill-android
raw: https://gui.farm/android/tally-shared-bill-android/design.guix
download: https://gui.farm/android/tally-shared-bill-android.gui
---

# Tally — Shared Bill

A Material 3 screen for assigning restaurant items and requesting each participant’s share.

- **Live preview:** https://gui.farm/android/tally-shared-bill-android
- **Raw source:** https://gui.farm/android/tally-shared-bill-android/design.guix
- **Download (.gui):** https://gui.farm/android/tally-shared-bill-android.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Tally — Shared Bill">
  <tokens>
    <color name="bg" value="#F7F4EE" />
    <color name="surface" value="#FEFCF7" />
    <color name="surface-low" value="#EFEDE6" />
    <color name="surface-green" value="#E3EFE7" />
    <color name="line" value="#D5D4CD" />
    <color name="ink" value="#1A1D1B" />
    <color name="body" value="#4E554F" />
    <color name="muted" value="#606761" />
    <color name="primary" value="#245B47" />
    <color name="primary-2" value="#3D745E" />
    <color name="primary-3" value="#6C9884" />
    <color name="primary-4" value="#9CB9AA" />
    <color name="on-primary" value="#F8FFF9" />
    <color name="primary-container" value="#D6EBDD" />
    <color name="on-primary-container" value="#123D2D" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="20" />
    <number name="r-xl" value="28" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Display"
      font-family="Roboto"
      font-size="36"
      font-weight="400"
      line-height="44"
      letter-spacing="-0.8"
    />
    <text-style
      name="Headline"
      font-family="Roboto"
      font-size="24"
      font-weight="400"
      line-height="32"
      letter-spacing="-0.3"
    />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="400" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" line-height="24" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%231A1D1B"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231A1D1B" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231A1D1B"
          w="15"
          h="15"
        />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%231A1D1B"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Split bill" fill="$ink" />
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/receipt-long-outline-rounded.svg?color=%234E554F"
          w="24"
          h="24"
        />
      </row>
    </row>
    <col w="fill" p="8 16 28 16" gap="24">
      <col role="card" w="328" radius="$r-xl" fill="$primary" p="20" gap="18">
        <row w="fill" gap="auto" align="top-left">
          <col gap="2">
            <text text-style="LabelMedium" value="SUNDAY SUPPER" fill="$on-primary" />
            <text text-style="Headline" value="Table for four" fill="$on-primary" />
            <text text-style="BodyMedium" value="Juniper House · 10 Aug" fill="$on-primary" />
          </col>
          <row
            role="badge"
            h="28"
            radius="$r-full"
            fill="$primary-container"
            p="0 10"
            gap="5"
            align="middle-center"
          >
            <img
              src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23123D2D"
              w="14"
              h="14"
            />
            <text text-style="LabelMedium" value="READY" fill="$on-primary-container" />
          </row>
        </row>
        <col gap="2">
          <text text-style="LabelMedium" value="TOTAL BILL" fill="$on-primary" />
          <text text-style="Display" value="AED 254.40" fill="$on-primary" />
        </col>
      </col>
      <row
        role="segmented-control"
        w="328"
        h="44"
        radius="$r-full"
        fill="$surface-low"
        p="3"
        gap="2"
        align="middle-center"
      >
        <row w="fill" h="fill" radius="$r-full" fill="$surface" align="middle-center">
          <text text-style="LabelLarge" value="By item" fill="$ink" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="Evenly" fill="$muted" />
        </row>
      </row>
      <col w="328" gap="10">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Everyone's share" fill="$ink" />
          <text text-style="LabelMedium" value="AED 254.40 assigned" fill="$primary" />
        </row>
        <row w="fill" h="hug" fill="$surface-low" radius="6" clip="true">
          <rect x="0" y="0" w="fill" h="12" radius="0" fill="$primary" />
          <rect x="79.58" y="0" w="72.14" h="12" fill="$primary-2" />
          <rect x="151.72" y="0" w="70.98" h="12" fill="$primary-3" />
          <rect x="222.70" y="0" w="73.30" h="12" radius="0" fill="$primary-4" />
        </row>
        <row w="328" gap="12">
          <col role="card" w="158" radius="$r-md" fill="$surface" border="1 $line" p="12" gap="8">
            <row w="fill" gap="auto" align="middle-left">
              <row role="avatar" w="32" h="32" radius="16" fill="$primary" align="middle-center">
                <text text-style="LabelMedium" value="M" fill="$on-primary" />
              </row>
              <text text-style="LabelMedium" value="26.9%" fill="$muted" />
            </row>
            <text text-style="TitleMedium" value="Maya" fill="$ink" />
            <text text-style="BodyLarge" value="AED 68.40" fill="$primary" />
          </col>
          <col role="card" w="158" radius="$r-md" fill="$surface" border="1 $line" p="12" gap="8">
            <row w="fill" gap="auto" align="middle-left">
              <row role="avatar" w="32" h="32" radius="16" fill="$primary-2" align="middle-center">
                <text text-style="LabelMedium" value="O" fill="$on-primary" />
              </row>
              <text text-style="LabelMedium" value="24.4%" fill="$muted" />
            </row>
            <text text-style="TitleMedium" value="Omar" fill="$ink" />
            <text text-style="BodyLarge" value="AED 62.00" fill="$primary" />
          </col>
        </row>
        <row w="328" gap="12">
          <col role="card" w="158" radius="$r-md" fill="$surface" border="1 $line" p="12" gap="8">
            <row w="fill" gap="auto" align="middle-left">
              <row role="avatar" w="32" h="32" radius="16" fill="$primary-3" align="middle-center">
                <text text-style="LabelMedium" value="L" fill="$ink" />
              </row>
              <text text-style="LabelMedium" value="24.0%" fill="$muted" />
            </row>
            <text text-style="TitleMedium" value="Lina" fill="$ink" />
            <text text-style="BodyLarge" value="AED 61.00" fill="$primary" />
          </col>
          <col role="card" w="158" radius="$r-md" fill="$surface" border="1 $line" p="12" gap="8">
            <row w="fill" gap="auto" align="middle-left">
              <row role="avatar" w="32" h="32" radius="16" fill="$primary-4" align="middle-center">
                <text text-style="LabelMedium" value="Y" fill="$ink" />
              </row>
              <text text-style="LabelMedium" value="24.8%" fill="$muted" />
            </row>
            <text text-style="TitleMedium" value="You" fill="$ink" />
            <text text-style="BodyLarge" value="AED 63.00" fill="$primary" />
          </col>
        </row>
      </col>
      <col w="328" gap="10">
        <text text-style="TitleMedium" value="Split items" fill="$ink" />
        <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" clip="true">
          <row w="fill" h="76" p="0 16" gap="12" align="middle-left">
            <row role="checkbox" w="24" h="24" radius="7" fill="$primary" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23F8FFF9"
                w="17"
                h="17"
              />
            </row>
            <col w="fill" gap="2">
              <text text-style="TitleMedium" value="Shared plates" fill="$ink" />
              <row gap="5">
                <row role="avatar" w="20" h="20" radius="10" fill="$primary" align="middle-center">
                  <text text-style="LabelSmall" value="M" fill="$on-primary" />
                </row>
                <row role="avatar" w="20" h="20" radius="10" fill="$primary-2" align="middle-center">
                  <text text-style="LabelSmall" value="O" fill="$on-primary" />
                </row>
                <row role="avatar" w="20" h="20" radius="10" fill="$primary-3" align="middle-center">
                  <text text-style="LabelSmall" value="L" fill="$ink" />
                </row>
                <row role="avatar" w="20" h="20" radius="10" fill="$primary-4" align="middle-center">
                  <text text-style="LabelSmall" value="Y" fill="$ink" />
                </row>
              </row>
            </col>
            <text text-style="TitleMedium" value="AED 163.40" fill="$ink" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="76" p="0 16" gap="12" align="middle-left">
            <row role="checkbox" w="24" h="24" radius="7" fill="$primary" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23F8FFF9"
                w="17"
                h="17"
              />
            </row>
            <col w="fill" gap="2">
              <text text-style="TitleMedium" value="Drinks" fill="$ink" />
              <text text-style="BodyMedium" value="Maya, Omar, You" fill="$muted" />
            </col>
            <text text-style="TitleMedium" value="AED 47.50" fill="$ink" />
          </row>
          <line role="divider" w="fill" fill="$line" />
          <row w="fill" h="68" p="0 16" gap="12" align="middle-left">
            <row role="checkbox" w="24" h="24" radius="7" fill="$primary" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23F8FFF9"
                w="17"
                h="17"
              />
            </row>
            <col w="fill" gap="2">
              <text text-style="TitleMedium" value="Service charge" fill="$ink" />
              <text text-style="BodyMedium" value="Split across everyone" fill="$muted" />
            </col>
            <text text-style="TitleMedium" value="AED 16.00" fill="$ink" />
          </row>
        </col>
      </col>
      <row
        role="stepper"
        w="fill"
        h="72"
        radius="$r-lg"
        fill="$surface-green"
        p="0 12 0 16"
        gap="auto"
        align="middle-left"
      >
        <col gap="2">
          <text text-style="TitleMedium" value="Tip" fill="$on-primary-container" />
          <text text-style="BodyMedium" value="12.1% of subtotal" fill="$on-primary-container" />
        </col>
        <row gap="6" align="middle-right">
          <row w="40" h="40" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%234E554F"
              w="19"
              h="19"
            />
          </row>
          <text w="72" text-style="TitleMedium" value="AED 27.50" fill="$on-primary-container" align="center" />
          <row w="40" h="40" radius="$r-full" fill="$primary-container" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23123D2D"
              w="19"
              h="19"
            />
          </row>
        </row>
      </row>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="10">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Items and service" fill="$body" />
          <text text-style="BodyMedium" value="AED 226.90" fill="$ink" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Tip" fill="$body" />
          <text text-style="BodyMedium" value="AED 27.50" fill="$ink" />
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Total assigned" fill="$ink" />
          <text text-style="TitleLarge" value="AED 254.40" fill="$primary" />
        </row>
      </col>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $line">
      <row w="fill" h="76" p="0 16" gap="12" align="middle-left">
        <col w="fill" gap="1">
          <text text-style="LabelMedium" value="4 PEOPLE" fill="$muted" />
          <text text-style="TitleLarge" value="AED 254.40" fill="$ink" />
        </col>
        <row role="button" h="52" radius="$r-full" fill="$primary" p="0 22" gap="8" align="middle-center">
          <text text-style="LabelLarge" value="Send requests" fill="$on-primary" />
          <img
            src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23F8FFF9"
            w="19"
            h="19"
          />
        </row>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$body" />
      </row>
    </col>
  </col>
</gui>
```