I am new to Android, writing my first app right now. I've got a ListView rendering a series of items, each item having multiple TextViews. I want each item in the ListView to be click-able, and to animate the click. The animation is what I am struggling with.
I have the selectableItemBackground attribute, and it works perfectly on a TextView-by-TextView basis. However, that means that the click animation only appears over that particular TextView, whereas I want it to appear over the entire list item itself.
Here is my Android view. I know that this behavior is caused by me putting the selectableItemBackground attribute on the TextView elements, I just can't figure out where else to put it to achieve the effect I'm going for.
<?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="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="#+id/past_game_update_timestamp"
android:foreground="?android:attr/selectableItemBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:clickable="true"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
<TextView
android:id="#+id/past_game_start_timestamp"
android:foreground="?android:attr/selectableItemBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:clickable="true"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
</LinearLayout>
As part of what I understood from your question. Is that you want your whole view to be having an onClick animation.
For this you have two options :
In most cases, you should apply this functionality in your view XML by specifying the view background as:
?android:attr/selectableItemBackground for a bounded ripple.
?android:attr/selectableItemBackgroundBorderless for a ripple that
extends beyond the view. It will be drawn upon and bounded by, the nearest parent
of the view with a non-null background.
Note: selectableItemBackgroundBorderless is a new attribute introduced
in API level 21.
Please check with option 2.
Ok, after I commented on the above answer, I figured out the rest of it. I needed to make the LinearLayout clickable & focusable, and I needed to disable clickable/focusable on the TextViews. I also needed to set them to duplicateParentState. All of that allows the selectableItemBackground to work on the LinearLayout.
<?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="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:foreground="?android:attr/selectableItemBackground"
android:focusable="true"
android:clickable="true"
android:gravity="center"
android:padding="#dimen/small_padding">
<TextView
android:id="#+id/past_game_update_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:focusable="false"
android:clickable="false"
android:textSize="#dimen/small_font_size" />
<TextView
android:id="#+id/past_game_start_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:focusable="false"
android:clickable="false"
android:textSize="#dimen/small_font_size" />
</LinearLayout>
you can move ?android:attr/selectableItemBackground into the root view of your item layout.
Like this :
<?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="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center"
android:focusable="true"
android:clickable="true"
android:background="?android:attr/selectableItemBackground">
<TextView
android:id="#+id/past_game_update_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
<TextView
android:id="#+id/past_game_start_timestamp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/small_padding"
android:textSize="#dimen/small_font_size" />
</LinearLayout>
don't forget to add android:focusable="true" and android:clickable="true"
Related
I've tried all the stuff.
my manifest is
<application
android:hardwareAccelerated="true"
my layout is :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dp"
android:layout_height="200dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:layout_above="#+id/tvName"
сard_view:elevation="4dp"
xmlns:сard_view="http://schemas.android.com/apk/res-auto"
сard_view:cardUseCompatPadding="true"
сard_view:cardCornerRadius="5dp">
<ImageView
android:id="#+id/ivPoster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"/>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_alignParentBottom="true"
android:minLines="1"
android:singleLine="true"
android:ellipsize="marquee"
android:textSize="16sp"
android:layout_marginBottom="16dp"/>
</RelativeLayout>
So, inside RecyclerView with grid layout doesn't show any shadow, although it shows it in Android Studio shows shadow in preview
I think it's because ImageView overlaps shadows of the cardview, when you set images on your ImageView in the adapter. Give the image view some margin and shadow will show (but it will be ugly xD).
For testing I display 2 of the Cardviewbut but gave first one src. here is the result:
as you can see first one has no shadows.
I have small database which populates data into a listview which uses other layout as provided below to show the data.
What happens is if the 1st field's text is more than two lines, the text starts hiding. So I thought i would make that listview's each row scrollable. Though it shows a scroll bar but nothing happens.
This is the layout which is used by listview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_height="75dp"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="75dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/desc_d"
android:layout_width="165dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:text="Description"
android:gravity="center"
android:textAppearance="#android:style/TextAppearance.Large"/>
<TextView
android:id="#+id/cate_d"
android:layout_width="70dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/desc_d"
android:text="others"
android:textAppearance="#android:style/TextAppearance.Large" />
<TextView
android:id="#+id/date_d"
android:layout_width="70dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/cate_d"
android:text="16/11/2017"
android:textAppearance="#android:style/TextAppearance.Large" />
<TextView
android:id="#+id/amt_d"
android:layout_width="80dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/date_d"
android:text="100000"
android:textAppearance="#android:style/TextAppearance.Large" />
</RelativeLayout>
</ScrollView>
My MainActivity layout has a listview which is also scrollable and uses above layout.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">
<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"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:keepScreenOn="false"
android:scrollbarAlwaysDrawHorizontalTrack="false"
android:scrollbarAlwaysDrawVerticalTrack="false"
tools:context="apps.harry.expensedata.MainActivity">
<Button
android:id="#+id/add_expense_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:onClick="addExpenseClick"
android:text="#string/button_1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/view_expense_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:onClick="viewClick"
android:text="#string/button_2"
app:layout_constraintStart_toEndOf="#+id/add_expense_btn"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="406dp"
android:layout_marginTop="84dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp">
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="248dp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Here's the screen shot of the APP
As you can see there's a scroll bar available for each row in that layout, but nothing happens when I scroll.Please suggest me how this could be achieved.
This is not a solution suggestion for your scrolling problem, but due to user experience you should consider to not habe scrollable list items inside a scrollable list.
See Material Guidelines for this. Here is a little excerpt.
List tiles may contain up to three lines of text, and text length may vary between tiles in the same list. To display more than three lines of text, use a card.
Place the most distinguishing content on the left of the tile and the least distinguishing content on the right.
Specifications:
The majority of space on a list tile should be dedicated to the primary action
Place the most distinguishing content towards the left of the tile
In tiles with multi-line content, place the most distinguishing content in the first line
Place supplemental actions on the right side
Try using maxLines and minLines as attributes for the TextView to accommodate all the data.
Make scrollView Height="wrap_content" instead of fixed size. maybe useful
Google defined in their guidelines do not use scrollview inside of scrollview and it is more then simply guidelines it doesnt work properly. and you see that case. Tbe solution is set to your listitem height as wrap_content and the best practices is as was mentioned above do not use listitems with more than 2-3 lines of text. take a look into materisl design guide to see the dimensions of list items
I would suggest you to can change your custom list item height to wrap_content and then you don't need scrolling.
<?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"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/decription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="decription" />
<TextView
android:id="#+id/whatFor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="whatFor" />
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="date" />
<TextView
android:id="#+id/amount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="amount" />
</LinearLayout>
Your output will be like below image.
I hope your issue will be resolved and if you still have any query then please ask.
I have the following layout (here is presented much simpler design):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<FrameLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey, badge!"
android:layout_margin="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:layout_margin="10dp"
android:textSize="12sp"
android:background="#ff00ff"
android:padding="10dp"
android:layout_gravity="top|end"
/>
</FrameLayout>
</RelativeLayout>
I wish to set TextView with text "AAAA" to act as a badge for Button, i.e. to be placed over the button in its upper right corner, which is not the case.
Instead, when I try this code on HTC One M7 with Lollipop, or on Genymotion Nexus 6 with Lollipop, screen looks something like this:
When I try the same code on Genymotion Nexus 5 with KitKat, everything looks as expected, i.e. first view (button) is shown underneath badge (textview)
Does anyone have any clue what could be wrong here?
Thanks,
Deveti
The elevation causes this issue. It was introduced in Lollipop and responsible for z-ordering too. Copy your layout to layout-v21 and set android:elevation="0dp" for the button.
I saw this on another thread somewhere but you can put this into your elements :
android:stateListAnimator="#null"
as others said the button elevation in lolipop and up is changed so its covering the other elements.
for example in my button view below i use it and it shows:
<FrameLayout
android:id="#+id/ib_one_container"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginLeft="5.3dp"
android:orientation="vertical"
android:padding="3dp"
>
<Button
android:id="#+id/ib"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:clickable="true"
android:gravity="center"
android:stateListAnimator="#null"
android:textSize="11sp" />
<com.mobile.pomelo.UI.customViews.CustomDiagonalLineView
android:id="#+id/diagaonal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
/>
</FrameLayout>
I had a similar problem with an FrameLayout that I was using as a progress indicator overlay (when my screen is busy loading).
I didn't want to add XML to every other element in my app, so I just added an elevation to to my FrameLayout overlay. Note the clickable attribute which ensures that click events are not passed down to the buttons underneath.
Progress Indicator overlay:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/progress_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:background="#android:color/black"
android:animateLayoutChanges="true"
android:elevation="10dp"
android:clickable="true"
android:visibility="gone">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>
Including the progress indicator in my other views:
<include layout="#layout/progress_overlay"/>
Original solution from: https://stackoverflow.com/a/29542951/1912127
I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"
Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.
This worked for me!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>
I am working on a layout with a cardview, a checkbox and a button with the initial structure as shown in the first image:
In this case the listview is not shown until the user clicks an image inside the cardview, so when this happens the dessired structure is like
the second image
However as the listview is actually inside a fragment I can't achieve the dessired layout because wrap_content and match_parent for the cardview gives me the next result
And as you can see the cardview overlaps the button and the checkbox goes beyond the screen
Right now this is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"/>
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_below="#+id/checkBox"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_alignParentBottom="true"
style="#android:style/Widget.DeviceDefault.Button.Borderless"
/>
I hope you can help me to set the max height of the card view to stop growing when the space is filled.
I have also tried to set the checkbox always at top of the bottom and the cardview to fill the remaining space and although it gives me the correct structure when the listview is expanded, it doesn't work for the list hidden since the cardview fills the space with nothing.
Update
As suggested I have tried changing the root layout to LinearLayout using weight, however, I got the same result as before and if I change the weight of the cardview to 1 and the checkbox to 0 I am able to get the desired layout for the expanded list but not for the hidden case.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/check"
android:id="#+id/check"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"
/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:textStyle="bold"
android:textColor="#android:color/white"
/>
You'll need to use a LinearLayout and use Weight for the childs.
You can change all views weight on click.
But I think you'll need to put your CheckBox inside a layout and set this layout weight. Otherwise you'll mess with the height.
Didn't look to close to your layout, but you may need to do that for CardView too.
Just keep that in mind.
Hope this helps
To do what you are trying to do, you would have better luck using a LinearLayout with vertical orientation as your root element. Doing this, you could set the CardView to have a weight of 1 (and a 'height' of 0dp, because of how weight works) without giving a weight to the other elements, causing it to fill all available space not taken by the other two elements. The method for doing this can be found here:
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight