Develop Reference

One of two Android ListView filling too much space

I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>

It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.

Android Layout- Part of TextView goes off edge of screen

I have a LinearLayout with a custom button and then another LinearLayout with two TextViews, which is always partly cut off on the edge of the screen. I have tried tons of different combinations of fill_parents, match_parents, and wrap_contents, as well as trying to add layout_weights, but nothing solved it, nor did any answer to any similar questions on this site. Here is my XML code, thanks for any help!
<?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:orientation="horizontal" >
<com.goldtrimdevelopment.sites.google.com.interesthub.SquareButton
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/list_article_like_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#drawable/custom_like_button"
android:contentDescription="#string/like_button"
android:padding="5dip" />
</com.goldtrimdevelopment.sites.google.com.interesthub.SquareButton>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:textSize="16sp" />
<TextView
android:id="#+id/article_link"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:singleLine="true"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>

I figured from your xml file that you want the layout to be a custom button and to its right 2 textviews which are vertically linear, while the buttons and the textviews are horizontall linear. Try the following values in your layout. I think it must solve the issue.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" or "wrap content"
android:orientation="horizontal" >
and the next linear layout as
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
and for both textviews set
android:layout_width="150dp"
try it and let me know.

Android whole screen gets dimmer or lighter depending on its child view's background

