在android xml中将按钮排列成菱形

Question

I would like to create aa screen with four buttons, each in the shape of a diamond (like a square turned 45 degrees to the side) and all four arranged into a larger diamond.

I've searched around here on SO and managed to create this xml file which sort of hints at what I want to achieve:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/White"
android:orientation="vertical"
android:visibility="visible">


<TextView
    android:id="@+id/scoreCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge">

</TextView>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:adjustViewBounds="true"
    android:layout_weight="1.0" >


    <Button
        android:id="@+id/topLeftOuter"
        android:layout_centerInParent="true"
        android:layout_width="60dp"
        android:layout_height = "60dp"
        android:background="@color/Blue"
        android:clickable="true"
        android:visibility="visible"
        android:adjustViewBounds="true"
        android:rotation="45" >


    </Button>



</RelativeLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1.0"
    android:clickable="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:adjustViewBounds="true"
        android:layout_weight="1.0" >

    <Button
        android:id="@+id/bottomLeftOuter"
        android:layout_centerInParent="true"
        android:layout_width="60dp"
        android:layout_height = "60dp"
        android:background="@color/Yellow"
        android:clickable="true"
        android:visibility="visible"
        android:adjustViewBounds="true"
        android:rotation="45" >


    </Button>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:adjustViewBounds="true"
        android:layout_weight="1.0" >

        <Button
            android:id="@+id/bottomRightOuter"
            android:layout_centerInParent="true"
            android:layout_width="60dp"
            android:layout_height = "60dp"
            android:background="@color/Red"
            android:clickable="true"
            android:visibility="visible"
            android:adjustViewBounds="true"
            android:rotation="45" >


        </Button>

    </RelativeLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1.0"
    android:clickable="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:adjustViewBounds="true"
        android:layout_weight="1.0" >

        <Button
            android:id="@+id/topRightOuter"
            android:layout_centerInParent="true"
            android:layout_width="60dp"
            android:layout_height = "60dp"
            android:background="@color/Chartreuse"
            android:clickable="true"
            android:visibility="visible"
            android:adjustViewBounds="true"
            android:rotation="45" >


        </Button>

    </RelativeLayout>

</LinearLayout>

This is the result:

But I would like something more along the lines of this:

How should I go about getting there?

Answer 1

I think you're looking for something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff"
android:orientation="vertical"
android:visibility="visible">


<TextView
    android:id="@+id/scoreCount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge"/>




<Button
    android:id="@+id/bottomRightOuter"
    android:layout_width="90dp"
    android:layout_height = "90dp"
    android:background="#ff0000"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_marginLeft="218dp"
    android:layout_marginStart="218dp"
    android:layout_centerVertical="true"/>


<Button
    android:id="@+id/topLeftOuter"
    android:layout_width="90dp"
    android:layout_height = "90dp"
    android:background="#0022ff"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_marginBottom="67dp"
    android:layout_alignBottom="@+id/bottomRightOuter"
    android:layout_alignLeft="@+id/topRightOuter"
    android:layout_alignStart="@+id/topRightOuter"/>


<Button
    android:id="@+id/topRightOuter"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="#00ff00"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_marginTop="-23dp"
    android:layout_below="@+id/topLeftOuter"
    android:layout_centerHorizontal="true"/>


<Button
    android:id="@+id/bottomLeftOuter"
    android:layout_width="90dp"
    android:layout_height = "90dp"
    android:background="#ffd000"
    android:clickable="true"
    android:visibility="visible"
    android:adjustViewBounds="true"
    android:rotation="45"
    android:layout_centerVertical="true"
    android:layout_marginLeft="78dp"/>


</RelativeLayout>

the main point was that you needed to get rid of all those layouts

Answer 2

You can use relative layout or constraint layout to achieve this shape. It is not possible with linear layout. Try the below code using relative layout (Adjust the margins if necessary):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/White"
    android:orientation="vertical"
    android:visibility="visible">
    <TextView
        android:id="@+id/scoreCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge">

    </TextView>
    <Button
        android:id="@+id/bottomLeftOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:background="@color/colorPrimaryDark"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible">
    </Button>

    <Button
        android:id="@+id/topRightOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_above="@+id/bottomLeftOuter"
        android:layout_alignLeft="@+id/bottomLeftOuter"
        android:layout_alignStart="@+id/bottomLeftOuter"
        android:layout_marginBottom="31dp"
        android:adjustViewBounds="true"
        android:background="@color/colorPrimaryDark"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible">
    </Button>

    <Button
        android:id="@+id/bottomRightOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="45dp"
        android:adjustViewBounds="true"
        android:background="@color/colorAccent"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible"
        android:layout_alignTop="@+id/topRightOuter"
        android:layout_toRightOf="@+id/scoreCount"
        android:layout_toEndOf="@+id/scoreCount"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp">
    </Button>

    <Button
        android:id="@+id/topLeftOuter"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginLeft="31dp"
        android:layout_marginStart="28dp"
        android:adjustViewBounds="true"
        android:background="#f93"
        android:clickable="true"
        android:rotation="45"
        android:visibility="visible"
        android:layout_alignBottom="@+id/bottomRightOuter"
        android:layout_toRightOf="@+id/bottomRightOuter"
        android:layout_toEndOf="@+id/bottomRightOuter"
        android:layout_alignTop="@+id/bottomRightOuter">
    </Button>
</RelativeLayout>

Answer 3

You could try something like this

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_vertical"
                android:padding="5dp"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_vertical"
                android:padding="5dp"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:orientation="vertical">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_horizontal"
                android:padding="5dp"/>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/diamond"
                android:layout_gravity="center_horizontal"
                android:padding="5dp"/>

        </LinearLayout>


    </RelativeLayout>

</RelativeLayout>

Answer 4

I am coping and paste my project design code and do some of the changes in that so you can try this.

<RelativeLayout
        android:id="@+id/rlMain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true">
        <Button
                        android:id="@+id/btnIDGun"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnIDGun"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnDropLocation"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnParticipate"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>


                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/btnDonate"
                        android:background="@drawable/round_button"
                        android:layout_width="@dimen/btnSize_Width"
                        android:layout_height="@dimen/btnSize_Height"
                        android:layout_centerHorizontal="true"
                        android:rotation="45"
                        android:layout_centerVertical="true"/>


                </RelativeLayout>

            </LinearLayout>

        </LinearLayout>
    </RelativeLayout>

Answer 5

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
   android:orientation="horizontal"
    android:rotation="45">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@color/colorPrimary"
            android:orientation="horizontal"></LinearLayout>


        <LinearLayout
            android:id="@+id/orange"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@android:color/holo_orange_dark"
            android:orientation="horizontal"></LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@android:color/holo_red_dark"
            android:orientation="horizontal"></LinearLayout>


        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="5dp"
            android:background="@color/colorPrimary"
            android:orientation="horizontal"></LinearLayout>

    </LinearLayout>
</LinearLayout>