Photoshop Question posted in
The official user guide can be found here.

Button comes above another button when click on each of them / Android XML – Photoshop

Hello Stack Overflow, I’m new to Android!

I’m designing two buttons, that one of them is above another button like two layers in Photoshop.

Button ONE position in Android XML editor

I cannot embed photos yet!

And here’s button ONE:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="84dp"
        android:background="@drawable/empty_yellow_circle"
        android:text="1"
        app:backgroundTint="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />

Button TWO position in Android XML editor

And here’s button TWO:
<Button

    android:id="@+id/button2"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginStart="76dp"
    android:layout_marginTop="48dp"
    android:background="@drawable/full_yellow_circle"
    android:text="2"
    app:backgroundTint="@null"
    app:layout_constraintBottom_toBottomOf="@+id/button1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.558"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button1"
    app:layout_constraintVertical_bias="1.0" />

What do I want?
I want to arrange this button as photos above, button ONE always stuck below button TWO and never comes above button TWO, like two fixed layers.

But in the test run, when I click button ONE, it comes above button TWO, and vice as linked photo below.

When Click on Button ONE and vice

You can see in photo above that button ONE border comes above button TWO text.

so they are not fixed layers and the arrangement changes per click.
I want a fixed arrangement.

Thanks for helping!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As the first answer posted, you can put your first layout button into <FrameLayout> ... </FrameLayout>, then your problem will be fixed, but it's not the designing standards and as the poster said; it's a little nasty. It doesn't work for multi buttons and you'll see problems and bugs in designing after fixing the problem by this way.

    The way I fixed my problem is to add XML shapes instead of buttons, and add 0 opacity tint buttons on that shapes. So shapes are not clickable so they won't come above each others after clicking. It is nasty too but it's more responsive in designing.


  2. 0

    That’s because the changing transitionZ while tapping on each button. To overcome this, put your lower button (ONE) in a standalone container (which has zero elevation) and make sure its declaration comes before the upper button (TWO) in your XML layout.

    <FrameLayout
    android:id="@+id/button1_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="84dp"
        android:background="@drawable/empty_yellow_circle"
        android:text="1"
        app:backgroundTint="@null" />
</FrameLayout>
<Button
    android:id="@+id/button2"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginStart="76dp"
    android:layout_marginTop="48dp"
    android:background="@drawable/full_yellow_circle"
    android:text="2"
    app:backgroundTint="@null"
    app:layout_constraintBottom_toBottomOf="@+id/button1_container"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.558"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button1_container"
    app:layout_constraintVertical_bias="1.0" />

    It’s a bit nasty workaround but helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search