Place ImageView over Button android
I am trying to place an ImageView over a Button using RelativeLayout. Here is my xml:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="0.50" >
<Button
android:id="@+id/btnFindDaysInBetween"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue_500"
android:text="@string/dt_text_days" />
<ImageView
android:id="@+id/imageview_find_days_in_between"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="@string/empty"
android:src="@drawable/ic_check_circle_white" />
</RelativeLayout>
Here is the image screenshot:
As you can see, the ImageView's src image is not visible. However if i change the button at the back to an ImageView, the image of the top ImageView is visible. Please refer below..
Changed xml:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="0.50" >
<!--
<Button
android:id="@+id/btnFindDaysInBetween"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue_500"
android:text="@string/dt_text_days" />
-->
<ImageView
android:id="@+id/imageview_find_days"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:contentDescription="@string/empty"
android:src="@drawable/ic_send_black" />
<ImageView
android:id="@+id/imageview_find_days_in_between"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="@string/empty"
android:src="@drawable/ic_check_circle_white" />
</RelativeLayout>
Changed xml's screenshot:
What is it that i am doing wrong in the first layout?
Solution 1:
The reason is actually very simple. :) We are so caught up thinking in 2D that we overlook the elevation - in Z.
There is nothing wrong with your first layout. The Button simply has a higher elevation than the ImageView - exactly 1dp higher. Therefore, no matter how you arrange the two views, the Button rises above.
A bit of proof:
A Button, by default gets the Widget.Material.Button style:
<!-- Bordered ink button -->
<style name="Widget.Material.Button">
<item name="background">@drawable/btn_default_material</item>
<item name="textAppearance">?attr/textAppearanceButton</item>
<item name="minHeight">48dip</item>
<item name="minWidth">88dip</item>
<item name="stateListAnimator">@anim/button_state_list_anim_material</item>
<item name="focusable">true</item>
<item name="clickable">true</item>
<item name="gravity">center_vertical|center_horizontal</item>
</style>
The attribute that introduces this elevation is android:stateListAnimator. StateListAnimator is similar to StateListDrawable, and provides state change animations. The complete xml is here: Link. But here's the base state of the button:
<!-- base state -->
<item android:state_enabled="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="@integer/button_pressed_animation_duration"
android:valueTo="0"
android:startDelay="@integer/button_pressed_animation_delay"
android:valueType="floatType"/>
<objectAnimator android:propertyName="elevation"
android:duration="0"
android:valueTo="@dimen/button_elevation_material"
android:valueType="floatType" />
</set>
</item>
As you can see, the elevation value for the button is set to @dimen/button_elevation_material:
<dimen name="button_elevation_material">1dp</dimen>
And that's how the ImageView ends up being behind/below the Button.
So, what can we do?
A straight-forward solution would be to set the ImageView's elevation to the same amount - 1dp.
Another solution, which will require a bit of work, is to remove the Button's elevation rather than change ImageView's. Based on the default StateListAnimator, we can create our own - and remove the elevation. Then, in your res/values-v21/styles.xml, define a style that inherits from Widget.Material.Button:
<style name="MyDepressedButtonStyle" parent="android:Widget.Material.Button">
<item name="android:stateListAnimator">@anim/customized_state_animator</item>
</style>
Now, set this style on your Button:
<Button
style="@style/MyDepressedButtonStyle"
....
.... />
Edit:
Actually, we can apply the customized StateListAnimator directly:
<Button
android:stateListAnimator="@anim/customized_state_animator"
....
.... />
No need to take the scenic route!
Solution 2:
I found a solution: simply android:elevation="2dp"
<Button
android:id="@+id/btnAccess"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView4"
android:background="@drawable/or"
android:layout_alignBottom="@+id/btnRegister"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:elevation="2dp" />
Solution 3:
Use ImageButton replace Button and set ImageButton background as transparent.
<ImageButton
android:id="@+id/btnFindDaysInBetween"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/blue_500_text"
android:background="@android:color/transparent"
/>
<ImageView
android:id="@+id/imageview_find_days_in_between"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="@string/empty"
android:src="@drawable/ic_check_circle_white" />
You can make a image that has your blue_500 color and text(that is easy to create), then set this image to your ImageButton. After that, your ImageView will see on the top of ImageButton.
Hope this help!
Solution 4:
Actually it's much easier to just set the StateListAnimator to @null
<Button
...
android:stateListAnimator="@null" />
Source Android 5.0 android:elevation Works for View, but not Button?