Android Layout with ListView overlaps Buttons - android

I can't seem to find a way to make a layout that contains a ListView that show the entire list of my contacts (its a long list), with 2 buttons one next to the other below the list.
its freaking me out, nothing i do seems to work. i searched some related quiestions and found this one: Android Layout with ListView and Buttons
but none of the alternative solutions over there is working for me.
when i look at the graphical presntation (of eclipse) it looks fine, but when i run it on my device i can only see the list of contacts. the listView overlaps the buttons.
I am using a simpleList that render on another layout that represent a row. i'm starting to suspect something i do programtically ruins it, because i ran over my java code and found no mention of the activity_contact_list that i was talking about. only connection to the row layout.
so i got this activity_contact_list.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/contact_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_alignParentTop="true" >
</ListView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1.0"
android:orientation="horizontal" >
<Button
android:id="#+id/action_cancel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancle" />
<Button
android:id="#+id/action_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Add" />
</LinearLayout>
</LinearLayout>
this is after many tries such as: using RelativeLayout instead of the LinearLayout, puting the ListView's code below the LinearLayout of the buttons, and many more..
and here is the code of the activity: ContactList.java:
public class ContactList extends ListActivity{
//some global variables for late use.
public Model model;
SimpleAdapter adapter;
List<Map<String, String>> data; /* data is a list of Map */
String[] from = {"name","phone"}; /* names of the columns */ //TODO - add date!
int[] to = {R.id.name, R.id.number};
List<Contact> contacts; /* list of contacts */
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_contact_list);
// Set up the action bar.
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayHomeAsUpEnabled(true);
model = Model.getInstance(this);
data = new ArrayList<Map<String, String>>();
contacts = fillContactsList();
fill_data();
adapter = new SimpleAdapter(this, data, R.layout.contact_list_row, from, to);
setListAdapter(adapter);
}
i commented the setContentView line cause it doesnt compile otherway...
As is said. the list works perfactly. but it overlaps the buttons at the bottom of the activity. any idea? i'm sure its something silly i'm missing..
thanks in advance!

Did you try to use Relative Layout ?
Change Linear Layout to Relative Layout that's all.
As Linear Layout Doesn't support align parent..
Edited
set List Height to mach parent.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/contact_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_below="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:id="#+id/action_cancel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancle" />
<Button
android:id="#+id/action_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Add" />
</LinearLayout>

How long is your ListView. Maybe it is longer than your screen and is the LinearLayout with buttons shown outside your screen.
What happens when you rearrange with the buttons above the ListView.
EDIT:
I think you have to set a Max-size in your ListView. Maybe you can try something like this in your java-code, but I don't know if it is scrollable then...
ListView listView = (ListView) findViewById(R.id.listView):
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) listView .getLayoutParams();
params.height = 200; // or something bigger / smaller
listView .setLayoutParams(params);

Related

Adding LinearLayout to ListView using an adapter

I am trying to create a ListView where each entry in the list consists of a LinearLayout. I have an ArrayList that I have defined here:
ArrayList<LinearLayout> menuList;.
Later in my code, I define
LinearLayout dailyMenuLayout = new LinearLayout(ReturnMenus.this);, and every time I complete a layout to be added to the ListView, I use menuList.add(DailyMenuList)
The adapter that I have been trying to use is as follows -- but it crashes the app every time that it is triggered.
ListView myListView = (ListView)findViewById(android.R.id.list);
ArrayAdapter<LinearLayout> adapter = new ArrayAdapter<LinearLayout>(ReturnMenus.this, R.id.linear_layout_item, menuList);
myListView.setAdapter(adapter);
And this is the XML for the single row in the ListView:
<?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="vertical" >
<LinearLayout
android:id="#+id/linear_layout_item"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content" >
</LinearLayout>
</LinearLayout>
Can somebody show me how to accomplish this? Thanks.
Use something like following layout for the row layout in your list rather than you current layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
.
.
.
.
.
</LinearLayout>
Here if you do not know exactly how many textView that you are going to use, use maximum number of TextView that using in your application. Then in your adapter class inside getView() you can get those TextView. If some rows not going to use all of these textViews then set them invisible as like this:
TextView txtView3 = (TextView)findViewById(R.id.text3);
txtView3.setVisibility(View.GONE)
Following tutorial helps you to create the listView.
http://www.vogella.com/tutorials/AndroidListView/article.html
You should bind data to adapter,such as strings,not the layout.
To see how to use ListView and Adapter,please check the demo project in your-android-sdk-dir\samples\android-XX\ApiDemos.

Animate a ListView without applying an animation to the header

