I've been playing around with Android lately and I've run into a problem building UIs. More precisely, I'm pretty sure when I was building the first layout, the layout editor in Eclipse adjusted the visible area so when I added new widgets, it stretched in height to display them.
Now I have a problem that whenever the widgets fill the area, it's impossible for me to properly lay them out since the preview window displays only the height of a single screen, even if it's a simple LinearLayout with a bunch of textviews to fill about 2 screen heights.
Also, I'm using the latest stable Eclipse and ADT plugin, target platform is 2.2.
EDIT
What I meant was that the editor doesn't display the elements that don't fit inside a single screen height and clips the stuff (see the image to see how it clips, there are actually 2 more textviews that are clipped totally) which makes impossible to build UIs that are taller that a single screen height.
That's normal there is a clipping occuring. I just tested it on my eclipse and I have the same behavior than you.
If what you want to achieve is creating a layout bigger than your screen size, you should use scroll views (and insert your initial layout in it):
<?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"
isScrollContainer="true" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/exampleView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
...
Once in scroll mode, the layout will auto adjust.
Try this:
Hope this helps. If this hasn't solved your problem, then please explain your question again in different words, because that's how I understood it.
Related
When I add element into a layout(in this case a LinearLayout), there is a white space on the two side of the element, but the attribute layout_width is "match_parent". Why?
Here's a screenshot:
http://s32.postimg.org/o4vr8kzbp/device_2016_07_30_001720.png
The 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#color/blue"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
I found this lines somewhere on this site and it might be worth checking;
This is possibly because you are using the auto-generated layout files in Android Studio when starting a new project, which by default adds a margin of 64dp to tablet screens (the value found inside values-w820dp\dimens). – PPartisan 6 hours ago
Maybe you should check your layout's parent's layout in the host activity for one more time.
It is possible that the root layout does not fill the parent or that the child you are adding has a margin, to know exactly whats going on use the android tool called DDMS or Android Device Monitor (you can launch it from Eclipse or Android Studio) then click on Dump View Hierarchy. This will give you details on the size, padding, margin and other properties of every view on the view hierarchy
You should to check your code, may be you update margins of layout at your classes.
And try to check layouts of home activity, may be they are contains layout_marginLeft(layout_marginStart) and layout_marginRight(layout_marginEnd).
Also parent layouts may contains any white views on the sides or parameter layout_weight with specific value.
After much research on both SO and google, I haven't seen any one with exactly the same problem I am experiencing, so here it is:
I recently redid the entire UI on an android app. For the most part, I made only cosmetic changes to each of the screens. They appear in the UI editor of eclipse perfectly as expected. However, directly after doing this, two of the screens stopped being laid out correctly on both all tested devices and the emulator.
Now, the big problem one these two screens was that the root level LinearLayout didn't appear to be actually honoring the fill_parent for either layout_height or layout_width. it looks like it's being measured as if it were set to wrap_content instead. It only takes up about 70% of the screen - which is just enough to wrap the individual elements inside the root LinearLayout. I would post an image, but as a new user, I am not allowed to.
The layout isn't stretching to fill the screen. Here's the code for layout, except that there are a few more in the LinearLayouts containing a TextView and an EditText.
<?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:background="#FF000000"
android:orientation="vertical" >
<TextView
style="#style/sans.white.16.bold"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:text="#string/edit_account" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<com.teamunify.ondeck.widget.TUTextView
style="#style/sans.white.14"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/first_name" />
<com.teamunify.ondeck.widget.TUEditText
android:id="#+id/acc_editor_first"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:selectAllOnFocus="true"
android:singleLine="true" />
</LinearLayout>
I think the root LinearLayout should be filling both height and width. I've used this same layout many MANY times in our app without problems. (A quick count revealed that I used 76 LinearLayouts in our app, and all but two of them are working.)
At first, I suspected that perhaps our custom classes measure was wrecking things, so I changed the layout to use all plain EditTexts, but there was no change. I double checked the activity, but it isn't doing anything except to load this xml. So, in desperation, I redid the layout like so:
<?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:background="#FF000000"
android:orientation="vertical" >
<TextView
style="#style/sans.white.16.bold"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center|top"
android:paddingTop="4dp"
android:text="#string/edit_account" />
</LinearLayout>
After that, The words Edit Account appear with a black background mashed into the upper left corner. Clearly, the LinearLayout isn't filling the parent.
Long story short, I am asking how to fix this so that the LinearLayout fills the screen as expected.
I am at a complete loss as to why this is happening, and I am certainly hoping that someone on SO has an idea. This has got me pulling my hair out!
Try setting fixed width and height for the root layout.
Then only you will be able to debug who is driving length and width. It is very much possible that parent activity or background activity is setting dimensions. Once you identify the root cause you can go back to original settings.
As of now from your code snippet given here, nothing wrong here
If you use a custom activity as a container to other activities for some reason (In our case, we were recreating the look of our iOS app, and needed a custom menu to show up along the button side of the screen) the window manager seems to get a bit confused with what the actual height and width of the nested activities should be. A call to fillparent or matchparent ends up wrapping the content instead.
We ended up changing the behavior of several methods in our container activity class to make this work.
I'm trying to assemble a layout that would be fairly easy to do with weights in that everything is either 1/2, 1/4 or 1/8 of its parent, but I've heard that doing nested weights is bad for loading/performance and that relative layouts are better.
To be honest, I don't like relative layouts. I understand how to arrange things right next to or on top of something I've already put down, but struggle to understand how to arrange things in a manner similar to how I would with weighting.
This is a rough drawing of how I would like my layout to look like with the measurements on the sides. I could easily do that left grouping (Header, Name, Image, Type, Rank/Tier) but I'm not sure how to arrange the other side especially in how to maintain the height of the description box so that the rest underneath doesn't move if the content of that box changes.
[Edit]* I will set it up to always be in landscape mode
You could have two RelativeLayouts. One for the left side, and one for the right side. That of course, would only work for landscape mode, in which case scrolling would be the only other option for portrait. So you can do
Landscape
<LinearLayout
android:layout_width=""
android:layout_height=""
android:orientation="horizontal" >
<RelativeLayout..> RelativeLayout/>
<RelativeLayout..> <RelativeLayout/>
<LinearLayout/>
Portrait
<LinearLayout
android:layout_width=""
android:layout_height=""
android:orientation="vertical" >
<RelativeLayout..> <RelativeLayout/>
<RelativeLayout..> <RelativeLayout/>
<LinearLayout/>
So you still have control where the views lie in each section, but they still stay in each side respectively.
I'm trying to port an app from iOS to Android. In my iOS app I have an image view which displays a map, and on top of it I want to display multiple button views on certain specific positions.
None of the standard views in Android seem to fit my needs, but I am surely missing something. How could I achieve this?
Thanks
The easiest thing to do would be to use any layout that's best suited for your needs (LinearLayout, FrameLayout, RelativeLayout, etc.) and set its background to any image you need. I believe the image will automatically scale to fill the corresponding Layout. Put the image into the appropriate drawable folders - and format your XML similar to this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_image">
...
</RelativeLayout>
I'm using Eclipse Helios 3.6.2 for Android development and whenever I design a layout in the graphical layout mode (not the XML layout), I can't see the entire content of a ScrollView in the graphical layout.
Specifically, when I'm using a ScrollView and the height of the ScrollView exceeds the height of the content view area (i.e., the phone screen visible in the graphical layout mode), I am not able to see the items that I have at the bottom of the screen.
In Eclipse Helios 3.6.1 there was an option called "expand to fit"; whenever I used to click on it, the phone screen increased in size to encompass all the elements that I had added. How do i achieve the same thing in 3.6.2?
There's no way to scroll the content inside the Android Layout Editor. What you can do, though, is create a new device simulation with a huge height, so you can see what is hidden in the ScrollView.
To do so, go to the dropdown menu below "Editing config" ang choose "Custom..." (top-left corner of the Android Layout Editor). Select one of your preferred resolutions (mine is 3.7in WVGA) and hit "Copy". The copied resolution will appear in the "Custom" group in the bottom of the list.
Choose your new configuration and hit "Edit...". In there, you can select the "Screen Dimension" property and change the value. I created a resolution 2000x480 (portrait). This way, I can see the whole content inside the ScrollView.
Hope it helps.
Use an included layout for the scrollview.
Move the entire scrollview layout in a separated file (ie: my_scrollview.xml).
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
...
</ScrollView>
The layout editor will then display the entire scrollview.
In the main layout use in place of the scrollview something like:
<include layout="#layout/my_scrollview" />
There was a button that allow to remove the clipping generated in a scroll view and show all the views that you have inside it.
In later sdk versions the button is removed, and the view mode is triggered if the scroll view is the root element of the view, so my solution when this doesn't happen (because you have a relative layout with some buttons over the view for example) is extracting the scrollview to it's own view, and including it in the original layout with an include tag.
My quick fix.
In the upper right corner of the graphic layout window you will see a drop down menu that shows what minimum version of android you are creating for. Make sure you have it set to at least android 2.1. I had an app at 1.6 and i had the same issue you have. swapped minimum build platform to 2.1 and it was magic.
Hope this helps.
If use Relative layout, you can use layout_marginTop negative, like that:
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-500px"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout" >
Increase the layout_marginTop to move scrollview.
The drop-down on the left (under the text "Editing config: ...") allows you to change the simulated screen size in the graphical layout. Perhaps that is what you are looking for.
Just click on the Config window of the Graphical Layout and click on the preview for all screen sizes and u will be able to see your scroll
Use the android:scrollY in the ScrollView child and remove it before publishing.
<ScrollView ... >
<LinearLayout ...
scrollY="300dp">
</LinearLayout>
</ScrollView>