I am trying to make the "Save" and "Attach Pic" buttons align at the top of my xml page but I can't quite get it to work. I got it to the point where the buttons would align just not in the same horizontal line. Oh, and is there any way that I can make both buttons align in the top left and top right corners?
Here is the xml page:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff" >
<!-- Footer Start -->
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="90dip"
android:layout_alignParentBottom="true"
android:background="#layout/footer_repeat"
android:orientation="horizontal" >
</LinearLayout>
<!-- Footer Ends -->
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip" >
<!-- Save button -->
<Button
android:id="#+id/btnSavePic"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dip"
android:text="#string/savePic"
android:layout_gravity="top|left"/>
<Button
android:id="#+id/btnAttachPic"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dip"
android:text="#string/attachPic"
android:layout_gravity="top|right"/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Added picture:
http://tinypic.com/view.php?pic=4ihut4&s=5#.Uj9eHBbnZAh
I would suggest using an eclosing LinearLayout:
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/btnSavePic"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/savePic"
/>
<Button
android:id="#+id/btnAttachPic"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/attachPic"
/>
</LinearLayout>
Try this. Hope it will work.
Change your orientation to horizontal in
So that you can get the buttons in horizontal alignment.
Pls vote if it get works.
Related
I have a ListView, the item is a RelativeLayout, at left is text, and the right side is ImageView in a LinearLayout.
I expect the height of the LinearLayout**(white background)** to be fillParent but it didn't.
The effect is :
Anyone can help on this?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_list_item"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/main_list_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/main_list_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/main_list_item_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/main_list_item_delete_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#ffffff"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/main_list_item_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/main_list_item_check_margin_lr"
android:layout_marginRight="#dimen/main_list_item_check_margin_lr"
android:contentDescription="#string/none"
android:gravity="center"
android:src="#drawable/ic_ctx_del1" />
</LinearLayout>
</RelativeLayout>
The main.xml is as below which contains the ListView:
<?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:gravity="fill"
android:orientation="vertical" >
<!-- content -->
<LinearLayout
android:id="#+id/center"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="#dimen/main_margin"
android:layout_marginRight="#dimen/main_margin"
android:orientation="vertical"
android:layout_above="#id/adview_ayout">
<ListView
android:id="#+id/main_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
</LinearLayout>
<!-- content end -->
<LinearLayout
android:id="#+id/main_layout_pb"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/transparent"
android:gravity="center"
android:orientation="vertical"
android:clickable="true"
android:visibility="gone">
<ProgressBar
android:id="#+id/main_pb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal" >
</ProgressBar>
</LinearLayout>
enter code here
I believe this is something that the parent RelativeLayout can't handle by itself - it creates kind of a vicious circle - parent defers the height to the child (wrap_content on the RelativeLayout) and the child defers the height to the parent (match_parent on main_list_item_delete_layout).
What you can do is to anchor the top of the main_list_item_delete_layout to the parent and its bottom to another view that is guaranteed to be the bottom (the LinearLayout on the left, containing the three text views):
<RelativeLayout ...>
<LinearLayout
android:id="#+id/left_layout"
android:layout_toLeftOf="#+id/main_list_item_delete_layout"
android:layout_toStartOf="#+id/main_list_item_delete_layout"
...
>
</LinearLayout>
<LinearLayout
android:id="#+id/main_list_item_delete_layout"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_alignBottom="#id/left_layout"
...>
</LinearLayout>
</RelativeLayout>
PS: in your example, in case the text on the left LinearLayout is too long, it will overflow and overlap the delete layout - hence the addition of the anchor I added to the left layout.
PS2: I know this solution is very customized to your layout. If you are set on using the RelativeLayout as a parent, you might want to try the new ConstraintLayout.
I have this xml file as a layout of an appwidget:
<?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="wrap_content"
android:orientation="vertical"
android:background="#android:color/black" >
<!-- ListView to be shown on widget -->
<ListView
android:id="#+id/listViewWidget"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/refresh_appwidget"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="refresh"
/>
</LinearLayout>
The button is not displayed, and I don't know the cause. I tested layout_with match_parent but always the same result.
How can I fix this issue?
Set a fixed height for the listview for example android:layout_height="400dp" in LinearLayout.
Or use a RelativeLayout
Or add your button as a footer to listview. So you can see the button when you scroll down
Or add your button as a header to listview.
With Relative layout you can place the button at the top or button and relative tot eh button you can place your listview.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="#android:color/black"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Button" />
<ListView
android:id="#+id/listView1"
android:layout_above="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
</ListView>
</RelativeLayout>
Try with RelativeLayout:
<?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="vertical"
android:background="#android:color/black" >
<!-- ListView to be shown on widget -->
<ListView
android:id="#+id/listViewWidget"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/refresh_appwidget"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="refresh"
/>
</RelativeLayout>
I try and see the Button but dont see the List
I have two edittext views. One of them has only one line, its the title. But the other one should fill the linearlayout to the end, but it doesn't.
I updated the code so this is my whole xml for this app. I hope someone can find what's wrong. The part that i want to form like this is the part inside the LinearLayout named addView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/addButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/addbuttonstyle"
android:layout_weight="20"/>
<ImageView
android:id="#+id/titleView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/titleview"
android:layout_weight="60"/>
<Button
android:id="#+id/orderButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/orderbuttonstyle"
android:layout_weight="20"/>
</LinearLayout>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/addView"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:id="#+id/textBoxTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="note title"
android:singleLine="true"
/>
<EditText
android:id="#+id/textBoxContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:hint="content"
/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/backgroundLayout"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
/>
</FrameLayout>
I changed textBoxTitle's height to wrap_content and I see this:
Is this what you were hoping for? Also if you want content to appear in the upper-left corner use this attribute:
<EditText
...
android:gravity="top"
/>
So i found what was wrong.
I needed to set layout_height (of the textBoxContent view) to 0dp and layout_weight (of the textBoxContent view) to 1.
The first view should have android:layout_width="wrap_content"
i want to create a screen like this on the android :
and achieving this, i write some codes like that.. But i didn't do what i want. The text area doesn't exist in the screen. What should i do ? Any opinion.. thank you in advance..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout123"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1.0"
android:gravity="fill">
<LinearLayout
android:id="#+id/linearLayout12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" >
<Button android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="118dp"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:orientation="vertical" >
<Button android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="228dp"
android:layout_height="fill_parent"
android:layout_gravity="left" >
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
</LinearLayout>
</LinearLayout>
A RelativeLayout will accomplish what you want
<?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/rightLayout"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#003300"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/topLayout"
android:layout_toLeftOf="#id/rightLayout"
android:layout_width="fill_parent"
android:layout_height="100dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#330033"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/bottomLayout"
android:layout_toLeftOf="#id/rightLayout"
android:layout_below="#id/topLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:background="#334433"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
The result as LinearLayouts and as Buttons/TextViews (since I wasn't sure which you wanted):
If you are using the LinearLayouts as a container to hold multiple views then leave it as I have it.
If you plan on having only one view in each of your "parts" change the LinearLayouts in my layout file to that type.
Ex. if you want Part 1 to be just a button change
<LinearLayout
android:id="#+id/topLayout"
to be
<Button
android:id="#+id/topLayout"
Nested views are bad so its good to avoid them if you can
you could :
Main linear layout with vertical alignment
add a new linear layout with horizontal alignment
add a new linear layout with horizontal or vertical alignment
So in the first layout ( the left part of main layout) you add a new linear layout with horizontal alignment and add the two elements you want.
In the second layout ( the right part of main layout) you add a new linear layout or directly the object you want to show
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.