Clash Royale CLAN TAG#URR8PPP

How do I organize view layers? Placing images above a button

I want an image to appear above a button, and still have the button clickable. I want this because I want the button (eventually have a gradient) to appear in the background, to more clearly indicate that it is a button. An imageButton does not satisfy my needs as I will actually be having two images "on top" of the button, but for the sake of simplicity and understanding, the attached image only has one.

Button

TextView

1 Answer
1

To understand the problem, here's what I'm assuming you've tried:

<FrameLayout>
<Button/>
<ImageView/>
</FrameLayout>


And I'm betting that you're seeing the Button floating "above" the ImageView. Maybe you already know this, but that's because buttons have elevation by default and images don't.

Button

ImageView

elevation

I think the best course of action would be to not try to fight the Android framework here. You could add elevation to your image to make sure it was "above" the button, but I think you're better off just playing by the rules of the game.

You can use a LayerDrawable to merge many images/drawables into one. Combining e.g. insets and shapes you could have multiple images + gradients all inside a single LayerDrawable, and then you could use this single drawable inside an ImageButton.

LayerDrawable

ImageButton

For example, here's a LayerDrawable that's a gradient + two little androids:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:drawable="@drawable/gradient"/>

<item
android:right="32dp"
android:bottom="32dp"
android:drawable="@drawable/drawable_one"/>

<item
android:top="32dp"
android:left="32dp"
android:drawable="@drawable/drawable_one"/>

</layer-list>


And I can use it in an ImageButton:

<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="@drawable/layer_drawable"/>


LayerDrawable

layer_drawable

<layer-list>

res/drawable/layer_drawable.xml

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.