CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-activity
wbk727
wbk727

Reputation: 8408

Hard coding a rectangle with a border

I would like to draw a grey rectangle which has a red border around it using XML only but I've seen this being done in many different ways and so I'd like someone to tell me which way is the best in order to achieve this? Below is my code but I want to know if there is an easier way. No java please. I only want xml.

            <RelativeLayout
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@color/red"
            android:layout_weight=".25">

            <RelativeLayout
                android:layout_width="7dp"
                android:layout_height="7dp"
                android:background="@color/grey"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

Layout not aligning

align error

        <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:background="@color/grey"
        android:layout_weight=".25" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="3"
            android:textColor="@color/black"/>

        <RelativeLayout
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@color/red"
            android:layout_weight=".25">

            <RelativeLayout
                android:layout_width="7dp"
                android:layout_height="7dp"
                android:background="@color/grey"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

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

            <RelativeLayout
                android:layout_width="12dp"
                android:layout_height="7dp"
                android:background="@color/grey"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

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

            <RelativeLayout
                android:layout_width="12dp"
                android:layout_height="7dp"
                android:background="@color/grey"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

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

            <RelativeLayout
                android:layout_width="12dp"
                android:layout_height="7dp"
                android:background="@color/grey"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="15dp"
            android:layout_height="10dp"
            android:background="@color/red"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:padding="1.5dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/grey"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

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

            <RelativeLayout
                android:layout_width="12dp"
                android:layout_height="7dp"
                android:background="@color/grey"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>
    </RelativeLayout>

Upvotes: 0

Views: 172

Answers (3)

Vigen
Vigen

Reputation: 503

LinearLayout and RelativeLayout are viewgroups. Instead them use simple View with

android:background="@drawable/rectangle" attribute (see next answer).

Upvotes: 0

Dhinakaran Thennarasu
Dhinakaran Thennarasu

Reputation: 3356

In your drawable rectangle.xml

<?xml version="1.0" encoding="UTF-8"?> 

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >

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

    <stroke
        android:width="0.5dp"
        android:color="#ff0000" >
    </stroke>

 </shape>

And your layout.

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/rectangle"
    >
    </LinearLayout>

You can change your desired color code and width of the border.

Upvotes: 1

Angad Tiwari
Angad Tiwari

Reputation: 1768

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:background="#ff0000"
android:padding="10dp">

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:background="#f4f4f4"
    >

</RelativeLayout>

Upvotes: 1

Related Questions