Android see-through white background with black border

Creating a See-Through White Background with a Black Border in Android

Learn how to implement a semi-transparent white background with a distinct black border for Android UI elements using XML drawables and layer-list.

Designing user interfaces often requires subtle visual cues to enhance readability and aesthetics. A common request is to have a UI element with a semi-transparent background that allows underlying content to show through, combined with a clear border to define its boundaries. This article will guide you through creating such a drawable in Android using XML, specifically leveraging the <layer-list> and <shape> elements.

Understanding Android Drawables for Custom Backgrounds

Android provides a powerful XML-based drawable system that allows developers to define custom shapes, colors, gradients, and more, which can then be used as backgrounds for views. For our specific requirement – a semi-transparent white background with a black border – we'll combine two fundamental drawable concepts: shape and layer-list.

A <shape> drawable defines a geometric shape, such as a rectangle, oval, line, or ring, and allows you to specify its fill color, stroke (border), corners, and padding. The transparency of the fill color is controlled by its alpha value in the ARGB format.

A <layer-list> drawable is a container that manages an array of other drawables. Each drawable in the list is drawn in the order it appears, with later items drawn on top of earlier ones. This is crucial for our design, as it allows us to define the border as one layer and the background as another, ensuring they are rendered correctly relative to each other.

flowchart TD
    A[Start] --> B{Define Border Shape}
    B --> C{Define Fill Shape}
    C --> D[Combine with Layer-List]
    D --> E[Apply to View Background]
    B --"Stroke (Black)"--> B
    C --"Solid (Semi-Transparent White)"--> C

Workflow for creating a custom background with border and fill.

Implementing the Drawable XML

To achieve the desired effect, we'll create an XML file in your project's res/drawable directory. Let's call it drawable_white_transparent_bg_black_border.xml. This file will contain a <layer-list> with two <item> elements. The first item will define the black border, and the second will define the semi-transparent white background, slightly inset to create the border effect.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Black Border Layer -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF000000" /> <!-- Solid Black -->
            <corners android:radius="4dp" /> <!-- Optional: Rounded corners for the border -->
        </shape>
    </item>

    <!-- Semi-Transparent White Background Layer (inset to create border) -->
    <item android:left="1dp" android:right="1dp" android:top="1dp" android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#80FFFFFF" /> <!-- 50% Transparent White (AA RR GG BB) -->
            <corners android:radius="3dp" /> <!-- Optional: Slightly smaller radius for inner shape -->
        </shape>
    </item>

</layer-list>

Applying the Custom Drawable to a View

Once you've created the XML drawable, you can easily apply it to any Android View (e.g., TextView, Button, LinearLayout, ConstraintLayout) using the android:background attribute in your layout XML file.

<!-- Example: Applying to a TextView -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, Android!"
    android:padding="16dp"
    android:background="@drawable/drawable_white_transparent_bg_black_border"
    android:textColor="#FF000000"
    android:layout_margin="20dp" />

<!-- Example: Applying to a LinearLayout -->
<LinearLayout
    android:layout_width="match_parent"
    android.layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="@drawable/drawable_white_transparent_bg_black_border"
    android:layout_margin="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content inside transparent box"
        android:textColor="#FF000000" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Action Button" />

</LinearLayout>

Alternative: Using a Stroke Element

While the layer-list approach is robust and offers great flexibility, you can also achieve a similar effect for simple cases using a single <shape> drawable with a <stroke> element. However, this method only works if the border is fully opaque and the background is semi-transparent, as the stroke is drawn inside the shape's boundaries.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#80FFFFFF" /> <!-- Semi-Transparent White -->
    <stroke
        android:width="1dp"
        android:color="#FF000000" /> <!-- Opaque Black Border -->
    <corners android:radius="4dp" />
</shape>