I am developing an Android app (see screenshots).
I have a layout that looks fine in the graphical editor. However, the bottom 1/4 of the screen is clipped from view when the app is run in the emulator, as well as on an android phone. The app has several activities, and the problem seems to be widespread to all of them.
Here's the layout I'm using.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" android:clipChildren="false" android:clipToPadding="false" android:layout_height="fill_parent">
<ImageView android:layout_height="wrap_content" android:src="#drawable/simpsonstextblack" android:layout_width="fill_parent" android:id="#+id/TitleImage" android:paddingBottom="25dp"></ImageView>
<RelativeLayout android:layout_below="#+id/TitleImage" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/RelativeLayout1" android:padding="5dp">
<Button android:text="Take the Simpsons Challenge" android:gravity="center" android:clickable="true" android:id="#+id/ChallengeButton" android:layout_width="fill_parent" android:textSize="20dp" android:background="#drawable/buttonbackgroundblue" android:layout_height="50dp"></Button>
<TextView android:layout_width="fill_parent" android:layout_below="#+id/ChallengeButton" android:layout_alignLeft="#+id/ChallengeButton" android:id="#+id/spacer1" android:layout_height="6dp"></TextView>
<Button android:layout_width="fill_parent" android:text="Free Play" android:clickable="true" android:id="#+id/FreePlayButton" android:layout_height="50dp" android:textSize="20dp" android:background="#drawable/buttonbackgroundblue" android:layout_below="#+id/spacer1"></Button>
<TextView android:layout_width="fill_parent" android:id="#+id/spacer2" android:layout_below="#+id/FreePlayButton" android:layout_alignLeft="#+id/FreePlayButton" android:layout_height="6dp"></TextView>
<Button android:layout_height="50dp" android:textSize="20dp" android:id="#+id/HighScoreButton" android:background="#drawable/buttonbackgroundblue" android:layout_width="fill_parent" android:text="High Scores" android:layout_below="#+id/spacer2"></Button>
<TextView android:layout_width="fill_parent" android:id="#+id/spacer3" android:layout_below="#+id/HighScoreButton" android:layout_alignLeft="#+id/HighScoreButton" android:layout_height="6dp"></TextView>
<Button android:layout_height="50dp" android:textSize="20dp" android:id="#+id/HelpButton" android:background="#drawable/buttonbackgroundblue" android:layout_width="fill_parent" android:text="Help" android:layout_below="#+id/spacer3"></Button>
</RelativeLayout>
<RelativeLayout android:layout_below="#+id/RelativeLayout1" android:layout_width="fill_parent" android:id="#+id/RelativeLayout2" android:clipChildren="false" android:clipToPadding="false" android:layout_height="fill_parent">
<TextView android:id="#+id/spacer1" android:layout_width="fill_parent" android:layout_height="30dp"></TextView>
<TextView android:layout_below="#+id/spacer1" android:layout_height="wrap_content" android:layout_width="fill_parent" android:textAppearance="?android:attr/textAppearanceMedium" android:id="#+id/QuoteText" android:text='"A woman is a lot like a refrigerator. Six feet tall, 300 pounds…it makes ice. Heres some extra filler text just to demonstrate to you that if you add enough text it will most likely get clipped at some random point in the screen seemingly for no reason."'></TextView>
</RelativeLayout>
</RelativeLayout>
My guess is that your app runs in compatability mode. Try setting following in the manifest:
<supports-screens android:smallScreens="true"
android:normalScreens="true"
android:largeScreens="true"
android:anyDensity="true" />
If it is the issue you can read more about it here: http://developer.android.com/guide/topics/manifest/supports-screens-element.html.
In short android:largeScreens default value varies accros versions :)
The issue is that your last TextView (#+id/QuoteText) is set to android:visibility="invisible". This means that the contents are invisible, but it still takes up space. You want to use android:visibility="gone" instead.
I apologize for stating that it did not work correctly on my phone before. Because the text did not reach the bottom of the screen on my device, I added space to the ImageView at the top, however that pushed the TextView which is blocking the text off the screen, so it appeared to work for me. Hope this helps!
Edit:
That was not the issue either. I believe the problem is that your bottom RelativeLayout is defined as
<RelativeLayout
android:layout_width="fill_parent"
android:id="#+id/RelativeLayout1"
android:layout_height="200dp">
which gives the bottom panel a fixed height. When I change android:layout_height="200dp" to android:layout_height="fill_parent" the clipping problem goes away for me. Perhaps you have the same problem with your other activities?
I don't see why your layout isn't working, but I do think that you can achieve the same thing more easily and efficiently by using LinearLayouts instead of RelativeLayouts. And perhaps it will solve your problem along the way. Instead of using your spacer views, I think it is better to use padding. Here's what I mean:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/TitleImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/simpsonstextblack" >
</ImageView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/TitleImage"
android:orientation="vertical"
android:padding="5dp" >
<Button
android:id="#+id/ChallengeButton"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:clickable="true"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:text="Take the Simpsons Challenge"
android:textSize="20dp" >
</Button>
<Button
android:id="#+id/FreePlayButton"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:clickable="true"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:text="Free Play"
android:textSize="20dp" >
</Button>
<Button
android:id="#+id/HighScoreButton"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:text="High Scores"
android:textSize="20dp" >
</Button>
<Button
android:id="#+id/HelpButton"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:text="Help"
android:textSize="20dp" >
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/QuoteText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="30dp"
android:text=""A woman is a lot like a refrigerator. Six feet tall, 300 pounds…it makes ice. Heres some extra filler text just to demonstrate to you that if you add enough text it will most likely get clipped at some random point in the screen seemingly for no reason. ""
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
Related
So I'm having a problem that is driving me crazy. Knowing the purpose of my app isn't important/relevant so I'll just paste my code from the xml file. The layout is a RelativeLayout, but the problem I'm having is inside of this LinearLayout.
Code:
<?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"
android:orientation="vertical"
android:background="#drawable/background_orange"
android:id="#+id/rel_layout" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/component_1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:src="#drawable/source1"
/>
<ImageView
android:id="#+id/component_2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#id/component_1"
android:src="#drawable/source2"
android:layout_alignRight="#id/component_1"
android:layout_marginRight="-50dip"
android:layout_marginBottom="-25dip"
/>
</RelativeLayout>
<LinearLayout
android:id="#+id/problemIsHere"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal"
>
<EditText
android:id="#+id/edit_text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="What's your question?"
android:imeOptions="actionDone"
android:inputType="textCapSentences|textAutoComplete"
android:textSize="25sp"
android:layout_gravity="left"
android:textStyle="bold" />
<ImageButton
android:id="#+id/image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:layout_weight="0"
android:layout_gravity="right"
android:background="#drawable/source3"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/problemIsHere"
android:gravity="center"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/source4"
android:onClick="computeUserInput" />
<ImageButton
android:id="#+id/image_button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_view"
android:layout_alignTop="#id/image_view"
android:layout_marginLeft="-2dip"
android:background="#drawable/voice_recognition_touse"
/>
</RelativeLayout>
Again, this is nested inside of the parent, RelativeLayout. In the preview, when clicking on the "Graphical Layout" tab, this looks like exactly what I want; EditText to the left of a small ImageButton, with correct proportions and margins. However, when I run this on my device, the LinearLayout is REVERSED, meaning now that the EditText is to the RIGHT of the ImageButton. The proportions and margins are still accurate though. Does anyone know what is going wrong here?
Note: I've already cleaned and refreshed my project; this was ineffective. I've also tried removing the layout_gravity attributes, and that did nothing.
Thanks
I realize that the Eclipse graphical layout editor often (usually?) doesn't render things the same way that the physical devices or emulator do. I can usually deal with that. However, I have a situation where I can't figure out why there is such a big difference, and more importantly, I can't figure out how to get what I want for a layout on the target devices.
I am attempting to use some custom ImageButton widgets with custom graphics files as buttons. I simply want the buttons to fill the parent layouts they are in. In the designer, they look the way I think they should. But when I run it on a device, the buttons are way to small. Here is what the design looks like, using a device that is set up to emulate the Droid X that I am testing with.
http://pozzy.com/consulting/LayoutDesignInEclipse.PNG
Here is a screen capture of the screen when running on my Droid X:
http://pozzy.com/consulting/ScoreEntryDroidXScreenCapture.png
I tried to trim the code down, but it still relies on a number of button image files. Here is the layout XML:
<?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">
<LinearLayout
android:id="#+id/scoreEntryPlayersAndMainEntry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/scoreEntryPlayers"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:paddingLeft="4dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryMainEntry"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:maxWidth="100dp"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:paddingTop="4dp" >
<LinearLayout android:id="#+id/scoreEntryPreviousHoleNumberNextRow"
android:orientation="horizontal"
android:background="#drawable/score_entry_background_top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".1"
android:gravity="center|top" >
<ImageButton
android:id="#+id/previousHoleButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:background="#null"
android:contentDescription="Previous Hole"
android:src="#drawable/score_entry_prev" />
<TextView
android:id="#+id/holeNumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:paddingTop="20dp"
android:text="##"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/nextHoleButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:background="#null"
android:contentDescription="Next Hole"
android:src="#drawable/score_entry_next" />
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryCurrentScore"
android:background="#drawable/score_entry_background_middle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".8" >
<FrameLayout
android:id="#+id/scoreEntryScoreOverlays"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:visibility="invisible"
android:id="#+id/scoreEntryPlayerScoreLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/currentPlayer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="Player Name"
android:textColor="#aaaaaa"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/currentScore"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="99"
android:gravity="center"
android:layout_gravity="bottom"
android:textColor="#ff0000"
android:textSize="100sp"
android:textStyle="bold|italic" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryScoreDownUpRow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/score_entry_background_bottom"
android:gravity="bottom"
android:layout_weight=".1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/scoreDownButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/score_entry_minus" />
<ImageButton
android:id="#+id/scoreUpButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/score_entry_plus" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Any help in figuring out how to get the buttons filling their respective areas would be greatly appreciated!
I've had exactly the same problem and I have had to workaround it by manipulating it everytime to fit both places which is sad. The eclipse graphics visualizer really sucks sometimes. I' ve
tried http://www.droiddraw.org/ since many people say that is pretty good - but somehow there seems to be a gap between what is seen on the visualizer and then on the actual device. I guess the rule of thumb is to follow this http://developer.android.com/training/multiscreen/screensizes.html to the letter and keep trying . I think Droid Draw works for me better than eclipse, I suppose following the dev link above and using say Droid Draw should ideally work for you.
I am developing an Android app (see screenshots).
I have a layout that looks fine in the graphical editor. However, the bottom 1/4 of the screen is clipped from view when the app is run in the emulator. The app has several activities, and the problem seems to be widespread to all.
The emulator target is android 2.3, and the problem also occurred on a 2.2 phone.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="fill_parent"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent">
<ImageView android:layout_height="wrap_content" android:src="#drawable/simpsonstextblack" android:layout_width="fill_parent" android:id="#+id/TitleImage" android:layout_gravity="center_horizontal" android:paddingBottom="20dp"></ImageView>
<RelativeLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/RelativeLayout1" android:padding="5dp">
<Button android:text="Take the Simpsons Challenge" android:gravity="center" android:clickable="true" android:id="#+id/ChallengeButton" android:layout_width="fill_parent" android:layout_height="50dp" android:textSize="20dp" android:background="#drawable/buttonbackgroundblue"></Button>
<TextView android:layout_width="fill_parent" android:layout_below="#+id/ChallengeButton" android:layout_alignLeft="#+id/ChallengeButton" android:id="#+id/spacer1" android:layout_height="5dp"></TextView>
<Button android:layout_width="fill_parent" android:text="Free Play" android:clickable="true" android:id="#+id/FreePlayButton" android:layout_height="50dp" android:textSize="20dp" android:background="#drawable/buttonbackgroundblue" android:layout_below="#+id/spacer1"></Button>
<TextView android:layout_width="fill_parent" android:id="#+id/spacer2" android:layout_below="#+id/FreePlayButton" android:layout_alignLeft="#+id/FreePlayButton" android:layout_height="5dp"></TextView>
<Button android:layout_height="50dp" android:textSize="20dp" android:id="#+id/HighScoreButton" android:background="#drawable/buttonbackgroundblue" android:layout_width="fill_parent" android:text="High Scores" android:layout_below="#+id/spacer2"></Button>
<TextView android:layout_width="fill_parent" android:id="#+id/spacer3" android:layout_below="#+id/HighScoreButton" android:layout_alignLeft="#+id/HighScoreButton" android:layout_height="5dp"></TextView>
<Button android:layout_height="50dp" android:textSize="20dp" android:id="#+id/HelpButton" android:background="#drawable/buttonbackgroundblue" android:layout_width="fill_parent" android:text="Help" android:layout_below="#+id/spacer3"></Button>
</RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:id="#+id/RelativeLayout1" android:layout_height="fill_parent">
<TextView android:id="#+id/textView1" android:layout_width="fill_parent" android:layout_height="50dp"></TextView>
<TextView android:layout_below="#+id/textView1" android:layout_height="wrap_content" android:layout_width="fill_parent" android:textAppearance="?android:attr/textAppearanceMedium" android:id="#+id/QuoteText" android:text='"A woman is a lot like a refrigerator. Six feet tall, 300 pounds…it makes ice."'></TextView>
<TextView android:layout_below="#+id/QuoteText" android:layout_width="fill_parent" android:id="#+id/QuoteTextSpeaker" android:gravity="right" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_height="wrap_content" android:text=" - Homer"></TextView>
</RelativeLayout>
</LinearLayout>
Thank You
I had been targeting SDK 3 when it should have been 4. Apparently targeting SDK 3 causes android to clip the screen if it overextends, rather than shrinking it to fit.
You should not be using so many dummy LinearLayouts inside other LinearLayouts. You need to use RelativeLayouts for these kind of views.
This is my layout for an image capture program in android
<?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">
<SurfaceView android:id="#+id/surface_camera"
android:layout_width="fill_parent" android:layout_height="420px">
</SurfaceView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_alignParentBottom="true" android:id="#+id/beforeClick"
android:layout_height="wrap_content" android:background="#color/clickPanelBK"
android:paddingTop="6dp" android:paddingBottom="6dp">
<Button android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/capture_image_goback_btn"
android:background="#drawable/generalbutton" android:text="#string/back" />
<Button android:gravity="center"
android:layout_centerHorizontal="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/capture_image_btn"
android:background="#drawable/clickbutton" />
</RelativeLayout>
<RelativeLayout android:layout_width="fill_parent"
android:layout_alignParentBottom="true" android:id="#+id/afterClick"
android:layout_height="wrap_content" android:background="#color/clickPanelBK"
android:paddingTop="6dp" android:paddingBottom="6dp">
<Button android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/img_retake"
android:background="#drawable/generalbutton" android:text="#string/retake" />
<Button android:gravity="center"
android:layout_alignParentRight="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/img_save"
android:text="#string/saveImg" android:background="#drawable/generalbutton" />
</RelativeLayout>
</RelativeLayout>
The last 2 relative layouts are swappable and are aligned fine. Only one of them appear at a time and is changed on a button click. Anyway, The problem here is, I have to mention the layout_height of surface view in px or dp. If I give layout_height as fill_parent, the view appears very small, 35% of width and height. Can anyone please give me a solution ?
RelativeLayout had many bugs in 1.5 :(
I am currently working on my first android app. In a listview, I need to have the following organisation in each row:
On the left: one main icon on which takes the whole height of the row
On the middle: 2 texts, one below the other
On the right: 2 icons, one below the other
I end up with a row.xml file like this, but that does not work as I expect.
Do you know if something obvious is missing in this file ?
Thanks a lot,
Luc
<?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="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="48px"
android:layout_height="48px"
android:layout_marginRight="0dip"
android:src="#drawable/icon" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="16dp"
android:textStyle="bold"
android:text="TITLE"
android:paddingLeft="5dp"
/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="14dp"
android:text="DESCRIPTION"
android:paddingLeft="5dp"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right">
<ImageButton
android:id="#+id/button_modify"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/deleteicon"
/>
<ImageButton
android:id="#+id/button_delete"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/modifyicon"
/>
</LinearLayout>
In the right-hand-column LinearLayout, add
android:layout_width="wrap_content"
android:gravity="right"
That should make the icons should fall to the right (because of the gravity setting.)
Consider switching to RelativeLayout for a rule set like you describe. Using LinearLayouts may not work in all cases and will be less efficient than the RelativeLayout in terms of stack consumption.