Develop Reference

button background image is flipped

Really odd behaviour. I have a simple layout, 4 image views in one column that match up with 4 buttons on next column. I've used a gradient (subtle) background image - going from darker to lighter left to right.
The image view background image displays correctly, in that it has the darker color background as it's the left side of the background image. However the button background image is reversed with gradient going in the opposite direction.
Both the image and button views use the same background image. I can not understand why the background image is flipped on the button. Any ideas?
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".IndexMenuActivity">
<LinearLayout
android:layout_width="75dp"
android:layout_height="match_parent"
android:layout_marginLeft="0sp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/redbkg"
app:srcCompat="#drawable/i_ax" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/bluebkg"
app:srcCompat="#drawable/i_mx" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/greenbkg"
app:srcCompat="#drawable/i_ref" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/yellowbkg"
app:srcCompat="#drawable/i_cal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="75dp"
android:orientation="vertical">
<Button
android:id="#+id/imageButton1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/redbkg"
android:onClick="subjectListMx"
android:text="ASSESSMENT"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#FFFFFF"
android:textSize="34sp" />
<Button
android:id="#+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/bluebkg"
android:onClick="subjectListMx"
android:text="MANAGEMENT"
android:textColor="#FFFFFF"
android:textSize="34sp" />
<Button
android:id="#+id/imageButton3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/greenbkg"
android:onClick="subjectListRef"
android:text="REFERENCE"
android:textColor="#FFFFFF"
android:textSize="34sp"/>
<Button
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/yellowbkg"
android:onClick="subjectListCal"
android:text="CALCULATOR"
android:textColor="#FFFFFF"
android:textSize="34sp"/>
</LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>

Using a color meter, it does not appear that there's any flipping going on; the gradient starts with a lighter color on the left and moves to a darker color on the right for both the background of the image and the background of the text.
The problem is that you have two different gradients, so you go from light to dark and then light to dark again. You probably want to apply a single gradient to both views.

Animating 2 views together hides one where the other view was

I have 2 views (a button and a slider bar), one above the other, and I am animating the lower one out of frame and I want the other view to also animate down the same amount. My issue is that the spot where the lower view use to be clips out the top view. (See images). Both animations are triggered by a view model property change.
TimeView.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
MyPositionButton.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
Before Animation:
After Animation:
How do I get the lower view to stop clipping the upper one? I have attempted to alter the view's Z and TransitionZ properties to make sure the button is higher then the bar. I have also tried to set the visibility of the bar to Gone on animation completion. Also I have tried to use a TranslateAnimation so that I could have control over the Fill properties. None of these thing have worked.
Here is a look at the axml.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>

After switching on the "Show layout bounds", OP found out that he was animating the Button itself, not the RelativeLayout. After animating RelativeLayout no clipping would happen.
Old answer
Change the places of your RelativeLayouts, so that one with ImageButton is declared below of another with SeekBar. In that case the ImageButton will be drawn over SeekBar.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>

Color overlay over button with image background in Android

I have a layout which contains a button and a text view. I want to apply a color (with some alpha) to that layout. I've already tried many solutions other suggested and I ended up with this:
<!-- Header -->
<RelativeLayout
android:id="#+id/header_container"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginLeft="1dp"
android:background="#color/app_dark_gray">
<Button
android:id="#+id/button"
android:layout_width="210dp"
android:layout_height="match_parent"
android:background="#drawable/button_background_image"
android:text=""
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/textinfobar"
style="#style/InfoBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:paddingBottom="3dp"
android:paddingTop="3dp"
android:text="" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DD000000"
android:clickable="true"
android:visibility="visible"/>
</RelativeLayout>
I appended a View to my relative layout and gave it the color I wanted.
The problem is that only the TextView gets that color. The button stays the same way. Is there any way I can solve this?
EDIT:
I need this to work on API 16 and higher

LinearLayout not resizing ImageViews correctly

