Develop Reference

Incorrect overlay behavior in FrameLayout

According to the docs, child views in FrameLayout are drawn on top of each other with the most recently added view on top. I have notice though, that this seems to not be accurate in Lollipop or later. For example, in the following xml, the button is still visible even though it should be covered by my custom view.
It is worth mentioning that although my custom view extends FrameLayout, I do inflate a child view, so my FrameLayout isn't empty.
<FrameLayout
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"
tools:context=".MainActivity">
<Button
android:id="#+id/some_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="button"/>
<mycustomframelayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"/>
</FrameLayout>
Any idea what I am missing here?

Buttons in Lollipop and higher have a default elevation to them which causes them to always draw on top. You can change this by overriding the default StateListAnimator.
Try putting this into your button XML:
android:stateListAnimator="#null"
The FrameLayout should now cover the button.

Try putting an elevation to the FrameCustom:
<mycustomframelayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:elevation="100dp"/>

Cast shadow on top of LinearLayout using android:elevation

I have this LinearLayout that is going to be placed on the bottom of an activity layout. I want this LinearLayout to have a 4dp elevation, just like the top toolbar should have, however, since android:elevation places the shadow below the ui component and this specific component (linearLayout) is going to be on the bottom of the screen, I won't see any elevation at all..
This is my LinearLayout code, and an image of it with the default elevation implemented:
<?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="wrap_content"
android:weightSum="3"
android:background="#android:color/transparent"
android:orientation="horizontal"
android:elevation="4dp"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/playButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_play"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/stopButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_stop"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/bookmarkButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_bookmark"
style="?android:attr/borderlessButtonStyle" />
</LinearLayout>
Is there a way, using elevation to place a shadow on top of the ui component?
Thanks in advance!

You can't theoretically do it with android:elevation, in the sense that you can't choose the direction where the shadow is going to be cast.
There are two solutions.
1. Drawables
You could, for instance, put an ImageView right above your layout and set android:src="#drawable/shadow". This should be a vertical GradientDrawable defined in XML, as explained here.
2. Workaround
While most of the shadow is actually below the view, a subtle shadow is also above. A workaround might be using a very high value for elevation, like 40dp: the bottom part is going to be hidden due to your layout, while the top is going to be expanded and look like a common shadow.
In either case, you do not have control over the elevation value in dp, in the sense that you can't be sure your shadow is equivalent to the one cast by android:elevation=4dp.

use like as;
<LinearLayout
android:layout_width="match_parent"
android:layout_height="205dp"
android:background="#color/white"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="-5dp"
android:background="#color/white"
android:elevation="3dp"
android:paddingTop="5dp">
// CHILD VIEWS
</RelativeLayout>
</LinearLayout>

Add this code above of view in which you want top elevation or add android:layout_marginTop="-4dp" and add below of above view
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0.01dp"
android:layout_below="#+id/scrollbar"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="#dimen/dp_4" />

Try this i am unable to set background through xml then i tried the programmatic way to solve that and i work perfectly refer this if facing problem on show shadow in Linear Layout
lprofile.setBackgroundResource(R.drawable.background_with_shadow);
lprofile is my ref of Linear layout and background_with_shadow is xml for applying shadow i hope i will for ur requirmement...thank u..

aChartEngine Plots pushed off top off ScrollView

I've been struggling with this problem for awhile now. Basically, I've created a class that returns me a properly stylized GraphicalView chart; I have one class for bar charts and another for pie charts (I used renderer.setInScroll(true) BTW). I populate my Activity with a few charts and a few TextViews, but the more I add Views (any View) they are pushed off the top of the screen and there is a big empty space at the bottom of the scroll view.
My XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollingProfilePaid"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="00dp"
android:orientation="vertical">
<TextView
android:id="#+id/totalScore"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastScoresChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/totalTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<TextView
android:id="#+id/totalAverageResponseTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastTimesChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<!--...........-->
</LinearLayout>
</ScrollView>
What I've tried:
1.ScrollView->android:fillViewport="true"
2.Instead of specifying a height for the charts I set it in the java class using pastScoresChart.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, (int)(dens*350)));
3.Wrapping the ScrollView in a , using a child Relative Layout with android:alignParentTop="true" as the header, another child Relative Layout with android:alignParentBottom="true" as the footer, and changing the ScrollView to android:alignBelow="#id/header". This just made the Scrollview about 40px tall, seemingly making the problem worse.
4.Oodles of other things that I can't recall this second.
I've found a workaround of setting android:marginTop="500dp" (or a similarly large value) in the ScrollView will push the Views back down into their approximate respective positions. Unfortunately it is difficult to get it to fit exactly, and it worries me for device compatibliity. Any suggestions?

