Clever Geek Handbook

If possible, how should I recreate the following layout in android?

Layout that I am trying to re-create in android

Is it possible to recreate the layout we talked about, and if so, how should I do it? I already have custom blueprints for the buttons to the side, but the alignment that I cannot do. I tried relative layout and it partially worked until I had to rearrange the buttons for the desired overlay effect.

Edit: AbsolteLayout works great for this, but it's deprecated.

Edit 2: I sorted the buttons correctly to get the desired overlay, but the biggest button (start) is the last element and all other buttons are positioned relative to the specified launch button. Obvious error "No resource found matching ...".

<?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>
+3


source to share


1 answer


Bingo!

Added a small dummy at the desired center position and then aligned all the buttons with the dummy button. Finally, a large button is placed on top of the 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>
0


source






More articles:


All Articles