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.
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?
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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With