The contents of my list view get hidden behind the button as follows:
The xml file is:
<?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:layout_gravity="top"
>
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
/>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:text="Send"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="addItems"
>
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content"
>
</EditText>
</RelativeLayout>
</RelativeLayout>
The TextView for each row is as follows:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content
android:layout_gravity="right"
android:gravity="right"
android:textSize="20sp"
/>
What should i do to align it properly (as in above the button)?
Also when the listView is with just one or two entries, and when the keyboard is opened to type, the whole view shifts? How do I fix that as well? Thanks in advance
Cleaned up and corected the code a bit. Perhaps this is what you were looking for. Let me know if it works. Cheers !
<?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:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" />
<EditText
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_toLeftOf="#id/Button" />
</RelativeLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/InnerRelativeLayout" />
</RelativeLayout>
adding android:layout_above="#+id/InnerRelativeLayout" to your ListView.
RelativeLayout has child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
For put your InnerRelativeLayout layout at Top add android:layout_alignParentTop="true" to your InnerRelativeLayout and remove android:layout_alignParentBottom="true"
Update: set up your Layout like below:
<?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="#color/Beige "
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" >
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:hint="Enter text" >
</EditText>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/InnerRelativeLayout"
android:drawSelectorOnTop="false" />
</RelativeLayout>
Output:
use android:layout_above="#+id/InnerRelativeLayout" in your listview
Make the outer RelativeLayout into a LinearLayout with orientation vertical. Then, for the ListView set layout_height as 0dp and layout_weight as 1. The ListView will fill up all the remaining space in the LinearLayout without overlapping other views.
Also, stop using fill_parent, it's been deprecated and you should use match_parent instead.
Related
In the following xml, I'm trying to draw a layout that contains two blocks (a LinearLayout and a TextView). I want the LinearLayout to be 5 times larger than the TextView. This xml produces the exact opposite of what I expected, the TextView takes 5 times more space than the LinearLayout. Notice that I have set the width of both elements to 0dp which is a common oversight.
<?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:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_gravity="center_vertical"
android:weightSum="6"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="5" >
<TextView
android:id="#+id/result_title_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="Arial"
android:textColor="#222222"
android:textSize="14sp"/>
<TextView
android:id="#+id/result_info_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="Arial"
android:textColor="#777777"
android:textSize="12sp" />
</LinearLayout>
<TextView
android:id="#+id/result_distance_textview"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:fontFamily="Arial"
android:textColor="#ffffffff"
android:textSize="14sp" />
</LinearLayout>
EDIT: This Layout is actually a list item which is included in this list :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/results_list_fragment_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="15dp" >
<ListView
android:id="#+id/search_results_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/scrollable_content_background"
android:divider="#drawable/listview_divider"
android:dividerHeight="1dp" >
</ListView>
</LinearLayout>
I also just met the same problem, and the way of solving is to change:
width of child view to 0dp if parent LinearLayout has orientation="horizontal";
height of child view to 0dp if parent LinearLayout has orientation="vertical".
The issue came from the container list which had a "wrap_content" width. Changing to "match_parent" fixed the problem.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/results_list_fragment_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="15dp" >
<ListView
android:id="#+id/search_results_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/scrollable_content_background"
android:divider="#drawable/listview_divider"
android:dividerHeight="1dp" >
</ListView>
</LinearLayout>
I am using FrameLayout in which I am having a search Textbox and Button and a ListView to be displayed in the next line of the TextBox
My layout is like this ,
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/pattern1" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="top" >
<Button
android:id="#+id/btnadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="addCustomers"
android:text="Add"
android:textColor="#000000" >
</Button>
<EditText
android:id="#+id/edtSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:ems="10"
android:hint="Search"
android:inputType="textPersonName" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="60dp"
android:gravity="bottom"
android:orientation="vertical">
<ListView
android:id="#+id/list_customers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal" >
</ListView>
</LinearLayout>
</FrameLayout>
I am using this TextView to diplay List item in the ListView,
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/txtsimple_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:gravity="center_vertical"
android:textSize="20sp"
android:textStyle="bold" />
I have given margin top attribute for the ListView, but even though it overlaps on the Button and EditText controls.
I am using a FrameLayout but of no use. Please suggest me any help!!
Any help is appreciated!!
You should use LinearLayout as parent, just set android:orientation="vertical".
<?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" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/pattern1" />
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="top" >
...
</LinearLayout>
<ListView
android:id="#+id/list_customers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal" >
...
</ListView>
</LinearLayout>
FrameLayout has no 'rules of placement' so everything just stacks on to each other.
Instead, use a LinearLayout with android:orientation="vertical"
or use a RelativeLayout and add positioning values to the childs, such as android:layout_below
+1 Neoh and remove imageview, instead put the image as background image attribute at parent view
android:background="#drawable/pattern1"
FrameLayout are used very less,beacuse they are used to display single view or views which overlaps each other.
So you should use RelativeLayout.
FrameLayout is not the best option. You can use other layouts, eg, GridLayout, RelativeLayout or ListView.
I have the below layout which contain mainly:
Relative layout, which act as header with Textview and button.
and Listview.
I would like to make the "header" which is the above relative layout to be transparent and show the listview as user scroll down the list view.
I know how to make the layout transparent, but I dont know how to show the listview as background for the "header".
<?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" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FFDBE2ED"
android:paddingBottom="0dp"
android:paddingTop="0dp"
>
<TextView
android:id="#+id/txtTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:paddingLeft="0dp"
android:text="#string/list_header"
android:textColor="#000000"
android:textSize="25sp"
android:textStyle="bold">
</TextView>
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0px"
android:layout_marginLeft="10px"
android:layout_marginRight="3px"
android:layout_marginTop="6px"
android:height="0dp"
android:text="Clear"
android:textSize="15sp"
android:width="70dp"
android:layout_alignParentRight="true"
>
</Button>
</RelativeLayout>
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/form"
android:layout_alignParentTop="true" >
</ListView>
</LinearLayout>
You are using a LinearLayout as the root container and in linear layout the views are placed one over the other so you cannot overlap one view over the other. If you want an overlapping effect you can use either the FrameLayout or the RelativeLayout as the root container.
Using RelativeLayout is a better option.
Here is sample code for this:
<?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:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<Button
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#00cc0000"
android:layout_alignParentTop="true" />
</RelativeLayout>
Here the button is overlapping the list view.
I hope this will help :)
Try moving the ListView inside of your RelativeLayout, as the first element (this ensures that it's in the back). This way, the other views are just on top of the ListView, and if you make them transparent you should get the desired effect!
Oh, and you should make the ListView then fill the RelativeLayout:
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
</ListView>
, and make the RelativeLayout fill the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
...
I'm developing an Android application.
On one activity I have a List with list items. Those list items will have a TextView (I'm using my own layout because probably I will need to add more widgets to it).
This is ListActivity 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="match_parent"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="469dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="40dp">
</ListView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/orderErrorMsg"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16dp" >
</TextView>
</RelativeLayout>
</LinearLayout>
And this is ListItem 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="100dp"
android:orientation="vertical">
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
</LinearLayout>
And, finally, this is the result:
Why TextView is not centered vertically?
You have "wrap_content" on the layout_height of the TextView = there is no space to center vertically on since the TextView is wrapped tightly.
Try changing the layout_height to "match_parent" or place gravity="center_vertical" attribute in the LinearLayout instead.
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
the answer is really simple: you have to add this to your TextView's XML:
android:gravity="center"
Currently you're not setting the text's position in the TextView but just the View's position.
Best wishes,
Tim
Try this way:
<TextView
android:id="#+id/orderToFillName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity= "center_vertical|center_horizontal"
android:textSize="20dp" />
or
android:gravity="center"
I'm trying to make a screen with a TextView at the top, the ListView in the middle and a Button at the bottom. I'd like it to be so that the TextView always is the top at the screen and the button always is the bottom, and then the ListView is in between. When the ListView exceeds the "space in the middle" I'd like the scroll-function to be only between the TextView and Button. With my attempt it just expands beyond the TextView and Button.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvLOL"
android:layout_alignBottom="#+id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
</RelativeLayout>
See if this helps(the LinearLayout wrapping the ListView should be removed(and move the layout_above/below to the ListView) if you only use it to wrap the ListView and nothing else):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvLOL"
android:layout_above="#id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Just an alternative solution to that of #Luksprog, although that's definitely the way to go for more complex layouts. I would ditch the LinearLayout that surrounds the ListView though, as it doesn't add anything, except for unnecessary complexity in the view hierarchy.
A relatively simple layout as described in your question can also be written using a LinearLayout as root and a weight on the ListView to dynamically fill up all space inbetween the TextView and Button. This weight also pushes the Button all the way to the bottom, without pushing it off.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/paper" android:orientation="vertical">
<TextView android:id="#+id/tvLOL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:text="Standardvarer" android:textSize="40dp" />
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_weight="1" />
<Button android:id="#+id/bNyVare" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Tilføj ny vare"
android:textSize="30dp" />
</LinearLayout>