I have been facing a strange problem with layout. The problem is that the main layout have a background i.e. gray color (#DCDCDC). It consists of a child which is ScrollView with vertical LinearLayout. It contains 2 views: one is TextView with black background and next is google map.
Now the problem is: when the TextView becomes visible it is ok. But when ScrollView is scrolled to make the map visible whole screen gets dimmer which is not desirable from the consistency point of view.
And the surprising thing is that the problem is only in case of 4.x versions of Android.
Following is the layout:
<?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="#color/grey"
android:orientation="vertical"
android:padding="5dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:background="#drawable/_btn_back"
android:onClick="clickHandler"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:text="#string/terms_and_condition_terug"
android:textColor="#color/white"
android:textStyle="normal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="10dp"
android:clickable="true"
android:onClick="clickHandler"
android:src="#drawable/_info" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="700dp"
android:background="#drawable/itemlistbackground" />
<com.readystatesoftware.maps.TapControlledMapView
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="700dp"
android:layout_weight="1"
android:apiKey="#string/mapApiKey"
android:clickable="true" />
</LinearLayout>
</ScrollView>
</LinearLayout>
And following is the screenshot when the TextView is visible
and following screenshot was taken when map was visible
If you look carefully at those screen second image is dimmer than the first which is not desired. I don't want the dimmer screen while showing map in it. Please help me out.

I cut out pieces of the grey border to compare them next to each other, they look the same to me. There is also a gradient in the first screenshot which gives it a glossier feel as well.

Android - stretched EditText above Button

I want to put a scrollable EditText above a row of buttons such that the text component fills all the vertical space left free by the buttons. This is proving surprisingly difficult, not least because the ADT is buggy: it suggests that this layout will do and it does in Eclipse but not in the real application!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/view1"/>
<LinearLayout android:id="#id/view1"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<!-- buttons go here -->
</LinearLayout>
</RelativeLayout>
In this layout the text stretches to the full screen, as you might expect, i.e., it goes under the button but the ADT graphical layout tool shows it stopping just above the button. OTOH if you give it a wrap_content height then of course it doesn't stretch. layout_weight is of no help either.
So, is there a way? You must test your answer in the emulator or on a real device, not merely in Eclipse.
Precision: what makes me think this is not working and that the text widget extends under the buttons is the shape of the scrollbar at the bottom (see pic. below): it should be rounded at both ends and instead it looks like the bottom extends farther. If you compares its shape at the bottom with the shape it has at the top (which unfortunately I was unable to capture: it disappears too fast) it is very clearly different. OTOH the text widget boundary looks as expected. This is very confusing. Maybe just a minor bug in Android?

try this code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:inputType="textMultiLine" >
<requestFocus></requestFocus>
</EditText>
<LinearLayout
android:layout_height="wrap_content"
android:id="#+id/linearLayout1"
android:layout_width="match_parent">
<Button
android:text="Button"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button1"
android:layout_width="0dp"></Button>
<Button
android:text="Button"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:layout_width="0dp"></Button>
<Button
android:text="Button"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button3"
android:layout_width="0dp"></Button>
</LinearLayout>
</LinearLayout>

This should work
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:id="#+id/view1" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button android:text="Button" android:layout_weight="1"
android:layout_height="wrap_content" android:id="#+id/button1"
android:layout_width="0dp"/>
<Button android:text="Button" android:layout_weight="1"
android:layout_height="wrap_content" android:id="#+id/button2"
android:layout_width="0dp"/>
<Button android:text="Button" android:layout_weight="1"
android:layout_height="wrap_content" android:id="#+id/button3"
android:layout_width="0dp"/>
</LinearLayout>
<EditText android:id="#+id/text1" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_above="#id/view1"
android:gravity="top"/>
</RelativeLayout>

I did the same thing with TextView and a Button at the bottom.I tried to put EditText in place of TextView there and it works fine for me. You can try this -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:text="Add New Template"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/editText"
android:layout_alignParentTop="true"
android:layout_above="#id/add_acronym"
/>
</RelativeLayout>
Here is the snapshot-

Relative Layout is causing issues with formatting

I have been working on an app for my school recently and wanted to clean it up a bit before possibly publishing it. On the scheduling portion of the app, I have 5 buttons that perform actions on a ListView that is also on the screen at the same time. However, I have the issue when I have around 6 or more events on the screen as once the list view takes over the screen and pushes the buttons off the screen, making it so that I cannot delete the events, make new ones, and so on.
I tried setting the list view to a static size (400px) which worked for normal screen orientation, but if the phone is set to landscape view you cannot see the buttons either. With my current code it would appear to work in the XML viewer but in practice is not the case.
This is the code without the static size setting:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700"
>
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3">
</Button>
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button3"
android:layout_alignTop="#id/button3">
</Button>
<Button android:text="#string/delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button4"
android:layout_alignTop="#id/button4">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:text="#string/Previousweek"
android:layout_below="#id/button3">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:text="#string/Next"
android:layout_below = "#id/button3"
android:layout_toRightOf = "#id/button7">
</Button>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp" >
</ListView>
</RelativeLayout>
The XML viewer for this code is:
Which would lead me to believe it would work fine. I tested it on my emulator and got the following result after entering a bunch of silly events however:
This result is consistent with multiple versions of the emulator.
How I can fix this problem without using static size constraints that cause landscape orientation issues?

Separate the buttons into a separate RelativeLayout and enclose this and the ListView in a vertical LinearLayout.
Then:
<LinearLayout android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout [...]
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- Your buttons -->
</RelativeLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout
The key point here is the height and weight on the ListView. This means that it fills the remaining space in the LinearLayout after space has been correctly allocated for the buttons.

Add a android:weigth in your listView tag and set the android:weigth value to 1. This will work when your list view height and width is set to fill_parent and your list view is covering entire layout. So try it, it will work.

One simple solution would be to separate the buttons in their own relative layout and put the whole thing in a linear layout, eg:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#551A8B"
android:textColor="#FFD700">
<!-- your buttons -->
</RelativeLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp">
</ListView>
</LinearLayout>

Use a vertical LinearLayout with two rows of Buttons (each row as a LinearLayout), then give the ListView a layout_weight value of "1". In fact, use layout_weight to clean up the size of your buttons too.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:id="#+id/button3" />
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button android:text="#string/Delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Previousweek" />
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Next" />
</LinearLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:textColor="#FFD700"
android:textSize="10sp" >
</ListView>