Since my UI is quite simple I'd like to cater for both landscape and portrait in one xml file.
In portrait mode everything is as I exactly want it to be.
In landscape the main_title TextView is barely shown. Is there a work around for this?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:background="#color/background"
android:layout_width="fill_parent" android:padding="20dip"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:layout_height="fill_parent"
android:layout_gravity="center" android:orientation="vertical"
android:layout_marginTop="30dip" android:id="#+id/LinearLayout01"
android:layout_width="fill_parent">
<TextView android:layout_marginBottom="15dip"
android:textSize="24.5sp" android:layout_height="wrap_content"
android:id="#+id/TextView01" android:layout_gravity="center"
android:text="#string/main_title" android:layout_width="wrap_content"></TextView>
<Button android:layout_marginBottom="15dip"
android:layout_height="wrap_content" android:id="#+id/start_button"
android:text="#string/start_label" android:layout_width="fill_parent"></Button>
<TextView android:textSize="18sp" android:layout_height="wrap_content"
android:id="#+id/TextView02" android:text="#string/time_window_please_select_label"
android:layout_width="wrap_content"></TextView>
<Spinner android:layout_height="wrap_content" android:id="#+id/spinner"
android:prompt="#string/time_window_prompt" android:layout_width="fill_parent"></Spinner>
<TextView android:layout_height="wrap_content"
android:layout_marginBottom="10dip" android:id="#+id/status_label"
android:layout_width="wrap_content"></TextView>
<TextView android:layout_height="wrap_content"
android:layout_marginBottom="10dip" android:id="#+id/status_time_label"
android:layout_width="wrap_content">
</TextView>
<ImageView android:layout_marginTop="60dip" android:id="#+id/info_button"
android:src="#drawable/info" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="bottom|right" />
</LinearLayout>
</ScrollView>
Links:
http://www.doc.ic.ac.uk/~am907/landscape.png
http://www.doc.ic.ac.uk/~am907/portrait.png
looks like the problem lies with your margin and padding values.
best option may be to have 2 different layouts for this, 1 being portrait and other being landscape. create another folder named layout-land and layout-port in your res folder. then copy the layout file into both of these folders and make appropriate changes for the orientation.
see the android docs for more info about providing different resources for different orientations and so on: http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources
add a blank textview at the top of the file, ie above the textview which is not visible. maybe your content area is very big and the screen is not able to support it. The problem that you are facing should not be happening in the first place.... but this is a work around. Also try switching emulators...
Related
I have an app which is supposed to work on different layouts of phone and tablets.
On my phone it uses a vertical layout and uses all the screen while on my tablet it stays tiny instead of using the whole screen.
I used a relative layout but referring to fill_parent for widths thinking that this was the right way to use all the parent's space (the whole screen).
Here is my code:
<?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="#bbbbbb" >
<!-- Parte1 -->
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Distanza Km m Gare"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:onClick="OnClickButton1"
android:text="#string/calcola" />
<EditText
android:id="#+id/editText1_1"
android:layout_width="#dimen/single_textEdit"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:inputType="numberDecimal"
android:singleLine="true"
android:textSize="40sp"
android:gravity="center"
android:imeOptions="actionDone"
android:layout_toRightOf="#+id/button1"
android:nextFocusDown="#+id/editText1_2"
android:layout_below="#+id/textView1"/>
<EditText
android:id="#+id/editText1_2"
android:layout_width="#dimen/double_textEdit"
android:layout_height="50dp"
android:layout_below="#+id/textView1"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:layout_toRightOf="#+id/editText1_1"
android:gravity="center"
android:inputType="numberDecimal"
android:nextFocusDown="#+id/editText2_1"
android:singleLine="true"
android:textSize="40sp" />
<Spinner
android:id="#+id/gare_spinner"
android:layout_width="fill_parent"
android:layout_below="#+id/textView1"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#layout/border"
android:gravity="center_vertical|center_horizontal"
android:dropDownSelector="#drawable/ic_launcher"
android:layout_toRightOf="#+id/editText1_2" />
....
Make a new layout folder. Your normal folder is just called layout, but make a second one called layout-sw600dp. This is for screen width of 600 pixels, so basically for tablets. You can make the exact same xml layouts and just give them different dimensions in here.
I used relativelayout and here is what I've got. I can't get the image to fill the section I want. I don't know how to fix it. I've heard something about using layout weight, is that some thing I should use?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<ImageView
android:id="#+id/imagehome"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_margin="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvtitle1"
android:src="#drawable/one" />
<TextView
android:id="#+id/tvtitle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Voted Best Dentist five years running by"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvtitle2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"/>
<TextView
android:id="#+id/tvtitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="The Oakland Tribune"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvhome"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"/>
<TextView
android:id="#+id/tvhome"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" You'll be cared for by our highly trained staff of dental professionals,energized to work as a team while providing the highest quality of care for your dental health. We offer complete dentistry for the entire family at a single location. "
android:textColor="#4C2016"
android:textSize="15dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/special"
android:layout_marginBottom="25dp" />
<Button
android:id="#+id/special"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:text="Specials"
android:textColor="#F6E6C6"
android:textSize="17dp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvbutton"
android:layout_marginBottom="15dp" />
<TextView
android:id="#+id/tvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App provided by Bay Area Dental Marketing"
android:layout_centerHorizontal="true"
android:textSize="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
on the xml file,
and on the device
It got better but it'snot there yet!
Not sure how much flexibility you have but the best solution would be to remove the text and image from the background and add them as views instead. As you have experienced unless each piece is added as a view it is nearly impossible to guarantee it will look correct on all devices.
When working with multiple screen sizes, I have found it best practice to either (a) use RelativeLayout, or (b) set a LinearLayout inside a ScrollView.
Use RelativeLayout so you won't have to specify the pixels.
Alternativley if you are doing that for one particular phone select corresponding screen size in the XML designer in Eclipse. Yet, using RelativeLayout guarantees it will work on all the phones
Even using the suggested answers above you may still run into problem on different size screens. The best solution I can think of is to create separate image resources for the background and foreground then add an image view with the foreground image as the source.
<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/background" >
<!-- This method makes this layout redundant, dont need this anymore
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:layout_marginRight="15dip"
android:layout_marginTop="255dip"
android:orientation="vertical" >-->
<!-- put the foreground image in an imageview -->
<ImageView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/foregroundImage"/>
<TextView
android:layout_width="276dp"
android:layout_height="132dp"
android:textSize="15dp"
android:gravity="center_vertical"
android:text="some text"
android:textColor="#4C2016"/>
<Button
android:id="#+id/special"
android:layout_width="131dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:layout_marginTop="20dip"
android:layout_marginLeft="75dip"
android:textSize="17dp"
android:textStyle="bold"
android:text="Specials"
android:textColor="#F6E6C6" />
</LinearLayout>
Can someone tell me why is the text in this layout is centered horizontally while in landscape mode, but becomes left-aligned in portrait mode?
EDIT:
Its that way because there's no pixel limit specified for text width (ie 500dip). So if its wrap_content, android simply flows the text across all of available space. I guess its a "correct" behaviour for a text component, but completely unwanted.
<LinearLayout android:id="#+id/progressLayout2"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_centerHorizontal="true" android:layout_centerVertical="true"
android:orientation="vertical">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_centerHorizontal="true"
android:layout_centerVertical="true" android:text="#string/splash_text"
android:id="#+id/heading_splash_text" android:textSize="45dip"
android:textColor="#A00000" android:layout_alignParentTop="true"
android:layout_gravity="center" android:paddingBottom="70dip"
android:paddingTop="50dip" android:typeface="normal" android:textStyle="bold"/>
</LinearLayout>
I agree with some of the changes from the first answer, but I assume since you have 'wrap_content' on the linear layout, and you don't have the namespace thing on there, this layout is inside some other stuff.
First, you pretty much need the 'fill_parent' width, even if you don't do height. Where the gravity should be specified is generally confusing, but the following works. I added a background color on the text so you can see where that is relative to everything else.
Add back in padding if needed.
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Some text"
android:textSize="45dip"
android:textColor="#A00000"
android:typeface="normal"
android:background="#444444"
android:textStyle="bold"/>
Try this:
<LinearLayout android:id="#+id/progressLayout2" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="vertical">
<TextView android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:text="test"
android:id="#+id/heading_splash_text" android:textSize="45dip"
android:textColor="#A00000"
android:gravity="center_vertical|center_horizontal"
android:typeface="normal" android:textStyle="bold"/>
</LinearLayout>
I have a fairly standard layout for the first screen of the setup wizard on my app. I have been developing it with a solid color background which I defined in a theme. I have recently got a png file that I would like to used as the background. This works fine on all screens apart from the 3 screens for the setup wizard. The problem being that only the first textview is drawn. I used the hierachy viewer and the other views where not listed.
These are the only screens that use an include statement so I suspect this may be the root of the problem but even if I take out the include statement I still have the problem.
<?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">
<TextView
android:id="#+id/welcome"
android:text="#string/welcome"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:gravity="center_horizontal"
android:textColor="#433A33"
android:textStyle="bold">
</TextView>
<ImageView
android:id="#+id/mainIcon"
android:src="#drawable/main_icon"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerHorizontal="true"
android:layout_below="#+id/welcome">
</ImageView>
<TextView
android:id="#+id/description"
android:text="#string/description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_below="#+id/mainIcon"
android:gravity="center_horizontal"
android:textColor="#433A33"
android:textSize="15dip">
</TextView>
<TextView
android:id="#+id/choice"
android:layout_below="#id/description"
android:text="#string/choice"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:gravity="center_horizontal"
android:textColor="#433A33"
android:textSize="15dip">
</TextView>
<Spinner
android:id="#+id/language"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/choice"
android:prompt="#string/languagePrompt"
android:textSize="10dip"
android:layout_marginRight="20dip"
android:layout_marginLeft="20dip">
</Spinner>
<include layout="#layout/wizard_bottom" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</RelativeLayout>
Let me know if anybody has any ideas.
Edited to show the problem with a screen shot
The problem was that the theme I was using was setting the background to all Views rather than just the window background. So the background that is in the screen shot is the background for that one imageView and all the other views where pushed off the page.
I changed the them accordingly and it working fine now
I have a scrollview ( mainly for landscape purposes, as I don't have a different xml file, I'm using android:configChanges="orientation")
which contains a RelativeLayout and within it there's a Linear Layout.
The code looks like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:background="#color/background"
android:padding="10dip" android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_gravity="center"
android:orientation="vertical">
<TextView android:textSize="24.5sp" android:textStyle="bold"
android:layout_height="wrap_content" android:layout_gravity="center"
android:text="#string/main_title" android:layout_width="wrap_content">
</TextView>
<ImageView android:src="#drawable/icon"
android:layout_marginTop="20px" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center" />
<TextView android:textSize="15sp" android:layout_marginTop="20px"
android:layout_height="wrap_content" android:text="#string/time_window_please_select_label"
android:layout_width="wrap_content"></TextView>
<Spinner android:layout_height="wrap_content" android:id="#+id/spinner"
android:prompt="#string/time_window_prompt" android:layout_width="fill_parent"></Spinner>
<Button android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/start_button"
android:text="#string/start_label" android:layout_width="fill_parent"></Button>
<TextView android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/status_label"
android:layout_width="wrap_content"></TextView>
<TextView android:layout_height="wrap_content"
android:layout_marginTop="20px" android:id="#+id/status_time_label"
android:layout_width="wrap_content">
</TextView>
</LinearLayout>
<ImageView android:id="#+id/info_button" android:src="#drawable/info"
android:layout_alignParentBottom="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="bottom|right" />
</RelativeLayout>
</ScrollView>
Everything works fine, both in portrait and loandscape mode except for the ImgView (info_button) at the very end.
I used a Relative Layout because I thought I'd be able to position it on bottom right hand corner (a bit of margin would be desirable bottom and right) of the screen...
This is what I get instead...
http://www.doc.ic.ac.uk/~am907/wrong.png
any help appreciated!
EDIT: The link to the full XML file http://pastebin.com/Cce4AC4v (for some reason I can't see it all in preview mode but it's there when I try to re-copy in the text form)
Thanks
andreas
Instead of:
android:layout_gravity="bottom|right"
Try:
android:layout_alignParentRight="true"
Edit: Reading your question again, I believe the problem is the ScrollView. I'm not sure why you are using this type of layout. You could get rid of it in favor of the relative layout and that should solve your problem. I'm not sure why you feel this activity needs to support landscape. If so, I would boil the ScrollView down to a single view object and try to troubleshoot that.
I have understood that u want to place that image at bottom - right location. If so, then give:
<ImageView android:id="#+id/info_button" android:src="#drawable/info"
android:layout_alignParentBottom="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true" />
If this is not the solution, could you place ur desired screen to be prepared, so that we can cross check ur layout.