Arranging buttons into diamond shape in android xml

前端未结

关注

 5  355

I would like to create a a 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

相关标签:

5条回答

耶瑟儿～

2021-01-02 17:42

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>

0 讨论(0)

别那么骄傲

2021-01-02 17:49

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

0 讨论(0)

爱一瞬间的悲伤

2021-01-02 17:50

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>

0 讨论(0)

礼貌的吻别

2021-01-02 17:52

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>

0 讨论(0)

旧时难觅i

2021-01-02 17:58

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>

0 讨论(0)