I currently have a listview that has a header and footer attached. I am now trying to animate the items within the list itself, but when I apply a LayoutAnimationController to to the listview, the header is also animated. Is there a way to apply the animation to the whole list without affecting the header?
I have currently already tried the solution at Can LayoutAnimationController animate only specified Views by making a LinearLayout subclass that checks for animatable, but the header is still animating in with the rest of the items.
public class AnimationAverseLinearLayout extends LinearLayout {
private boolean mIsAnimatable = true;
public AnimationAverseLinearLayout(Context context) {
super(context);
}
public AnimationAverseLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setAnimatable(boolean isAnimatable) {
if(!isAnimatable)
clearAnimation();
mIsAnimatable = isAnimatable;
}
#Override
public void startAnimation(Animation animation) {
if(mIsAnimatable) {
super.startAnimation(animation);
}
}
}
....
//in onCreateView
ListView listView = (ListView) v.findViewById(android.R.id.list);
listView.setLayoutAnimation(Animations.animateListView(listView.getContext()));
header = (com.yardi.hud.inspections.util.AnimationAverseLinearLayout) inflater.inflate(R.layout.fragment_case_search_header, null, false);
header.setAnimatable(false);
listView.addHeaderView(header);
...
SearchAdapter adapter = new SearchAdapter(results);
setListAdapter(adapter);
I had the same problem described above - the animation was being applied to the ListView header as well as list rows. I solved this problem with help from this answer. I subclassed the outermost View of my header (in my case a FrameLayout) and overrode the animation methods to take no action. For example:
list_header.xml:
<my.project.NonAnimatingFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
...
>
<!-- other views in your header -->
...
</my.project.NonAnimatingFrameLayout>
and
package my.project
public class NonAnimatingFrameLayout extends FrameLayout {
...
#Override
public void setAnimation(Animation animation) {
// do nothing
}
The animation method you need to override my vary depending on the type of your outermost view.
I try like this if you want just look this xml file,
i declare header and footer separate & Listview separate in this if you want you can Animate listview . header and footer will not get animate.
if you give header and footer Animate then it will also animate...
<?xml version="1.0" encoding="utf-8"?>
<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" >
<!-- Header aligned to top -->
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#FC9"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fixed Header"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
<!-- Footer aligned to bottom -->
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FC0"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fixed Footer"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
<!-- LIstview Item below header and above footer -->
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/footer"
android:layout_alignParentLeft="true"
android:layout_below="#+id/header" >
</ListView>
</RelativeLayout>
Not really the best solution, but would it be an alternative to for exemple:
create a container view (LinearLayout with vertical orientation)
add your header view
add your ListView
add a footer view
I mean, header and footer would be independent of your list component and would be a quick fix. Isn't it? You'd still being able to control header/footer visibility, for example, just by setting visibility as View.GONE.
Also 1, is there any other method you could implement? I mean, canAnimate or something like that?
Also 2, how is your getView method implemented.
Just providing a quick example of what I've explained:
<!-- Scrollable container -->
<ScrollView
android:id="#+id/scrollContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Container view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list"
android:orientation="vertical">
<!-- Header view -->
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/header_text" />
<!-- LinearLayout acting as ListView -->
<LinearLayout
android:orientation="vertical"
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Insert rows into the fake list -->
<TextView
android:id="#+id/row_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/row_item" />
</LinearLayout>
<!-- Footer view -->
<TextView
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/footer_text" />
</LinearLayout>
</ScrollView>
I believe the problem got solved now :)

Listview dynamically allocate width

I want to allow my ListView to be wrapped to its content on its width and making it aligning to the parent centre.
This is what a normal ListView is giving me
This is almost what i want to achieve, only that i want the ListView to wrap by the longest test in the ListView. Currently this is achieved by declaring the dp which is something I would like to avoid if possible
Some codes for first image:
<ListView
android:id="#+id/lst_test"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content" >
</ListView>
Some codes for second image:
<ListView
android:id="#+id/lst_test"
android:layout_width="200dp"
android:layout_height="wrap_content" >
</ListView>
Do I have to use custom adapter for this or I can stick with the current one? If I would need to use custom adapter, how do i go about doing this?
You don't need to create custom adapter. Here is an example which can help you.
public class MainActivity extends Activity {
HashMap <String, CheckBox> options = new HashMap<String, CheckBox>();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView list_view = (ListView) findViewById(R.id.listView1);
ArrayList<String> str = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
str.add("Example " + i);
}
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list_layout, R.id.textView1, str);
list_view.setAdapter(adapter);
}
}
Above I have created an activity in which i am getting listview and setting data using ArrayAdapter.
I have created two layouts :
First layout: Contains listview.
Second layout: Contains textview which need to display.
Main logic to align data at center of Listview is you need to set gravity of textview as center.
You can manage second layout according to your needs.
Here is my first XML 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
Here is my second layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="TextView" />
</RelativeLayout>
If you are still facing any problem then you can ask. If you need more flexibility then you can create custom adapter by inheriting ArrayAdapter class.
Here is an example of custom adapter: How do I link a checkbox for every contact in populated listview?
Hope it will help you.

Android List Below Toggle Buttons

