Develop Reference

Top view in RelativeLayout ignoring clicks

I have a ListView inside a RelativeLayout and a small LinearLayouot with an EditText that should hover above the List. However when I click the EditText it registers a click on the ListView underneath. It seems it's a focus problem.
Here is code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#dedede"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
</LinearLayout>
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector" >
</ListView>
</RelativeLayout>
It want focus to be on the id llSearchPlaces. But the two focus attributes I set do not work.

Try reordering the views in your XML layout. Ignoring the other views/viewgroups:
<RelativeLayout ...>
<ListView .../>
<EditText .../>
</RelativeLayout>
The reason is ViewGroups tend to draw their children in the order described and pass touch events down in the opposite order, so Views that are drawn on top have a chance to act on touches first. If you order them in the XML as I describe, EditText draws later (on top of) ListView and will receive touch events before ListView does.

Try this one:
First: Create layout xml for listview say listview.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector"
android:paddingBottom="50dp" >
</ListView>
</LinearLayout>
Second: Create layout xml for edit text say edittext.xml
<?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:orientation="vertical" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
<requestFocus />
</LinearLayout>
Third: Merge these two layouts in layout say mainlayout.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include
android:layout_alignParentTop="true"
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/listview"/>
<include
android:layout_alignTop="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/edittext"/>
</RelativeLayout>
Note: Replace ids and other attributes with your ones....

On second look, I don't see why you need a RelativeLayout at all. The effect you are achieving is a fixed EditText below your ListView. In actuality, the ListView and the EditText overlap, and you are working around this by giving the ListView padding on the bottom equal to the height of the EditText container.
A better choice would be to use a vertical LinearLayout to contain the ListView and the EditText container beneath it. Here the ListView will take up all the space available that is not used by the EditText container.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
... />
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="..."
android:orientation="horizontal"
... >
</LinearLayout>
</LinearLayout>

vertical layout little issue

I have a LinearLayout (vertical) and it should contain 3 elements in the following order: textview, listview and button. The listview could be really high so in order to keep all the 3 elements visible I put the 3 elements each one inside another layout. So my structure is like:
linear layout (vertical)
linear layout (horizontal)
textview
linear layout (vertial) *
listview
relative layout
button
In order to get it working I set a fixed height to the vertical linearlayout which only contains the listview (*) but I know it is a bad choice because on bigger devices there will be a lot of empty space. How can I fix it?
thanks

User percentage values for the LinearLayout(*), so they take up a percentage of the parent's height,
and for the rest, if you want them to take up remaining space, add attribute: android:layout_weight:1;

Implement your layout this way :
<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" >
<TextView
android:id="#+id/mTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="10dp"
android:text="Header Text" />
<ListView
android:id="#+id/mListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mButton"
android:layout_below="#+id/mTextView" >
</ListView>
<Button
android:id="#+id/mButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button1" />
</RelativeLayout>

// try this
<?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:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="textview"/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1">
<ListView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:cacheColorHint="#00000000"
android:divider="#null"
android:dividerHeight="0dp"
android:smoothScrollbar="true"
android:id="#+id/listview"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:gravity="center">
<Button
android:id="#+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="button"/>
</LinearLayout>
</LinearLayout>

Animate(ScaleAnimation) LinearLayout when it's height changes due to add/removal of view inside it

I have a LinearLayout & i have 2 TextViews inside it. Dynamically i want to hide one TextView or i can add TextViews at runtime. My problem is when TextView disappears from LinearLayout it collapses in no time. I want to animate the LinearLayout(ScaleAnimation) when views get removed from LinearLayout.
activity_main.xml
<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" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#000"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#fff"
android:orientation="vertical"
android:padding="10dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Hello, World" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Hello, World 2" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Remove TextView" />
</RelativeLayout>
Snapshot of layout...
I want to animate LinearLayout when second TextView got removed from LinearLayout & if another TextView got added into LinearLayout. ScaleAnimation is good for the above task but i don't know values required for this type of animation.

Pretty sure that you do not need it anymore, but for future searchers:
For the remove animation, it is possible to make the item invisible using view.setVisibility(View.INVISIBLE) and after the animation (addAnimationListener) effectually remove it from the linear layout. When a view is invisible its parent keeps measuring it.

How to center a ListView in a LinearLayout in android

I have a ListView which has two columns and what I want is to center that ListView in a Linerlayout. Here is the layout code of the ListView.
<?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"
android:gravity="center" >
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/mylist">
</ListView>
</LinearLayout>
And here is the layout of the individual items of the ListView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/prayLabel"
android:layout_width="100dip"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/prayValue"
android:layout_width="100dip"
android:layout_height="wrap_content" />
</LinearLayout>
Although my ListView is appearing vertically centered, but it's not appearing horizontally centered as its width is spanning the entire width of the screen. I guess as I used wrap_content in the layout_width in all the places its width should not span the entire width of the screen/layout?
Thanks

