View with a border

Question

How can I modify the small rectangles so that they are grey and have a red border around them just like in this image? Here is my code. I've tried to do so but my rectangles only appear as red. I need them to be equally spaced also. In addition is it possible to use weights to define width and height rather than pixels?

Code

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:background="@android:color/red" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:background="@android:color/red"/>

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@android:color/red" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@android:color/red" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@android:color/red" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@android:color/red" />
    </RelativeLayout>

Answer 1

This is a rough example on how to do that. Here is a drawable you would use. I named it emptyrect. Save this in your drawables folder.

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

<solid android:color="#808080" /> 

<stroke
    android:width="1dp"
    android:color="#FF0000" />

</shape>

Next is your layout.

It uses 100 gravity for the width. Each emptyrect uses 20 of the 100 gravity. There are 2 linear layouts. 1 is aligned top the other is aligned bottom.

gl

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#808080" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:orientation="horizonal"
    android:weightSum="100" >

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="7" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="6" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="7" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:weightSum="100" >

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="7" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="6" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="7" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/emptyrect" />
</LinearLayout>