As part of the on-boarding for my app, I have a series of translucent overlays that highlight the UI. Each one is a LinearLayout, initially invisible (actually "gone"), that I make visible in turn. I am having a very tough time getting one of these to display correctly on both tablets and phones, in both portrait and landscape. I can tune it to work on the phone, but then it doesn't display well on tablet-portrait.
The images here are set up to work well on 10" tablets in portrait, and they work for 7" tablets and phones in portrait, but not in landscape. In the images below, I would like the arrows (two ImageViews) to resize as needed to make room for the text. However, the Layout seems to give priority to the ImageViews no matter what I do.
(Note that I do realize I could make this work, in a way, with a RelativeLayout, however, I cannot get the translucent backgrounds to work, filling the screen, using a RelativeLayout, as far as I know.)
My question in brief: Is there a way to make LinearLayout prioritize the TextViews, giving them enough space, and resizing the ImageViews to fit the rest?
Here is a good layout (10" tablet, portrait, shown at reduced scale):
Here is a bad one with some of the text cut off (10" tablet, landscape, reduced scale):
Here is another bad one (phone):
I don't have a screenshot of the other tuning, but it displayed big arrows and no central "Tap to Continue" button.
Here is my current XML:
<RelativeLayout
android:id="#+id/main_holder"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<LinearLayout
android:id="#+id/intro3_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top|center_horizontal"
android:orientation="vertical"
android:gravity="top|center_horizontal">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:layout_gravity="center_horizontal|top"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_weight="0"
android:background="#85000000"
android:gravity="center">
<TextView
android:id="#+id/button_intro3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/intro3_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="bottom|center_horizontal"
android:gravity="bottom|center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_weight="1"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:layout_gravity="center_horizontal|bottom"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

There're several possible way of doing it. I've updated your layout a bit, so now it should meet your expectations:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/main_holder"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:gravity="center"
android:layout_alignParentTop="true"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button_intro3"
android:layout_below="#+id/textViewIntro3_1"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
<TextView
android:id="#+id/button_intro3"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_below="#+id/button_intro3"
android:layout_above="#+id/textViewIntro3_2"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:gravity="center"
android:layout_alignParentBottom="true"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</RelativeLayout>
</RelativeLayout>
What I did here is to rewrite the layout with RelativeLayout instead of LinearLayouts. It suits better here, in my humble opinion.
I hope, it helps.

Have same graphical Layout with all screens

I am developping an android application and am currently working on the graphical interface of the different activities.
In an activity I have a background which is an is an image representing many shelves, and I would like to put items on those shelves. But this means I have to know the exact position of each shelf in order to position my widgets correctly "on the shelves".
Actually I used a vertical LinearLayout, that contains all shelves, each shelf being represented as an horizontal LinearLayout. Then I placed the widgets (images) using margins betweens the different layouts, and the distance are in dp. Now I tested on a Samsung and it looks like I want.
My question is : defined this way, is the graphical interface going to have the same look with different screens ? Or is it going to change depending on the device ?
Here is a part of the code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/final_shelves"
android:orientation="vertical" >
<!-- First shelf -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginLeft="70dp"
android:layout_marginRight="65dp"
android:layout_marginTop="#dimen/first_shelf_margin_top"
android:orientation="horizontal" >
<ImageView
android:id="#+id/card_11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:src="#drawable/card"
android:clickable="true"/>
<ImageView
android:id="#+id/card_12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:src="#drawable/card"
android:clickable="true" />
<ImageView
android:id="#+id/card_12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:src="#drawable/card"
android:clickable="true" />
</LinearLayout>
<!-- Second shelf -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginLeft="70dp"
android:layout_marginRight="70dp"
android:layout_marginTop="#dimen/second_shelf_margin_top"
android:orientation="horizontal" >
<ImageView
android:id="#+id/card_21"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:src="#drawable/card"
android:clickable="true" />
<ImageView
android:id="#+id/card_22"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:src="#drawable/card"
android:clickable="true" />
<ImageView
android:id="#+id/card_12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:src="#drawable/card"
android:clickable="true" />
</LinearLayout>