The empty space at the bottom of the ScrollView must be because of it's child (LinearLayout) attribute android:layout_gravity="center". Try to use like this:
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
OBS 1: The android:layout_marginTop="00dp" attribute is unnecessary.
OBS 2: fill_parent is deprecated starting from API Level 8 and is replaced by match_parent. So, use match_parent. More on: http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
OBS 3: Here is a tip about debugging layouts: change the background color of the views to see what are the bounds of each view.

Ugly bug? First item in RelativeLayout cannot be centered

We try a simple thing. Display a TextView horizontally and vertically centered in a RelativeLayout.
This should be
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Against all expectations the text appears top left here.
But now add a totally pointless LinearLayout to the whole thing:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- First item in a relative Layout cannot be centered -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
and tadaaaa! The text appears where we want him to. You cannot remove any of the lines in the LinearLayout without changing the location of the TextView. It seems RelativeLayout needs some items to be aligned against top/bottom and right/left before you can center any other item.

Similar problem ?
Problem description
I currently have a similar issue with a wrapping RelativeLayout holding a TextView that should be centered due to the use of android:layout_centerInParent="true".
Running my code on an API level 21 device or emulator shows the text properly centered.
However running the same code on API level 19 puts the text view at the top of the wrapping RelativeLayout instead of centered.
Example project
Just for the ease of following I created a sample project at https://github.com/hanscappelle/SO-16731025 Just check out this code from git and import in Android Studio and you should be able to run the code.
Visualisation
You can even test this issue using the design preview in Android Studio by just changing the SDK version for rendering.
Just open the file at layout/with_scrollview.xml and you should get a visualisation of it in the preview in Android Studio.
Using API level 21:
Same layout using API level 19:
Work around
Wrapping ScrollView
As a work around I discovered that removing the wrapping ScrollView solves the problem.
What didn't help
Dummy view
Adding a dummy LinearLayout (or any other view) in between like you suggested didn't resolve my problem.
The example project has this technique applied in the circle at the right of the screen.

How come the behavior of drawableStart doesn't match the Android documentation?

I have created a very basic layout:
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
android:drawableStart="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
According to the documentation for drawableStart,
"The drawable to be drawn to the start of the text."
However, when run on my Android 4.0.4 phone, I instead see this:
Why is there such a large gap between the icon and the text? According to this answer,
"With Android 4.0 (API level 14) you can use android:drawableStart attribute to place a drawable at the start of the text."
But this is not the behavior I observe. Why isn't the attribute working?

A lot of misunderstanding with start and end.
Start and End in layout xml are alternative to left and right to match layout direction (LTR or RTL).
So, when documentation says :
"The drawable to be drawn to the start of the text."
You must read :
"The drawable to be drawn to the beginning of the view according to layout direction"

The reason is because drawableStart kind of makes the button into a compound layout i.e Image view and TextView all wrapped in a 'Button'...
So what you are seeing is that the ImageView is placed in front of the Textview.. However the TextView still has its default layout attributes set so that it draws it centered in the space left for it hence the gap (notice its centered in the space left by putting the Image at the beginning of the text)
so you basically need to override the gravity attribute for the buttons TextView -
android:gravity="center_vertical|center_horizontal|left"
see below notice that you only need to have the button wrapped by 1 layout the other is redundant...
i.e The RelativeLayout could be a LinearLayout on its own too since you only have one view in the layout!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_launcher"
android:gravity="center_vertical|center_horizontal|left"
android:text="#string/app_name" />
</RelativeLayout>