If possible, how do I re-create following layout in android?

Question

Layout that I am trying to re-create in android

Is it possible to re-create layout pictured about, and if so, how would I go about it? I already have custom drawables for buttons out of the way, but aligning, that I can't do. I have tried relative layout, and it partially worked until I had to re-arrange buttons for desired overlay effect sigh.

Edit: AbsolteLayout would work perfectly for this, but it is deprecated.

Edit 2: I have sorted buttons in correct order to get desired overlay, but biggest button (start) is last item and every other buttons are positioned relatively to said start button. Obvious "No resource found that matches..." error is thrown.

<?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">
  <Button
    android:id="@+id/widButtonOff"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/ignition_button_off"
    android:textSize="@dimen/ignition_button_text_size"
    android:background="@drawable/ignition_button"
    android:layout_alignLeft="@id/widButtonStr"
    android:layout_alignStart="@id/widButtonStr"
    android:layout_alignTop="@id/widButtonStr"
    android:layout_marginLeft="-48dp"
    android:layout_marginStart="-48dp"
    android:layout_marginTop="-12dp"/>

  <Button
    android:id="@+id/widButtonAcc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/ignition_button_text_size"
    android:text="@string/ignition_button_acc"
    android:background="@drawable/ignition_button"
    android:layout_alignLeft="@id/widButtonStr"
    android:layout_alignStart="@id/widButtonStr"
    android:layout_alignTop="@id/widButtonStr"
    android:layout_marginStart="-58dp"
    android:layout_marginLeft="-58dp"
    android:layout_marginTop="36dp"/>

  <Button
    android:id="@+id/widButtonIgn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/ignition_button_text_size"
    android:text="@string/ignition_button_ign"
    android:background="@drawable/ignition_button"
    android:layout_alignLeft="@id/widButtonStr"
    android:layout_alignStart="@id/widButtonStr"
    android:layout_alignTop="@id/widButtonStr"
    android:layout_marginStart="-36dp"
    android:layout_marginLeft="-36dp"
    android:layout_marginTop="82dp"/>

  <Button
    android:id="@+id/widButtonLock"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/ignition_button_text_size"
    android:text="@string/ignition_button_lock"
    android:background="@drawable/ignition_button"
    android:layout_alignLeft="@id/widButtonStr"
    android:layout_alignStart="@id/widButtonStr"
    android:layout_alignTop="@id/widButtonStr"
    android:layout_marginStart="110dp"
    android:layout_marginLeft="110dp"
    android:layout_marginTop="8dp"/>

  <Button
    android:id="@+id/widButtonAbort"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/ignition_button_text_size"
    android:text="@string/ignition_button_abort"
    android:background="@drawable/ignition_button"
    android:layout_alignLeft="@id/widButtonStr"
    android:layout_alignStart="@id/widButtonStr"
    android:layout_alignTop="@id/widButtonStr"
    android:layout_marginStart="108dp"
    android:layout_marginLeft="108dp"
    android:layout_marginTop="64dp"/>

  <Button
    android:id="@+id/widButtonStr"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/start_button_text_size"
    android:text="@string/ignition_button_start"
    android:background="@drawable/start_button"
    android:layout_centerInParent="true"/>
</RelativeLayout>

jM2.me · Answer 1 · 2014-08-31T19:48:50.937

Bingo!

Added a small dummy button in desired center position, and then aligned all the buttons relatively to the dummy button. Lastly, big button is placed over dummy button.

enter image description here

<?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">

  <Button
    android:id="@+id/dummyWidgetCenterButton"
    android:layout_width="1dp"
    android:layout_height="1dp"
    android:layout_centerInParent="true"/>

  <Button
    android:id="@+id/widButtonOff"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/dummyWidgetCenterButton"
    android:layout_alignStart="@id/dummyWidgetCenterButton"
    android:layout_alignTop="@id/dummyWidgetCenterButton"
    android:layout_marginLeft="-102dp"
    android:layout_marginStart="-102dp"
    android:layout_marginTop="-80dp"
    android:background="@drawable/ignition_button"
    android:text="@string/ignition_button_off"
    android:textSize="@dimen/ignition_button_text_size"/>

  <Button
    android:id="@+id/widButtonAcc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/dummyWidgetCenterButton"
    android:layout_alignStart="@id/dummyWidgetCenterButton"
    android:layout_alignTop="@id/dummyWidgetCenterButton"
    android:layout_marginLeft="-122dp"
    android:layout_marginStart="-122dp"
    android:layout_marginTop="-36dp"
    android:background="@drawable/ignition_button"
    android:text="@string/ignition_button_acc"
    android:textSize="@dimen/ignition_button_text_size"/>

  <Button
    android:id="@+id/widButtonIgn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/dummyWidgetCenterButton"
    android:layout_alignStart="@id/dummyWidgetCenterButton"
    android:layout_alignTop="@id/dummyWidgetCenterButton"
    android:layout_marginLeft="-108dp"
    android:layout_marginStart="-108dp"
    android:layout_marginTop="12dp"
    android:background="@drawable/ignition_button"
    android:text="@string/ignition_button_ign"
    android:textSize="@dimen/ignition_button_text_size"/>

  <Button
    android:id="@+id/widButtonLock"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/dummyWidgetCenterButton"
    android:layout_alignStart="@id/dummyWidgetCenterButton"
    android:layout_alignTop="@id/dummyWidgetCenterButton"
    android:layout_marginLeft="48dp"
    android:layout_marginStart="48dp"
    android:layout_marginTop="-54dp"
    android:background="@drawable/ignition_button"
    android:text="@string/ignition_button_lock"
    android:textSize="@dimen/ignition_button_text_size"/>

  <Button
    android:id="@+id/widButtonAbort"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/dummyWidgetCenterButton"
    android:layout_alignStart="@id/dummyWidgetCenterButton"
    android:layout_alignTop="@id/dummyWidgetCenterButton"
    android:layout_marginLeft="48dp"
    android:layout_marginStart="48dp"
    android:layout_marginTop="0dp"
    android:background="@drawable/ignition_button"
    android:text="@string/ignition_button_abort"
    android:textSize="@dimen/ignition_button_text_size"/>

  <Button
    android:id="@+id/widButtonStr"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="@drawable/start_button"
    android:text="@string/ignition_button_start"
    android:textSize="@dimen/start_button_text_size"/>
</RelativeLayout>

you could also set the button's width and height to 0 (for less calculations and improved accuracy), and also set its visibility to invisible so it would skip the onDraw call. found it all here from the comments at http://stackoverflow.com/questions/4961355/percentage-width-in-a-relativelayout/7784186#7784186 which I think it's the same page you checked — chjarder, Sep 01 '14 at 07:35

If possible, how do I re-create following layout in android?

1 Answers1