Draw multiple rectangles in xml drawing

Question

I am trying to figure out how to create a 3x3 row of small rectangles in an iroid file. This is actually not very close (2 small rectangles, but they overlap):

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:left="20dp" android:top="20dp" android:right="25dp" android:bottom="25dp" > <shape android:shape="rectangle"> <stroke android:width="1px" android:color="#fff" /> <solid android:color="#00FF0000" /> <corners android:radius="3dp" /> </shape> </item> <item android:left="30dp" android:top="30dp" android:right="35dp" android:bottom="25dp" > <shape android:shape="rectangle"> <stroke android:width="1px" android:color="#fff" /> <solid android:color="#00FF0000" /> <corners android:radius="3dp" /> <size android:width="10dp" android:height="10dp"/> </shape> </item> </layer-list> 

Answer 1

Part of the problem is that the individual elements in the layer list are scaled to the total size of the extracted. As described in the docs , you can get around this by wrapping small squares in a bitmap drawable. Something like this might work. First, define the main shape as a separate drawable:

range hood /square.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <stroke android:width="1px" android:color="#fff" /> <solid android:color="#00FF0000" /> <corners android:radius="3dp" /> <size android:width="10dp" android:height="10dp"/> </shape> 

Strike>

(EDIT: It would be nice if you could do the above, but unfortunately, as @Someone Somewhere noted in the comment, you cannot reference the curly drawings from the <bitmap> . To create a square like an actual bitmap so that everything the rest worked.)

Then you can define a list of layers that will not scale individual squares:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- first row --> <item android:left="20dp" android:top="20dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <item android:left="35dp" android:top="20dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <item android:left="50dp" android:top="20dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <!-- second row --> <item android:left="20dp" android:top="35dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <item android:left="35dp" android:top="35dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <item android:left="50dp" android:top="35dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <!-- third row --> <item android:left="20dp" android:top="50dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <item android:left="35dp" android:top="50dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> <item android:left="50dp" android:top="50dp"> <bitmap android:src="@drawable/square" android:gravity="top|left" /> </item> </layer-list> 

I have not tested this, so it may be a bit, but you should be able to tweak it to get what you want. It is important to get rid of scaling.

Answer 2

See the documentation for the list of layers .

It will clear that top , left , bottom and right are attributes in the dimension for element offsets: how far the element should be placed from its parent's border (list of layers).

If you know your list of layers says 130 dp wide and 130 dp high and you need 3x3 rectangles, the first offsets should be

 top: 10 left: 10 bottom: 90 right: 90 

and the following (first row, second column):

 top: 10 left: 50 bottom: 90 right: 50 

Answer 3

As already mentioned, the use of a bitmap is limited to real bitmaps; other (XML) drawings cannot be used here.

ScaleDrawables should be the solution for you. They should offer the attributes necessary to adjust their position in the resulting bounding box.

However, ScaleDrawables suffers from being designed for animation. They seem to start at level 0, which makes them invisibly small. In addition, it is not possible to set the level in XML.

If you can live with level setting in ScaleDrawables in your code, try it.

Also see this question .