I am trying to develop an Android app that should look like an iOS I have done last month. There is a view with a background image and three buttons. The background image has a header part and a footer part, and I need three buttons to stay between these two parts. This is the screenshot from the iOS version and the desired output for my android activity:
And now what I have now as layout file for the activity:
<?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"
android:background="#drawable/fondo_pantalla"> >
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"
android:drawableLeft="#drawable/actividades_izq"
android:text="Actividades" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:drawableLeft="#drawable/agenda_izq"
android:paddingTop="60dp"
android:text="Agenda" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button2"
android:drawableLeft="#drawable/suscribete_izq"
android:text="Recibir Información de Juventud" />
</RelativeLayout>
I want that the layout looks the same or very similar on all devices, in portrait mode.
Now it looks very different depending on the screen size.
Any help is welcome.
I think using Linear Layout with weight will solve your problem. Try this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="3"
android:background="#drawable/ic_action_search">
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_launcher"
android:text="Agenda" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_action_search"
android:text="Actividades" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:drawableLeft="#drawable/fail"
android:text="Recibir Información de Juventud" />
</LinearLayout>
try this and let me know the result.
<?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"
android:background="#drawable/fondo_pantalla"> >
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/button1"
android:drawableLeft="#drawable/actividades_izq"
android:text="Actividades"
layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawableLeft="#drawable/agenda_izq"
android:paddingTop="60dp"
android:text="Agenda"
layout_weight="1"/>
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawableLeft="#drawable/suscribete_izq"
android:text="Recibir Información de Juventud"
layout_weight="1"/>
</LinearLayout>
I think your problem is trying to provide on layout for all screensizes and densities. This will hardly be possible. But what you can do is create seperate folders in your res-folder
layout-small
layout-medium
layout-large
And so on. Please read this article carefully because in your preview you are supporting nearly every screensize and density with just one layout...
Put your custom layouts into the seperate layout-folders to give the users the experience they want. Hope it helps ;)
Start by putting button2 to :
android:layout_centerInParent="true"
and button1 to :
android:above="#+id\button2"
That way at least its centered and can adjust better to screen sizes.
Related
I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />
Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)
Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your 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:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>
I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.
I've got a bit of a problem aligning my buttons. I want to get them at (roughly) 1/3rd and 2/3rd of my screen (I provided a screenshot below to make things a bit more clear)
My code is the following:
<?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="#drawable/mainbg">
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
<Button
android:text="#string/midbutton"
android:background="#drawable/silvertablesbuttonbglang"
android:id="#+id/midbutton"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
<RelativeLayout
android:id="#+id/underbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/underbartekst"
android:background="#drawable/silvertablesunderbar"
android:id="#+id/underbarbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:textSize="20dp"
android:gravity="left|center_vertical" >
</Button>
</RelativeLayout>
I'm trying to get it to look like this: (I'm sorry if posting screenshot mock-ups is frowned upon here, I just couldn't think of a better way to clear up what I'm trying to do)
It seems that I can't post images because I'm too new here... So here is a link to the screenshot: http://i.imgur.com/l3b3z.png
My initial idea was just wrapping a vertical linear layout around the two buttons and putting empty textviews above and in between the two, which would actually work if this app was meant to be running on one screen size, but I'm pretty sure it'd mess up on every phone with another screen resolution. I solved this problem for the bar at the bottom by using a relativelayout with android:layout_alignParentBottom="true", but I can't really think of a way to snap to 1/3rd or 2/3rd. Is there a way to do this that will work with various screen resolutions?
Edit:
I solved my problem! I tried to post it as an answer, but I can't until in 8 hours. Will do then, but for now, I'll just post it as an edit here:
I've placed a TextView of 0x0 in the middle of the screen, and put RelativeLayouts on top of and below it, filling the screen. Then I placed two TextViews of 0x0 in the middle of those layouts, and within those layouts, two new RelativeLayouts. One below the highest TextView, one above the lowest. I placed my buttons in the center of those layouts. It works like a charm, and does not rely on anything but the code itself. This is my code now:
<?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="#drawable/mainbg">
<TextView
android:text=" "
android:id="#+id/ankermidden"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankerboven"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankerboven">
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/ankerveldonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankeronder"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankeronder">
<Button
android:text="#string/midbutton"
android:background="#drawable/silvertablesbuttonbglang"
android:id="#+id/midbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/underbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/underbartekst"
android:background="#drawable/silvertablesunderbar"
android:id="#+id/underbarbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:textSize="20dp"
android:gravity="left|center_vertical" >
</Button>
</RelativeLayout>
So yeah, that was easier than I thought.
I have found a solution! One that is completely relative to itself, and does not rely on pixels or density pixels at all.
I've placed a TextView of 0x0 in the middle of the screen, and put RelativeLayouts on top of and below it, filling the screen.
Then I placed two TextViews of 0x0 in the middle of those layouts, and within those layouts, two new RelativeLayouts. One below the highest TextView, one above the lowest. I placed my buttons in the center of those layouts.
It works like a charm, and does not rely on anything but the code itself.
This is my code now:
<?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="#drawable/mainbg">
<TextView
android:text=" "
android:id="#+id/ankermidden"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankerboven"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankerboven">
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/ankerveldonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankeronder"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankeronder">
<Button
android:text="#string/midbutton"
android:background="#drawable/silvertablesbuttonbglang"
android:id="#+id/midbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/underbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/underbartekst"
android:background="#drawable/silvertablesunderbar"
android:id="#+id/underbarbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:textSize="20dp"
android:gravity="left|center_vertical" >
</Button>
</RelativeLayout>
So yeah, that was easier than I thought.
Bill Gary suggested using a margin in dp which would keep the same proportions on different screen sizes, but after a lot of experimenting, things end up looking weird for me on different screens again.
I'll do some more experimenting before I'll get back to that, because this whole dip-margins thing is weirding me out... Things that should be displayed properly are not, and things that just shouldn't, do, on some screen resolutions.
I'll start doing my homework on that stuff, but for now, albeit it being a bit long, the code I posted above works flawlessly for me.
try this, you may have to adjust the dp android:layout_marginTop="150dp"
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_marginTop="150dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
I need a screen that is filled with an image as background and three buttons floating over the image. I created this fine in xml and in vertical orientation it does what I want. However in landscape it doesnt so I have tried to add a scrollview and am getting very confused as to how to combine these elements correctly. After various tries I reached the stage shown below
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_height="fill_parent"
android:layout_width="fill_parent" android:id="#+id/home_container"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:src="#drawable/alert"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:scaleType="fitCenter" android:clickable="true"
android:enabled="true" />
<LinearLayout android:layout_width="fill_parent"
android:paddingBottom="25px" android:paddingLeft="25px"
android:orientation="vertical" android:paddingTop="90px" android:id="#+id/toplinear"
android:layout_height="fill_parent" android:paddingRight="25px"
android:gravity="top">
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/startprogrambutton" android:paddingBottom="12dp"
android:text="#string/text1" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/button1" android:paddingBottom="12dp"
android:layout_marginTop="10dp" android:background="#drawable/webview_buttons"
android:text="#string/text2" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/button2" android:paddingBottom="12dp"
android:layout_marginTop="10dp" android:background="#drawable/webview_buttons"
android:text="#string/text3" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
<Button android:layout_width="fill_parent" android:textSize="20dp"
android:id="#+id/button3" android:paddingBottom="12dp"
android:layout_marginTop="10dp" android:background="#drawable/webview_buttons"
android:text="#string/text4" android:layout_height="wrap_content"
android:paddingTop="12dp"></Button>
</LinearLayout>
Now it errors with scrollview can only contain one child. Is there some way to rearrange so that I can have my image and the floating buttons all scroll together?
put both ImageView and LinearLayout in another Vertical LinearLayout. This solves your scrollView child problem.
<ScrollView>
<LinearLayout>
<Imageview />
<LinearLayout />
</LinearLayout>
</ScrollView>
Why don't you give image as background for linearLayout with buttons, it will serve your purpose.
In case you want to scroll only your buttons and not the ImageView you can try this:
<LinearLayout>
<Imageview />
<ScrollView>
<LinearLayout>
<Button />
<Button />
<Button />
<Button />
</LinearLayout>
</ScrollView>
</LinearLayout>
Hope this helps!
Just so you know, you're not limited to trying to find a single solution for both orientations. You can have 2 separate layouts for both orientations by specifying separate layout xml files in a land & port directory. See the official documentation here:
http://developer.android.com/guide/practices/screens_support.html
I want to put a scrollable EditText above a row of buttons such that the text component fills all the vertical space left free by the buttons. This is proving surprisingly difficult, not least because the ADT is buggy: it suggests that this layout will do and it does in Eclipse but not in the real application!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/view1"/>
<LinearLayout android:id="#id/view1"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<!-- buttons go here -->
</LinearLayout>
</RelativeLayout>
In this layout the text stretches to the full screen, as you might expect, i.e., it goes under the button but the ADT graphical layout tool shows it stopping just above the button. OTOH if you give it a wrap_content height then of course it doesn't stretch. layout_weight is of no help either.
So, is there a way? You must test your answer in the emulator or on a real device, not merely in Eclipse.
Precision: what makes me think this is not working and that the text widget extends under the buttons is the shape of the scrollbar at the bottom (see pic. below): it should be rounded at both ends and instead it looks like the bottom extends farther. If you compares its shape at the bottom with the shape it has at the top (which unfortunately I was unable to capture: it disappears too fast) it is very clearly different. OTOH the text widget boundary looks as expected. This is very confusing. Maybe just a minor bug in Android?
try this code :
<?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">
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:inputType="textMultiLine" >
<requestFocus></requestFocus>
</EditText>
<LinearLayout
android:layout_height="wrap_content"
android:id="#+id/linearLayout1"
android:layout_width="match_parent">
<Button
android:text="Button"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button1"
android:layout_width="0dp"></Button>
<Button
android:text="Button"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:layout_width="0dp"></Button>
<Button
android:text="Button"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button3"
android:layout_width="0dp"></Button>
</LinearLayout>
</LinearLayout>
This should work
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:id="#+id/view1" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button android:text="Button" android:layout_weight="1"
android:layout_height="wrap_content" android:id="#+id/button1"
android:layout_width="0dp"/>
<Button android:text="Button" android:layout_weight="1"
android:layout_height="wrap_content" android:id="#+id/button2"
android:layout_width="0dp"/>
<Button android:text="Button" android:layout_weight="1"
android:layout_height="wrap_content" android:id="#+id/button3"
android:layout_width="0dp"/>
</LinearLayout>
<EditText android:id="#+id/text1" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_above="#id/view1"
android:gravity="top"/>
</RelativeLayout>
I did the same thing with TextView and a Button at the bottom.I tried to put EditText in place of TextView there and it works fine for me. You can try this -
<?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:background="#FFFFFF">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:text="Add New Template"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/editText"
android:layout_alignParentTop="true"
android:layout_above="#id/add_acronym"
/>
</RelativeLayout>
Here is the snapshot-
I have been working on an app for my school recently and wanted to clean it up a bit before possibly publishing it. On the scheduling portion of the app, I have 5 buttons that perform actions on a ListView that is also on the screen at the same time. However, I have the issue when I have around 6 or more events on the screen as once the list view takes over the screen and pushes the buttons off the screen, making it so that I cannot delete the events, make new ones, and so on.
I tried setting the list view to a static size (400px) which worked for normal screen orientation, but if the phone is set to landscape view you cannot see the buttons either. With my current code it would appear to work in the XML viewer but in practice is not the case.
This is the code without the static size setting:
<?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:background="#551A8B"
android:textColor="#FFD700"
>
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3">
</Button>
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button3"
android:layout_alignTop="#id/button3">
</Button>
<Button android:text="#string/delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button4"
android:layout_alignTop="#id/button4">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:text="#string/Previousweek"
android:layout_below="#id/button3">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:text="#string/Next"
android:layout_below = "#id/button3"
android:layout_toRightOf = "#id/button7">
</Button>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp" >
</ListView>
</RelativeLayout>
The XML viewer for this code is:
Which would lead me to believe it would work fine. I tested it on my emulator and got the following result after entering a bunch of silly events however:
This result is consistent with multiple versions of the emulator.
How I can fix this problem without using static size constraints that cause landscape orientation issues?
Separate the buttons into a separate RelativeLayout and enclose this and the ListView in a vertical LinearLayout.
Then:
<LinearLayout android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout [...]
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- Your buttons -->
</RelativeLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout
The key point here is the height and weight on the ListView. This means that it fills the remaining space in the LinearLayout after space has been correctly allocated for the buttons.
Add a android:weigth in your listView tag and set the android:weigth value to 1. This will work when your list view height and width is set to fill_parent and your list view is covering entire layout. So try it, it will work.
One simple solution would be to separate the buttons in their own relative layout and put the whole thing in a linear layout, eg:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#551A8B"
android:textColor="#FFD700">
<!-- your buttons -->
</RelativeLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp">
</ListView>
</LinearLayout>
Use a vertical LinearLayout with two rows of Buttons (each row as a LinearLayout), then give the ListView a layout_weight value of "1". In fact, use layout_weight to clean up the size of your buttons too.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:id="#+id/button3" />
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button android:text="#string/Delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Previousweek" />
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Next" />
</LinearLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:textColor="#FFD700"
android:textSize="10sp" >
</ListView>