Develop Reference

Invisible components still take up space

So, I have this one activity that looks like this:
http://i.imgur.com/UzexgEA.jpg
As you can see, it has a button, a list and a button.
If certain conditions are met, I want to hide both buttons just show the list, but as you can see in the next image, the buttons are still taking up space:
http://i.imgur.com/OyLIfSk.jpg
So my question, what can I do to enlarge the list to take that space out?
Here is my layout for the buttons and the list:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/findSelected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="registrarAsistencia"
android:text="Registrar Asistencia" />
<ListView
android:id="#+id/listaAlumnos"
android:layout_width="fill_parent"
android:layout_height="376dp"
android:layout_weight="2.29" />
<Button
android:id="#+id/btnChecarBoxes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="seleccionarTodosNinguno"
android:text="Seleccionar / Deseleccionar todo" />
</LinearLayout>
And here it is the layout for the list's contents:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/rowTextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/rowTextView2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="italic"/>
</LinearLayout>
<CheckBox
android:id="#+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:focusable="false"
android:padding="10dp" />
</RelativeLayout>

Do not make the buttons View.INVISIBLE. Make the buttons View.GONE. There are three visibility states:
visible (normal)
invisible (pixels not drawn, but still takes up space)
gone (not included in rendering)

In the java code
yourView.setVisibility(View.GONE);
and in the XML code
android:visibility="gone"
Thier are 3 state
visible: normal
invisible : takes space and invisible
gone : no space and no visibility

Use
android:layout_height="0dp"
android:layout_weight="1"
In addition to #CommonsWare's answer
You should use a layout that fits well in all screen sizes. If you give you layout a fixed height like android:layout_height="376dp" it will look good only on the device (or emulator) you're testing on. What you have to do is to make sure that your listview takes up all (and only) the space left by your buttons.
Check out this article and this answer to better understand layout weights.

for hiding your widget
yourEditText.setVisibility(View.GONE)
for visbility of your widget
yourEditText.setVisibility(View.VISIBLE)

Android - How to enable full page scrolling on a layout with a ListView?

I have a layout with a ListView. The list scrolls fine, but sometimes the other content on the page needs to be bigger and either the list or the other content take up too much of the screen so I need it all to scroll.
Can that be done?
Here is the layout I have so far:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<include android:id="#+id/header"
layout="#layout/header"
android:layout_height="wrap_content"
android:layout_width="fill_parent"/>
<TextView
android:id="#+id/view_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Business:"
/>
<TextView
android:id="#+id/business_privacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Loading..."
/>
<TextView
android:id="#+id/think"
android:layout_width="fill_parent"
android:layout_marginTop ="5dp"
android:textColor="#color/light_best_blue"
android:paddingLeft="10px"
android:layout_height="wrap_content"
android:text="Fill out each section below"
/>
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label"
android:textSize="20px"
>
</ListView>
</LinearLayout>
What would be the way to make it easy for the user to be able to see both the text and the list even if the text takes up the whole screen? Can I make the text scrollable? It is especially bad in horizontal view so I think there must be some ux patters to make it play nicely.
Thanks for the advice!

1- Put textview which has a larger text in header of the list view so it get scroll with list...
or
2- put the textview in other scroll view with fixed size like 1/3 of the screen.

You could either make the content wrap, or wrap the content up using a HorizontalScrollView. Android docs on it can be found here.

On an Android app layout how would I position a view so that it always appears half the distance below the middle?

I'm using a Relative layout as the root or parent container and I have two buttons to place inside this Layout. The buttons need to be placed one on top of the other. The problem is that I want to position these buttons so that they appear below the center of the view but not directly below. That is within the bottom half of the view I want the buttons to appear halfway along that half portion. I tried adding a the buttons as children of a RelativeLayout (that was centered in the middle) inside the parent RelativeLayout and that sort of achieves what I'm trying to but then the Eclipse complains with a warning stating that one set of Relative Layout tags is useless and that I should consider getting rid of it.
Then I tried giving a one of the buttons a top margin with respect to its parent and then placing the other button under the this button with the top margin. This seems to work until I try it out in other virtual devices and I find out that depending on the screen sizes and dimensions it might or might not appear where I want it to (especially not the case with tablet devices).
Ok, so then I'm not sure how to achieve what I want the right way (without warnings or errors). Here's my current code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/default_real" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="300sp"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sm_panel_email_button"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>

