I was trying to use relative layout but the header becomes in front of the text. So all was going to wrong direction.
My app screen looks like:
I would like to add also footer but every time I try it fails. Im pretty sure that all widths and heights are okay in my xml layout.
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/item1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:height="30dip"
android:text="#string/item1" />
<TextView
android:id="#+id/item2"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:height="30dip"
android:text="#string/item2" />
<TextView
android:id="#+id/item3"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:height="30dip"
android:text="#string/item3" />
<TextView
android:id="#+id/item4"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:height="30dip"
android:text="#string/item4" />
</LinearLayout>
<!-- List Divider -->
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="?android:attr/listDivider" />
<!-- ListView (grid_items) -->
<LinearLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
</LinearLayout>
</LinearLayout>
Please give me any suggestion. I think that relative layout would be great idea but I do not know much about it yet.
1/ Use a RelativeLayout for 'main'.
2/ Add the attribute android:layout_alignParentTop="true" to 'header'.
3/ Remove the LinearLayout with id 'layout', it's not needed.
4/ Add your footer to the end of the XML. When specifying its id, use #id not #+id. Give it an attribute android:layout_alignParentBottom="true".
5/ Add the following attributes to the ListView:
android:layout_below="#id/header"
android:layout_above="#+id/the_id_you_give_the_footer"
Related
I have a Listview where each listview item looks like this!
The ListViewItem is a RelativeLayout. Now I am having problem in creating the two split-screen buttons. Currently I'm doing it like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:layout_below="#+id/ReviewText">
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
<RelativeLayout>
This is working perfectly fine, but the android dev documentation here says that
Furthermore, nesting several instances of LinearLayout that use the
layout_weight parameter can be especially expensive as each child
needs to be measured twice. This is particularly important when the
layout is inflated repeatedly, such as when used in a ListView or
GridView.
Can I improve my code for performance. If yes, How? Is there any other way to have two buttons split evenly without using LinearLayout?
In order to minimize layout nesting, so to optimize performances, I'd write a layout (which does take advantage of the layout's relativity) like this one:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<View
android:id="#+id/dummy"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:visibility="invisible"
/>
<Button
android:id="#+id/btnLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<Button
android:id="#+id/btnRite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<RelativeLayout>
I put a dummy View which is aligned to the center, then 2 buttons which I align to the left and to the right side of it.
For a simple layout like your's LinearLayout's are perfect choice. The only thing to be wary about is nesting layout weight's inside a view whose parent already has a layout-weight assigned. This is perfectly ok:
<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:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
While this is not:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" > <!-- nesting this way is bad for performance -->
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<!-- this is ok -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<place top item layout here>
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="horizontal"
android:weightSum="2">
<RelativeLayout
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true"
android:layout_weight="1"
>
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Hope , The performance can be improved if you follow the listed points
First thins don't use much XML code when you need something dynamically
instead of creating the 2 relative layouts in XML , create a class where it extends Linear layout/Relative layout
add the views which you want to show in the list item to the above layout
Measure the height and width dynamical with in the same class
And make sure the layout is parametrized where you can pass the content dynamically
Finally , you can inflate the created view , Using getview method of an adapter**
Refer the following link
Dynamic listview content loader
This is a layout I'm having problems with (this is for ListActivity):
<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/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
<Button
android:id="#+id/negative_button"
style="#style/Button"
android_alignParentBottom="true"
android:layout_below="#android:id/empty"
android:layout_weight="1" />
</RelativeLayout>
What happens right now is the list is below header TextView ("path") as it should be, the button is at the bottom also as it should be, but the ListView is not aligned between the header (textview) and footer (button). Instead, the button is simply slapped on top of listview. How can I fix that?
You need to define the footer and header before the list, try something like this:
<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/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<!-- to see the button, you must to declare its width/height here
and not (as I think you did) in the style.xml -->
<Button
android:id="#+id/negative_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Button"
android:layout_alignParentBottom="true" />
<!-- also layout_weight doesnot change anything in RelativeLayout -->
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path"
android:layout_above="#id/negative_button" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</RelativeLayout>
The TextView "empty" should not be below the TextView "empty".
If the Button must be at the bottom of the screen you can use
android:layout_alignParentBottom="true"
For the Button
Otherwise you can use this 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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path">
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</LinearLayout>
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/container" />
</RelativeLayout>
Or ever add the Button as a footer of you Listview :
mListView.addFooterView(mButton);
http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
The only things that you used are the ListView, the first TextView as a "top bar" and the Button as a "bottom bar", right? If it is the case, why did you keep the empty TextView?
Try to remove it and try this 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:orientation="vertical" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<!-- work also with android:layout_height="0dip" -->
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Saw on these questions, it might be help you:
1. Layout for ListView at top and Buttons in Bottom?
2. Android Layout with ListView between a "top bar" and "bottom bar"
3. Add a button in bottom of listview when the listview is empty (using ListActivity)
Hope this will be helpful and you'll have the expected result.
Attached image shows an interface. Notice the black part on the bottom. How do I pull my footer image to the bottom? I used fill_parent on my middle layout but it fills the whole screen and the footer wont show.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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"
android:background="#ffffff" >
<!-- Header Starts-->
<LinearLayout
android:id="#+id/headerForSearch"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#layout/headerbackground"
android:paddingTop="5dip"
android:weightSum="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/footprint"
android:layout_width="wrap_content"
android:layout_weight="0.09"
android:layout_height="fill_parent">
</ImageView>
</LinearLayout>
<!-- Header Ends -->
<!-- About Us -->
<LinearLayout android:id="#+id/searchPBody" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip" android:orientation="vertical" android:layout_below="#+id/headerForSearch" android:layout_alignParentLeft="true">
<ImageView android:layout_marginTop="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/about_us_header"
/>
</LinearLayout>
<!-- Login Form Ends -->
<RelativeLayout
android:id="#+id/searchPBody2"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_marginRight="15dip"
android:layout_marginLeft="15dip"
android:layout_marginTop="15dip"
android:layout_marginBottom="15dip"
android:layout_below="#+id/searchPBody">
<TextView android:text="Place Name:"
android:layout_marginTop="23dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:id="#+id/placeNameTV" />
<EditText android:hint="Type here"
android:id="#+id/searchQuery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#+id/placeNameTV"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/searchBtnLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#+id/searchPBody2">
<Button
android:id="#+id/submitQuery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_below="#+id/searchQuery"
android:layout_toRightOf="#+id/placeNameTV"/>
</LinearLayout>
<!-- Footer Starts -->
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/searchBtnLayout"
android:background="#layout/footer_repeat"
android:gravity="center"
android:layout_alignParentBottom="true">
<TextView android:textSize="12dip"
android:textColor="#ffffff"
android:text = "© Meet&Co"
android:layout_width="wrap_content"
android:layout_marginTop="10dip"
android:layout_height="wrap_content"
android_weight="0.33" />
</LinearLayout>
<!-- Footer Ends -->
</RelativeLayout>
</ScrollView>
You can use weight attribute.
for example see the headerfooter.xml in this answer you can make your xml like that.
Using fill_parent on middle layout make your middle layout take all screen height left.
You can have relative layout as main layout and set footer android:layout_alignParentBottom="true".
Easiest way is to use a RelativeLayout for your entire layout.
You can then set the footer attribute layout_alignParentBottom="true" which moves it to the bottom. You will also have to set the body to layout_above="#+id/idoffooter", so that it does not disappear behind the footer.
Another way would be to use a vertical LinearLayout where you give the body a weight of 1, but the RelativeLayout way is imho better.
I need to hold my every view in one layout, so that i can move them all at once... But when i tried to put them all in a layout which should be in another main layout, they cannot be seen. What am i doing wrong?
I found out that the layout called leftLayout cannot be seen. I made different colours of layouts and it showed me the main one, called menu. I tried visibility true but it didn't work as well.
My design page is like this:
It should appear like this, but i see only white window when i compile...
Here's my Xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/menu"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/leftLayout"
android:addStatesFromChildren="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="70dp"
android:orientation="vertical" >
<TextView
android:id="#+id/leftMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:enabled="true"
android:text="Left Menu"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<ListView
android:id="#+id/list"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginTop="70dp"
android:enabled="true" >
</ListView>
</RelativeLayout>
</RelativeLayout>
Solved! I figured out that i was just doing mistake in java codes, while setting margin. So here the code's allright.
In relative layout you always need specify the location of each child with respect to the parent or the between the children. Since you have specified the layout all the layouts will be copied one over the other. You can use child alignment options like "ABOVE", "BELOW" w.r.t to other layouts.
The below code looked like what you wanted,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/menu"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/leftLayout"
android:addStatesFromChildren="true"
android:layout_width="100dp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignleft="#+id/menu" >
<TextView
android:id="#+id/leftMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:enabled="true"
android:text="Left Menu"
android:layout_weight="0"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<ListView
android:id="#+id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:enabled="true"
android:layout_marginTop="50dp"
android:layout_weight="1"
android:layout_below="#+id/leftMenu" >
</ListView>
</RelativeLayout>
</RelativeLayout>
You are using a relative layout yet you have not specified the location of the child views relative to each other.
In Relative layout you must specify this, look here: http://developer.android.com/resources/tutorials/views/hello-relativelayout.html
Did you tried with LinearLayouts?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<LinearLayout
android:id="#+id/leftLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="70dp"
android:orientation="vertical" >
<TextView
android:id="#+id/leftMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:enabled="true"
android:text="Left Menu"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="70dp"
android:enabled="true" >
</ListView>
</LinearLayout>
</LinearLayout>
I have to display three text views above a map in one of my activities and I have the following xml...but I don't know why I see no text view only my map.
Here is my xml file:
<?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:id="#+id/first"
android:background="#0000ff">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:id="#+id/bar"
android:layout_below="#id/first"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/prod1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:textSize="12px"
android:text="Sursa"
/>
<TextView android:id="#+id/prod2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingLeft="83dip"
android:textSize="12px"
android:text="destinatie"
/>
<TextView android:id="#+id/prod3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:paddingLeft="85dip"
android:textSize="12px"
android:text="data"
/>
</LinearLayout>
<com.google.android.maps.MapView
android:id="#+id/mapview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:enabled="true"
android:clickable="true"
android:apiKey="0egkyrbiooKAfYyj43YB6wW1cmlG-TiIILXjpBg"
/>
</RelativeLayout>
That's because you set the height of your MapView to 'fill_parent'. Set to some fixed height just for debugging purposes and you should see your text views - they may not appear above the map, as you want, because you've set the LinearLayout to go below the RelativeLayout and it contains the MapView.
Remove the code from the LinearLayout:
android:layout_below="#id/first"
and add this to the MapView element:
android:layout_below="#id/bar"
You can also use MERGE tags as the root for your layout, which allows for multiple layouts to be layered over each other.