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>
Related
I'm facing troubles with a TableLayout here. My goal would be to make two columns with equal width, each one with one image that should adjust it's width so it fits inside the cell's available space, but it seems the images keep overflowing outside the available space in the cell/row. I have tested some properties without luck so far, so I could use some help here.
This is the current outcome in the design view:
I'd have expected the teddy bear to occupy only 50% of the row width at the left, and then the other image (which is an umbrella) to fit into the remaining 50% at the right of the bear. But you see that's not what's happening.
This is the layout code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.DebugFragment">
<TableLayout
android:id="#+id/tableImages"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:stretchColumns="*"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
app:srcCompat="#drawable/teddy_bear" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
tools:srcCompat="#drawable/umbrella" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE: Following Jakob F advice of replacing stretchColumns with shrinkColumns solves the issue with the image overflowing the layout boundaries, but breaks the requirement of both columns being of same width. See image:
UPDATE: Keeping the stretchColumns="*" and setting the layout_width of each image to 0dp does the trick of keeping them inside the layout boundaries AND make both columns the same with. Now I just have to figure out how to keep them at the same height, but that's a different issue I think.
UPDATE: Adding android:scaleType="fitStart" to both images aligns both of them to the top as desired, but it keeps adding space under the images for no reason (I have changed the background color so the limits of the images are more obvious).
You need to use android:shrinkColumns="*" instead of android:strechColumns="*" to make all columns shrinkable, so that the width is automatically determined to fit the images on screen. Stretching them would only enable them to become larger.
OK, I managed to solve all the issues by myself. Can't help but complain on how difficult such an obvious task can become sometimes in Android. I had to go over a lot of trial and error with a number of different attributes which functionality seem anything but obvious in most cases. Anyway, this is the solution:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ffff"
tools:context=".view.DebugFragment">
<TableLayout
android:id="#+id/tableImages"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:stretchColumns="*"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:padding="16dp"
app:srcCompat="#drawable/teddy_bear" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:padding="16dp"
app:srcCompat="#drawable/umbrella" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The result:
I have a constraint layout and inside a linear layout that looks like a bar that is constrained to the bottom. Besides I have an item (called SwipeFlingAdapterView) that I would like to take the remaining space, meaning to start from the top, and to go all the way down until the top of the linear layout bar:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".fragments.SwipeFragment">
<LinearLayout
android:id="#+id/likeDislikeBar"
android:layout_width="match_parent"
android:layout_height="#dimen/like_dislike_height"
android:gravity="bottom"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<ImageButton
android:id="#+id/dislikeButton"
android:layout_width="0dp"
android:layout_height="#dimen/like_dislike_button_height"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/dislike"
android:layout_gravity="center_vertical"
android:scaleType="centerInside"/>
<ImageButton
android:id="#+id/likeButton"
android:layout_width="0dp"
android:layout_height="#dimen/like_dislike_button_height"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/like"
android:layout_gravity="center_vertical"
android:scaleType="centerInside"/>
</LinearLayout>
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/likeDislikeBar"
app:rotation_degrees="15.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The views are constrained correctly, so theoretically if I remove the height="match_parent" from the SwipeFlingAdapterView, it will take the available space. Setting its height to "match_parent" will cause it to overlay the likeDislikeBar.
Is there a simple way to achieve this? Can I do it with a constraint layout?
It is not recommended to use match_parent for any child of the ConstraintLayout as stated in the official docs and tutorial. This applies to both vertical and horizontal dimensions.
In order to make the SwipeFlingAdapterView use all available height between the constraints you need to set its android:layout_height to 0dp (to match constraints).
You need to remove
app:layout_constraintEnd_toEndOf="parent"
Also ConstraintLayout seems like an overkill for such a simple layout.
RelativeLayout is pretty sufficient here. You can set likeDislikeBar to have layout_alignParentBottom and SwipeFlingAdapterView to have layout_alignParentTop and android:layout_above="#id/likeDislikeBar" in this case.
I have an app that have an activity with 3 imagebutton and a banner ad below. Something like this...
The ImageButton layout sizes are wrap-content, and each source is a png that i've made.
Now, when i've tested in a small screen the bottom one is behind the banner ad.
I want to scale the ImageButtons dending on the size (mainly the height) of the screen.
Can anyone tell me a correct way to do it?
I have to make small png sources that fits on a small screen and then make more drawables with minimal screen width qualifiers? 320dpi and 480dpi its a really big margin, i will have to make some more folders in between.
Thank you all in advance!!!
if you dont domain Constraint Layout, maybe you can try to use a LinearLayout inside your main layout with weight to divide the screen... something like below, it may work:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4"
android:padding="10dp">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/..."/>
</LinearLayout>
</RelativeLayout>
Just adjust it as you want... Hope this work :)
You don't need to create separate images, you can use ConstraintLayout and it will manage the sizes for you automatically. I have tested the code below and it seems to work fine. Have a go at it:
your_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/imageButton2"
android:background="#color/white"
android:src="#drawable/image_1"/>
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageButton1"
app:layout_constraintBottom_toTopOf="#id/imageButton3"
android:background="#color/white"
android:src="#drawable/image_2"/>
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageButton2"
app:layout_constraintBottom_toTopOf="#id/bannerContainer"
android:background="#color/white"
android:src="#drawable/image_3"/>
<!-- Whatever container your banner is in -->
<RelativeLayout
android:id="#+id/bannerContainer"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#000"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Note:
I have added the background colors just to test out. The main point to focus on for you is that the height of the ImageButton is 0dp for all, and the constraints manage the height automatically.
The good part of ConstraintLayout is that you don't need to specify different weights like you would in a LinearLayout, so you can have images of different heights and it will work just fine.
If you are using css you can use the property unit vh (viewport height). The measurement is a percentage of the viewport/screen height. For example height: 10vh; width: auto; will render the element height as 10% of the screen height, without distorting your png. If you use this measurement for the four elements shown, they will all appear on the screen at the same time if their values add up to 100.
https://www.sitepoint.com/css-viewport-units-quick-start/
I am having trouble using tags <include> and <merge> inside a ConstraintLayout.
I want to create a flat view hierarchy (hence Constraints) but still have elements that are reusable. So I use <include> in my layout and <merge> in the included layouts to avoid having nested layouts (especially avoiding nested ConstraintLayouts)
So I wrote this:
Parent layout
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/review_1"
layout="#layout/view_movie_note"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/review_2"/>
<include
layout="#layout/view_movie_note"
android:id="#+id/review_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/review_1"
app:layout_constraintRight_toRightOf="parent"
/>
</android.support.constraint.ConstraintLayout>
and this view_movie_note :
<merge>
<TextView
android:id="#+id/note_origin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginStart="5dp"
app:layout_constraintStart_toStartOf="#+id/cardView2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="5dp" />
<android.support.v7.widget.CardView
android:id="#+id/five_star_view_container"
android:layout_width="0dp"
android:layout_height="52dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="10dp"
android:elevation="3dp"
app:cardUseCompatPadding="true"
app:contentPaddingTop="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_min="52dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/note_origin">
<FiveStarsView
android:id="#+id/five_star_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/cardView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:cardBackgroundColor="#color/colorPrimary"
app:contentPaddingLeft="15dp"
app:contentPaddingRight="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/note_origin">
<TextView
android:id="#+id/grade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp" />
</android.support.v7.widget.CardView>
</merge>
I am expecting this
Instead I got this
Clearly the constraints that I put in the <include> tag are overriden by the constraints in the included layout.
Is this the expected behaviour ? If yes, how are we supposed to keep a flat layout using <include> and ConstraintLayout ?
Short answer
The best move will be replacing <merge> block with a (nested) ConstraintLayout rather than using redundant layout structure.
ConstraintLayout is great but it doesn't work well with composition
and separation of responsibilities of each piece
That is wrong. ConstraintLayout does work well with reusing layouts. Any layout in which all child views are laid out according to relationships between sibling views and the parent layout, behaves exactly like this. This is true even for RelativeLayout.
Then, where is the problem?
Let's take a closer look at what <merge> is.
The doc says
The <merge/> tag helps eliminate redundant view groups in your view
hierarchy when including one layout within another.
It will have the same effect as replacing the <include> element with the contents of <merge> block. In other words, the views in the <merge/> block is directly placed to the parent layout without an intermediate view group. Therefore, the constraints of the <include> element is completely ignored.
In this particular example, the views in the including layout is added two times to the parent as the second one on top of another.
Conclusion
Layout resource files are intended to be used independently. To qualify the term reusable, it should not depend on it's parent (The view group in which it will be added in future).
It would be looking okay if you had to include the layout only one time. But </merge> won't be a good idea in that case too because you can't place it in any different layout in a different position.
Obviously, flat layout hierarchies have better performance. However, sometimes we may have to sacrifice it.
Android documentation says
The <merge /> tag helps eliminate redundant view groups in your view
hierarchy when including one layout within another
and has an example too
If your main layout is a vertical LinearLayout in which
two consecutive views can be re-used in multiple layouts, then the
re-usable layout in which you place the two views requires its own
root view. However, using another LinearLayout as the root for the
re-usable layout would result in a vertical LinearLayout inside a
vertical LinearLayout. The nested LinearLayout serves no real purpose
other than to slow down your UI performance.
Also see this answer, which will make you understand merge tag more.
Problem in your layout
For the child layout
You put constraints on child elements inside <merge tag. That's not okay. Because that constraints are destroyed at run time when both child layout are merged inside your parent layout. (You tell me if you can do this without include tag, will your constraints work?)
For parent layout
Same for <include tag, you are giving constraints/custom attributes to <include tag, that will be lost, because <merge tag is joined to the root view, so you can not apply custom attributes to the <include with <merge tag.
That's why Bahman answer will work.
Attributes on <include tag works when you have root element inside child layout and no <merge tag.
Conclusion
As this is clear, you are not using <merge and <include, as it should be. You have understand what <include and <merge tag do. So use them appropriately.
If you ask solution
ConstraintLayout was introduced to solve complex layout. Not to increase complexity. So when you can do this easily with LinearLayout why to choose Constraints.
Parent Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include
android:id="#+id/review_1"
layout="#layout/view_movie_note"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<include
android:id="#+id/review_2"
layout="#layout/view_movie_note"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:layout_weight="1"
/>
</LinearLayout>
view_movie_note.xml
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
.../>
<android.support.v7.widget.CardView
...
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
...
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
I hope I could make you understand well.
Wrap include tags with ConstraintLayout tags then move attributes of include tags to these new ConstraintLayout tags:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/review_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/review_2">
<include layout="#layout/view_movie_note" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/review_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/review_1"
app:layout_constraintRight_toRightOf="parent">
<include layout="#layout/view_movie_note" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
As a solution
Parent layout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2">
<include
android:id="#+id/review_1"
layout="#layout/view_movie_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/review_2"
app:layout_constraintTop_toTopOf="parent" />
<include
android:id="#+id/review_2"
layout="#layout/view_movie_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/review_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.v7.widget.LinearLayoutCompat>
</android.support.constraint.ConstraintLayout>
view_movie_note
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/note_origin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
app:layout_constraintStart_toStartOf="#+id/cardView2"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/five_star_view_container"
android:layout_width="wrap_content"
android:layout_height="52dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="10dp"
android:elevation="3dp"
app:cardUseCompatPadding="true"
app:contentPaddingTop="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_min="52dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/note_origin">
<!--<FiveStarsView-->
<!--android:id="#+id/five_star_view"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="center_horizontal" />-->
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/cardView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:cardBackgroundColor="#color/colorPrimary"
app:contentPaddingLeft="15dp"
app:contentPaddingRight="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/note_origin">
<TextView
android:id="#+id/grade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
merge is a tag and not a ViewGroup, so all the parameter passed to the include will be ignored... You can flat this ViewGroup only with a duplicated layout, if you need to manage it, you can create a Group...
XML attributes from merge layout to RelativeLayout via inflate
Some issues with your question:
As per android documentation link
You can also override all the layout parameters (any android:layout_* attributes) of the included layout's root view by specifying them in the <include/> tag
So any constraint you put into include tag will be removed.
Any android:id in include will NOT be overridden if merge tag is used in your included layout.
Chaining and adding constraint works on views with different ids. So for including same view multiple times with equal weight will not work via include tag.
That being said, you can either copy paste the entire
Therefore, you can not use include in this fashion.
You are left with 3 options:
Use some other ViewGroup (LinearLayout and then constraint layout for example)
Copy paste the content of include layout with different ids of views
Modify ConstraintLayout code to support spread-chains so that entire included layout is copied horizontally.
IMO, 1st option is best if you have a small number of these layouts, 2nd option is best if you have only one layout (asked in question) and 3rd option is best if you have large number of layouts.
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.