How about using two layouts and the android:layout_weight attribute
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/default_real"
android:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/ >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sm_panel_email_button"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>
</LinearLayout>

View over another View

I have some Popups on my screen, and need something not so common.
I Layout my popup with Header + Content + Footer into a LinearLayout. But I need a little arrow to show on my component.
When the popup is above the anchor and the arrow is down, I use the following code to have it drawed.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content" android:orientation="vertical"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/header" android:background="#drawable/background_header"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
<HorizontalScrollView android:background="#drawable/background"
android:layout_width="wrap_content" android:layout_height="match_parent"
android:scrollbars="none">
</HorizontalScrollView>
<ImageView android:id="#+id/arrow_down" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginTop="-3dip"
android:src="#drawable/quickcontact_arrow_down" />
</LinearLayout>
In runtime I'm able to place the arrow exactly above the anchor with the following code.
ViewGroup.MarginLayoutParams param = (ViewGroup.MarginLayoutParams) mArrowDown
.getLayoutParams();
param.leftMargin = root.getMeasuredWidth()
- (screenWidth - anchor.getLeft());
And it's show correctly.
Now I need do the same thing but the arrow needs to show in the up side.
My problem is that the arrow need overlap a little over the other View (cause the backgrounds color match them), so this is why it's need to be draw after.
I tried with a FrameLayout and letting "content" has some topMargin, but it's not working.
I know it's can be done with AbsoluteLayout, but I'm avoiding it at all costs.
EDIT:
Following Josh answer, I wrote the following code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/content"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:fadingEdgeLength="0dip">
<RelativeLayout android:id="#+id/header"
android:background="#drawable/background_header" android:orientation="horizontal"
android:layout_width="match_parent" android:layout_height="wrap_content">
</RelativeLayout>
<HorizontalScrollView android:background="#drawable/background"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scrollbars="none">
</HorizontalScrollView>
</LinearLayout>
<ImageView android:id="#+id/arrow_up" android:layout_above="#id/content"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/quickcontact_arrow_up" />
</RelativeLayout>
But I don't know why, the arrow is not show now.

I won't pretend to have read all that xml. I think what you want is RelativeLayout, though. You should be able to use this technique to place any little arrow view where ever you like, relative to the bounds of the RelativeLayout which encompasses it.
If you wrap everything you have in a single RelativeLayout, for instance, and then add, say, a Button as the second item, you can give the button attributes like alignParentRight=true and layout_marginRight=10dp to place the button 10dp from the right edge of the screen, ON TOP of whatever views are already there.

screen with top banner, webview and bottom banner

I'm trying to create a very simple android screen with the following content: top banner, webview and bottom banner. for some reason, i can't do it. my xml look like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/FrameLayout02"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true" android:isScrollContainer="false">
<ImageView android:layout_width="wrap_content" android:layout_above="#+id/Web"
android:layout_height="fill_parent" android:layout_gravity="top"
android:src="#drawable/logo"></ImageView>
<WebView android:layout_gravity="center" android:id="#+id/Web"
android:layout_height="fill_parent" android:layout_width="fill_parent"></WebView>
<ImageView android:layout_width="wrap_content" android:layout_below="#+id/Web"
android:layout_height="fill_parent" android:layout_gravity="bottom"
android:src="#drawable/logo"></ImageView>
</LinearLayout>
what is wrong?
Thanks,
Daniel

Short answer all is wrong. Your code is a mess.
Long answer. You are trying to have an ImageView above a WebView and at the bottom another ImageView. I'm not exactly sure what of the mistakes broke it but that's also not important. Take a look at my example XML code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:id="#+id/topimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/icon"/>
<ImageView android:id="#+id/bottomimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/icon"/>
<WebView android:id="#+id/web"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/topimage"
android:layout_above="#id/bottomimage"/>
</RelativeLayout>
Now what my XML does is simple. It uses a RelativeLayout as a container to allow a more flexible child alignment. The ImageView called topimage will adjust its height to its content and fill the parent in width. It is aligned to its parents top. The second ImageView is similar with the only exception that it is pinned to its parents bottom. The WebView is aligned in between both ImageViews. It adjust it's height to the 'ImageView`s heights.
Try to always keep some kind of structure in your XML and also Java code so you and also others can throw a look at it without starting to cry.