135

I wonder if I can draw rectangle in XML. I know how to draw using drawRect method programmatically.

A-Sharabiani
  • 17,750
  • 17
  • 113
  • 128
user1301568
  • 2,103
  • 4
  • 25
  • 32
  • 1
    saying XML means all and nothing, i.e. anything... – ShinTakezou Apr 12 '12 at 13:50
  • What's the purpose of using XML? drawRect works on Canvas, which is usually used in creating custom views. – 0xC0DED00D Apr 12 '12 at 13:52
  • I completely diagree with @Creator, we rarely use Canvas unless it is for something a little more complex. The XML version makes it easy to change the background across the entire app for particular UI elements , as a result of the attributes being defined in one location. – Graham Smith Apr 12 '12 at 14:16
  • @GrahamSmith I asked for the purpose, so that I can get to know what he wanted to do with this. You might rarely use a Canvas, I used it many times developing Games. Nothing to agree or disagree here. – 0xC0DED00D Apr 13 '12 at 05:50
  • @creator sorry I think I misinterpreted the tone of comment as "why would you bother?". My apologies. – Graham Smith Apr 13 '12 at 10:07
  • you can easily draw rectangle by making resource file – Muhammad Yaseen Mar 05 '20 at 11:07

7 Answers7

264

Yes you can and here is one I made earlier:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="2dp" android:color="#ff207d94" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="5dp" />
    <solid android:color="#ffffffff" />
</shape>

You can create a new XML file inside the drawable folder, and add the above code, then save it as rectangle.xml.

To use it inside a layout you would set the android:background attribute to the new drawable shape. The shape we have defined does not have any dimensions, and therefore will take the dimensions of the View that is defined in the layout.

So putting it all together:

<View
    android:id="@+id/myRectangleView"
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:background="@drawable/rectangle"/>

Finally; you can set this rectangle to be the background of any View, although for ImageViews you would use android:src. This means you could use the rectangle as the background for ListViews, TextViews...etc.

Graham Smith
  • 25,627
  • 10
  • 46
  • 69
37

Create rectangle.xml using Shape Drawable Like this put in to your Drawable Folder... 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
   <solid android:color="@android:color/transparent"/>
   <corners android:radius="12px"/> 
   <stroke  android:width="2dip" android:color="#000000"/>  
</shape>

put it in to an ImageView

<ImageView 
android:id="@+id/rectimage" 
android:layout_height="150dp" 
android:layout_width="150dp" 
android:src="@drawable/rectangle">
</ImageView>

Hope this will help you.

Nishant Rajput
  • 2,053
  • 16
  • 28
24

Quick and dirty way:

<View
    android:id="@+id/colored_bar"
    android:layout_width="48dp"
    android:layout_height="3dp"
    android:background="@color/bar_red" />
Pimentoso
  • 673
  • 8
  • 14
8

try this

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_marginTop="5dp"
                    android:layout_height="wrap_content">

                    <View
                        android:layout_width="15dp"
                        android:layout_height="15dp"
                        android:background="#3fe1fa" />

                    <TextView
                        android:textSize="12dp"
                        android:paddingLeft="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:text="1700 Market Street"
                        android:id="@+id/textView8" />
                </TableRow>

output

enter image description here

Thamays
  • 2,978
  • 26
  • 31
2

Use this code

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

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:radius="0.1dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />

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

    <stroke
        android:width="2dp"
        android:color="#25aaff" />

</shape>
Joel Bodenmann
  • 2,152
  • 2
  • 17
  • 44
Fakhriddin Abdullaev
  • 4,169
  • 2
  • 35
  • 37
0

create resource file in drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3b5998" />
<cornersandroid:radius="15dp"/>

Muhammad Kamran
  • 21
  • 1
0

First Create a rectangle vector asset then //Put this code inside the rectangle drawable file and use this drawable(rectangle) as background.i,e - android:background="@drawable/baseline_rectangle_24"

<?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
        <stroke android:width="2dp" android:color="#C4C4C4" />
        <padding android:left="2dp"
            android:top="2dp"
            android:right="2dp"
            android:bottom="2dp" />
        <corners android:radius="15dp" />
        <solid android:color="#FFFFFF" />
    </shape>
Anand Nishad
  • 3
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 08 '22 at 14:00