Android: How to draw 8 equal rectangles to fit screen width with XML

Issue

I'm new to JAVA and Android development.

Basically I would like to draw 8 equal rectangles (keyboard keys) to fit on 100% width.

As far as I know linearlayout doesn't support drawables, so sadly that piece of code doesn't work for me:

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:weightSum="2">
    <View
        android:id="@+id/keyboardKey1"
        android:background="@drawable/keyboard_key_white"
        android:weight="1"
        android:layout_width="0dip"
        android:layout_height="200dp"
        android:layout_alignTop="@+id/keyboardKeyC"
        android:layout_toRightOf="@+id/keyboardKeyA" />
    <View
        android:id="@+id/keyboardKey2"
        android:background="@drawable/keyboard_key_white"
        android:weight="1"
        android:layout_width="0dip"
        android:layout_height="200dp"
        android:layout_alignTop="@+id/keyboardKeyC"
        android:layout_toRightOf="@+id/keyboardKeyA" />
</LinearLayout>

Here are the contents of keyboard_key_while.xml as well:

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#fff" />
    <stroke
        android:width="1dp"
        android:color="#000" />
</shape>

As far as I know, I also can't do the the other way round and use linearlayout inside of the drawable XML. Can you give me suggestions of how to achieve that?

Thank you!

Solution

You can do that with a LinearLayout set to horizontal orientation and have each view inside that set an equal layout_weight and zero layout_width. You were almost there but you have to use layout_weight instead of weight.

This shows two keys taking up the width of the screen. If you put 8 views in there it scales accordingly.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <View
        android:id="@+id/keyboardKey1"
        android:layout_width="0dip"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="@drawable/keyboard_key_white" />

    <View
        android:id="@+id/keyboardKey2"
        android:layout_width="0dip"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="@drawable/keyboard_key_white" />

</LinearLayout>

Two more things

in your example you are using RelativeLayout layout parameters in the keyboard views (layout_alignTop and layout_toRightOf). However the keyboard views are being hosted by a LinearLayout and are therefore ignored so they can be left out.

Another way to do this is to use the GridLayout where you can specify how many columns and rows you want. Inside the GridLayout you specify for each child view in which column and row you want it to appear with layout_column and layout_row.

Read up on Layouts on the Android Developer API Guides.

Answered By - Rob Meeuwisse