I would wrap it in a RelativeLayout for simplicity- I struggle with this too and end up doing this on simpler layouts**:
<?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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Note the 'centre in parent' tag below -->
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/mylist"/>
</RelativeLayout>
</LinearLayout>
** Disclaimer: This pattern can become expensive on more complex views but a LinearLayout > RelativeLayout > ListView hierarchy is just fine.

You can use android:weightSum on your linear layout and then use empty views either side to center your ListView as follows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".05"/>
<ListView
android:id="#+id/list_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".9"
android:paddingLeft="4dp"
android:paddingRight="4dp" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".05"/>
</LinearLayout>
of course you can adjust the weights, jsut make sure the Views are set the same so the ListView is centered.

How to show a button at the end of an Android ListView

I want to show a button at the end of an Android list view. How can I achieve this?
I don't want to stick it to the activity bottom using alignparentbottom="true". Using layout_below does not work for me either.
My current XML:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/main_bg">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:cacheColorHint="#ff6a00"
android:divider="#ff8f40"
android:dividerHeight="1px" />
</LinearLayout>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50sp"
android:background="#676767"
android:orientation="vertical">
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:id="#+id/btnGetMoreResults"
android:layout_marginLeft="10px"
android:text="Get more" />
</RelativeLayout>
</RelativeLayout>

You may want to use ListView#addFooterView() to add a View at the bottom of the ListView.

I do it like this fixed button at the buttom of the screen
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/btn_New" >
</ListView>
<Button
android:id="#+id/btn_New"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:text="#string/New"
android:width="170dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
if ur using linearLayout then assign android:layout_weight="1" to the listview and dont assign weight for button it works

You could do something like this:
final Button btnAddMore = new Button(this);
btnAddMore.setText(R.string.art_btn_moreIssues);
exArticlesList = (ExpandableListView) this.findViewById(R.id.art_list_exlist);
exArticlesList.addFooterView(btnAddMore);

1 If you want to add Button as the last element of the list view
You must create custom ListAdapter for your ListView which will create a view with a Button in the getView method. You should decide how to return your custom view for the last element, you can hardcode it (return element count +1 in getCount method and return custom view in getView when position > element count) or you can add element to the structure you will be taking data from (Array, Cursor etc.) and check if field of element have certain value
2 If you want to add element below list view
You should use android:layout_width attribute and make ListView and "empty" TextView (you should use it to show users that list is empty and View rendering is completed) layout_weight greater than buttons layout_weight
Check how it's done in Transdroids search Activity http://code.google.com/p/transdroid/source/browse/trunk/res/layout/search.xml

Use Footer view to list-view it work.
list_layout.xml :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:cacheColorHint="#ff6a00"
android:divider="#ff8f40"
android:dividerHeight="1px" />
</LinearLayout>
footerview.xml :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:id="#+id/btnGetMoreResults"
android:layout_marginLeft="10px"
android:text="Get more" />
</FrameLayout>
and in Activity.java
list=(ListView)findViewById(R.id.list);
FrameLayout footerLayout = (FrameLayout) getLayoutInflater().inflate(R.layout.footerview,null);
btnPostYourEnquiry = (Button) footerLayout.findViewById(R.id.btnGetMoreResults);
list.addFooterView(footerLayout);

Simply Provide "layout_weight = 1" of ListView.
Example :
<?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">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:cacheColorHint="#ff6a00"
android:divider="#ff8f40"
android:layout_weight="1"
android:dividerHeight="1px" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#ff8f40"
android:padding="20dp"
android:text="Click"
android:textColor="#FFFFFF"
android:textSize="22sp"
/>
</LinearLayout>

I came here looking for an answer first but found it somewhere else...
It's really easy, you just need to put weight 1 to the list inside a linear layout, the other textviews/buttons/etc don't need to have any weight value.
Here is an example: https://bitbucket.org/generalplus/android_development/src/5a892efb0551/samples/ApiDemos/res/layout/linear_layout_9.xml

You could, of course, use a custom adapter and specify a footer item. But you could probably also get away with putting it at the bottom of a ScrollView and have the ListView stretch vertically to the content:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/main_bg">
<ScrollView
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ListView android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
android:cacheColorHint="#ff6a00"
android:divider="#ff8f40"
android:dividerHeight="1px"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50sp"
android:background="#676767"
android:orientation="vertical">
<Button android:layout_width="100px"
android:layout_height="wrap_content"
android:id="#+id/btnGetMoreResults"
android:layout_marginLeft="10px"
android:text="Get more" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>

Well... details of implementations are not so easy if you want to create a smooth "add more" button at the end of the list. So here is some code :
myArrayAdapter = new ArrayAdapter<Show>(this, android.R.layout.simple_list_item_1, myList) {
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if( position >= super.getCount() )
return buttonMore ;
MyNormalView view = null;
if (convertView == null || convertView instanceof Button )
view = new MyNormalView(getContext());
else
view = (MyNormalView) convertView;
//customize view here with data
return view;
}
#Override
public int getCount() {
return super.getCount()+1;
}//met
};