I have a list that is intended to be below toggle buttons. The list grabs data from a server and then parses them. My XML is as follows:
<?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="wrap_content"
android:orientation="horizontal" >
<ToggleButton
android:id="#+id/toggle_button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textOff="Apps"
android:textOn="Apps" />
<ToggleButton
android:id="#+id/toggle_button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/toggle_button1"
android:layout_weight="1"
android:textOff="VMs"
android:textOn="VMs" />
<ToggleButton
android:id="#+id/toggle_button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/toggle_button2"
android:layout_weight="1"
android:textOff="Groups"
android:textOn="Groups" />
<ListView
android:id="#+id/mylist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toggle_button1" />
</RelativeLayout>
Code for the actual fragment:
public class ProblemFragment extends SherlockListFragment
{
private SeparatedListAdapter list;
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.getSherlockActivity().setContentView(R.layout.problem_layout);
list = new SeparatedListAdapter(this.getSherlockActivity(), new Layout(R.layout.separated_list_adapter_two_text, R.id.two_text_title, R.id.two_text_desc));
ToggleButton b1 = (ToggleButton) this.getSherlockActivity().findViewById(R.id.toggle_button1);
ToggleButton b2 = (ToggleButton) this.getSherlockActivity().findViewById(R.id.toggle_button2);
ToggleButton b3 = (ToggleButton) this.getSherlockActivity().findViewById(R.id.toggle_button3);
setListAdapter(list);
refresh();
}
public void refresh()
{
list = new SeparatedListAdapter(this.getSherlockActivity(), new Layout(R.layout.separated_list_adapter_two_text, R.id.two_text_title, R.id.two_text_desc));
refreshStats();
}
public void refreshStats()
{
//Omitted parsing code
list.addSection(new String("Hello world!!"));
setListAdapter(list);
}
}
However, when I use setListAdapter(list), the buttons are overwritten. They are visible before the app retrieves the data and parses it, but they are overwritten after I call setListAdapter. How can i fix this?
First, remove
android:orientation="horizontal"
from your root layout. RelativeLayout doesn't have an orientation property. Also, weight is for child elements of a LinearLayout and when you use it then you should assign the width of each child view to 0dp for horizontal orientation and height="0dp" for vertical orientation.
Then wrap your ToggleButtons in a LinearLayout, vertical or horizontal orientation, and give it the property
android:layout_alignParentTop="true"
then give your ListView the property
android:layout_below="#id/idOfLinearLayout"
So it may look something like
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/toggleLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ToggleButton
android:id="#+id/toggle_button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Apps"
android:textOn="Apps" />
<ToggleButton
android:id="#+id/toggle_button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="VMs"
android:textOn="VMs" />
<ToggleButton
android:id="#+id/toggle_button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Groups"
android:textOn="Groups" />
</LinearLayout>
<ListView
android:id="#+id/mylist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toggleLL" />
</RelativeLayout>
I also removed the RelativeLayout properties from the ToggleButtons since they are now wrapped in a LinearLayout. And you had a circular view error there with assigning the second ToggleButton to the right of itself which may have been a copy/paste error. Hope this helps.
Note that the default orientation for a LinearLayout is horizontal so leaving that property out will give you that effect.
Oh! I can not test your XML but I think that you need scrollbars! If the list is filled with a lot of entries, it can became bigger that the screen, making the buttons disappear because they are pushed up by the list. Try to add a scroll to the whole layout.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Original layout here -->
</ScrollView>
</LinearLayout>
Of course, if you just put only one layout inside the scrollview, there is no need for the outer layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Original layout here -->
</ScrollView>

Why is my ListView with ArrayAdapter not scrollable?

I'm struggling with getting a ListView to be able to scroll. As far as I have read it should be OK to have a ListView inside of a LinearLayout so why is it not scrolling?
This is the layout
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:id="#+id/listView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
<include layout="#layout/tab3" />
<include layout="#layout/tab1" />
</FrameLayout>
And here is where I fill it up with stuff..
File folder = new File(Environment.getExternalStorageDirectory().getPath()+"/Download/");
File[] listOfFiles = folder.listFiles();
ArrayAdapter<String> arrayadp = new ArrayAdapter<String>(this, R.layout.list_files);
for (File file : listOfFiles) {
if (file.isFile()) {
String extension = "";
String filename = file.getName();
int i = filename.lastIndexOf('.');
if (i > 0) {
extension = filename.substring(i+1);
}
if(extension.equalsIgnoreCase("wav")){
arrayadp.add(filename);
}
}
}
ListView listView = (ListView) findViewById(R.id.listView1);
listView.setAdapter(arrayadp);
The orientation attribute is necessary for a LinearLayout. You'll need to set this to either horizontal or vertical, even if the LinearLayout only has one child. I think this may be the cause of your issue; I've forgotten orientation many times and it can cause many weird problems with how your Views are displayed and behave. You may also want to consider not using a FrameLayout as your root view here, as having a FrameLayout with multiple children can make it very difficult to get them laid out properly. Consider a LinearLayout if you want your three children in a horizontal or vertical row.
it is ok to put a listview in a linearLayout.
it is not ok to set the height of the listView to be wrap_content, as listView contains a lot of items, all have dynamic size and number.
google has talked about this on this lecture . please watch it all. it might help you with other things too.
This problem because your root layout is a FrameLayout.
Insert linearlayout how root
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:id="#+id/listView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
<include layout="#layout/tab3" />
<include layout="#layout/tab1" />
</FrameLayout>
</LinearLayout>

Categories

Resources