I'm trying to design my layout as below. My current approach is to have a LinearLayout wrapping two other LinearLayouts. Each of these has layout_weight=1. Then the bottom layout wraps another two and each of those also has layout_weight=1. I've heard that nested weights is not advised - but is it? Otherwise, what would be a better alternative?
Thanks
This would be my approach:
<?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"
android:weightSum="2">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<View android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff00ff"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal">
<View android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#ffff00"/>
<View android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#00ffff"/>
</LinearLayout>
</LinearLayout>
I believe weights might be "inefficient” because in order to apply them appropriately, a layout has to be measured first. If its children apply weights as well, it may lead to repeated measurements of same layouts, potentially hampering performance.
If your layout will be complex, you might want to consider alternative approaches (e.g. creating a custom ViewGroup), but remember:
We should forget about small efficiencies, say about 97% of the time:
premature optimization is the root of all evil.
so make sure you actually have a problem before trying to solve it.
Related
MyActivity has setContentView(MySurfaceView) that covers all the screen.
I would like to divide the screen into two parts: the first 2/3 of the screen must be occupied by MySurfaceView and the last 1/3 by my_activity_layout.xml.
How can I do that? Thanks.
EDIT
Thanks for your answers, but I don't have how to apply them in my case. To be clear, these are my objects:
Solution:
To attach an xml file in your layout, you can make use of the <include> tag.
Reusing layouts is particularly powerful as it allows you create reusable complex layouts. For example, a yes/no button panel, or custom progress bar with description text. More
You can have a functionality as shown in the question with the help of ConstraintLayout. Of course, there are solutions using the legacy <LinearLayout> with something called as weights but as the warning says Weights are bad for performance.
Why weights are bad for performance?
Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.
So let's get on to the solution using <ConstraintLayout>.
Let's say we have a layout file called my_activity_layout.xml and we use the below code to achieve what we want:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<SurfaceView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<include
android:id="#+id/news_title"
layout="#layout/my_activity_layout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>
As you can see the Guideline help us to get 2/3 i.e 66.666 ~ 67 % of the screen, and then you can constraint your SurfaceView and your layout using <include> tag on your activity.
You can also see the required result:
You can just copy-paste the solution and see if it works as expected.
You can solve this with a linear Layout and specifying a layout weight for the correction ratios.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<SurfaceView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
<include layout="my_activity_layout.xml"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
I'm currently modifying an xml layout, and I want to group all of the views into 2 sections, each half of the height available. The layout looks something like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
...Lots of stuff...
</LinearLayout>
What I've done is to wrap each "half" of the views in a linear layout, and assign a weight to each.
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- Top half -->
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:orientation="vertical">
... stuff and things ...
</LinearLayout>
<!-- Bottom half -->
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:orientation="vertical">
... things and stuff ...
</LinearLayout>
</LinearLayout>
I can't figure out why this doesn't give me 2 equal panes. The lower one seems to take up 90% of the available space. I've tried adding (android:weightSum="2") to the container layout, but to no avail. None of these layouts have IDs, so the code behind shouldn't be able to modify them. Any idea what is going on here? Are the child views able to modify their "half" containers so that they wouldn't appear equal?
This link may be of some use to you:
http://www.chess-ix.com/blog/the-use-of-layout_weight-with-android-layouts/
What you are doing seem to be correct, but probably the content in your Linearlayouts may be the culprit.
Trying adding a weightSum to the parent LinearLayout, like so:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2">
<!-- Top half -->
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="match_parent"
android:orientation="vertical">
... stuff and things ...
</LinearLayout>
<!-- Bottom half -->
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="match_parent"
android:orientation="vertical">
... things and stuff ...
</LinearLayout>
</LinearLayout>
Also, I change layout_height of the children: you won't need fill_parent for the child LinearLayouts since the parent has that property already.
I separated the interface of my app in three areas: header, content and footer.
The header has a fixed size (it has only one image), while the footer and content have sizes that can vary.
In devices with higher resolutions I thought to insert the header and footer on the screen, and reserve any free space for the content area.
In devices with low resolutions thought of putting the content length as little as possible (something like wrap_content) and insert the footer below (requiring the user to perform scroll to view the footer).
The best I got was using RelativeView:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true" >
(...)
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true" >
(...)
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/footer"
android:layout_below="#+id/header"
android:lay >
(...)
</FrameLayout>
</RelativeLayout>
For resolutions larger works as expected, the problem is that for small resolutions: the content is less than it should, because it takes the space between the header and footer.
How can I solve the problem?
I could not find another way to get content assuming all the free space of the screen (in large resolutions), because I can not simply use fill_parent, since the content is between the header and footer.
I also tried using min-height, but without success.
Top level RelativeLayout layout_height make that fill_parent.
Then FrameLayout remove the layout_above property, just saying it's below the header should be enough.
Finally, FrameLayout may be causing the problem as it's normally used when only 1 element is on the screen and it fills the screen. Try replacing this with a LinearLayout. I've done something exactly like what you want in one of my apps, the layout is (keep in mind in my case I swap out the FrameLayouts for Fragments which are LinearLayout or RelativeLayout based.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainBack"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent" >
<FrameLayout
android:id="#+id/headerFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/homeAdMsgFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<ListView
android:id="#+id/contactList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/homeAdMsgFrag"
android:layout_alignParentLeft="true"
android:layout_below="#id/headerFrag"
android:background="#color/transparent"
android:cacheColorHint="#color/transparent" >
</ListView>
</RelativeLayout>
Some days before I also faced this issue, to solved what I did that I created Header.xml and footer.xml and included this two xml in my all others activities xmls because this two are common in all others activities.
To meet global resolution issue, I used weightsum and weight, applying weight will fixed your header and footer area and content area too.
This way I done in my one of project to resolve this issue, just try it, hope it will works for you.
EXAMPLE
<LinearLayout
android:weightSum="10"
android:orientation="vertical"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_weight="6"
android:layout_height="0dp">
(...)
</FrameLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
</LinearLayout>
Thanks.
I have a complex layout situation in which an horizontal LinearLayout holds two other LinearLayouts. The content for those layouts is dynamic, can be any kind of views, and is generated at runtime from different independent sources.
I want to display both of them as long as there is enough space, and limit them to 50% of the available space each otherwise. So I want those child LinearLayouts to have layout_width="wrap_content" when there is enough space, and layout_weight="0.5" when there isn't. This means that the space distribution could be 10-90, 25-75, 60-40; it would only be 50-50 when there isn't enough space to show the entire content of both views. So far I haven't find a way to do this from XML, so I'm doing it from code. My question is can I achieve what I want using only XML attributes? Will a different kind of layout be able to do it?
Here is my current layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:id="#+id/title_frame"
android:layout_width="wrap_content"
android:layout_height="48dp"/>
<LinearLayout
android:id="#+id/options_frame"
android:layout_width="wrap_content"
android:layout_height="48dp"/>
</LinearLayout>
Try this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:id="#+id/title_frame"
android:layout_width="wrap_content"
android:layout_height="48dp" android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:id="#+id/options_frame"
android:layout_width="wrap_content"
android:layout_height="48dp" android:layout_weight="1">
</LinearLayout>
</LinearLayout>
I tried it with textviews and this should work according to ure requirements.
It appears this cannot be achieved using only XML attributes.
Change layout_width="wrap_content" to layout_width="fill_parent" as you are using weight concept .
I'm having trouble figuring out why my image isn't within the bounds of my imageview. Instead, it is floating off to the left and hidden. Is this only because the Graphical Interface doesn't show it?
EDIT:
I edited the original code to more clearly show the issue i'm having and added a picture(i want the image to show in the red box):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
>
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="195"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff0000"
android:src="#drawable/img" />
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>
Ok I have it working. The height attribute of "block_container" is set to a random 200dp you WILL want to change the height to whatever your needs are, or potentially set it to "wrap_content". I tested this on emulator and device.
I am also assuming that you want all three block to be equally spaced. Notice how the parent "block_container" has a weight_sum of 9? Well the children are equal widths because they have a weight of 3 each (3 blocks * 3 weight each = 9 weight total).
I noticed before it looks like you were trying to use weight as width directly e.g. a weight of 569. Just remember weight != width directly.
EDIT: added the missing id attributes from some of the views
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/block_container"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="9"
>
<View
android:id="#+id/left_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#ff0000"
android:src="#drawable/logo" />
<View
android:id="#+id/right_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>
Why are you setting android:layout_height to be 0dp? I can't even get it to display unless I change this to something like fill_parent.
Either way, its because of your layout_weight for the parent LinearLayout. Specify a larger layout_weight for your ImageView and it will come into view.
<ImageView
android:id="#+id/my_img"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="279"
android:src="#drawable/my_img" />
This worked for me.. but math might not be right.
I don't know where to begin with the issues with what you posted, some simple observations before even debugging further:
Your layouts ALL need ids (e.g. android:id="#+id/another_layout")
You have a width on the second linear layout of 0dp
Your first linear layout has a height of 0 dp, combined with the previous I'm surprised it renders at all
The last inner linear layout again has a width of 0dp
What are you trying to achieve? To me there seems to be a lot of layouts unless you have removed some elements to make it easier to understand? You could post a simple image of what you are trying to do then perhaps we can help you refine the markup?