I'm trying to find documentation or guidelines as to behaviour of a UI component with the layout_width/layout_height set to match_parent within a ViewHolder of layout_width/layout_height of wrap_content.
So for instance, what is the EXPECTED result of the following layout?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
/>
</RelativeLayout>
By the description here, the layout of your example would depend on what you put inside the LinearLayout. That content would expand to fill all available vertical space within the parent RelativeLayout. By default, the LinearLayout would be positioned at the top left of the parent RelativeLayout
Related
I'm creating a LinearLayout inside a FrameLayout, the LinearLayout needs to be centered inside FrameLayout, but the width of LinearLayout needs to change as follows:
If parent FrameLayout is over 650dp, then set LinearLayout width to 650dp, this leaves some margin at left and right of linear layout.
If parent FrameLayout is under 650dp, then set Lineralyout width to match parent.
Parent FrameLayout width will change on orientation change, I tried to use OnLayoutChangeListener, OnGlobalLayoutListener, OnAttachStateChangeListenerto detect the width after screen rotates, but none of them works.
Am I on the right track by trying to find the width of parent view?
Or is it possible to use parent view as ConstraintLayout and make the LinearLayout inside comply 650 when possible and expand to parent when width is not enough?
(Note I can't use different values under different layout res folders like sw600 or sw600-land, as the parentview is not necessarily occupying the entire screen, it might just be one of the two columns on the screen)
The appropriate way to handle this is to create another layout file under layout-land and use a 650dp width for that. And for more description on supporting different screens see the official training here.
For any one interested, I solved it with a ConstraintLayout per Eugen's comment. This will make sure the LinearLayout's width matches parent on smaller screens(<650dp) and cap the width to 650dp on bigger screen sizes
<?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">
<LinearLayout
android:id="#+id/row_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_max="650dp"/>
</android.support.constraint.ConstraintLayout>
<LinearLayout
android:layout_width="300dp"
android:layout_height="100dp"
android:background="#f00"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:maxWidth="200dp"
android:minWidth="200dp"
android:background="#00f"
>
</LinearLayout>
</LinearLayout>
Result when parent width = 150dp
The attached image contain 3 layouts
Relative layout
Linear layout
Linear layout
Both the linear layouts are of same size and are overlapped.
All i want to know is how to arrange those two linear layouts inside the relative layout so that Linear layout 1 & Linear layout 2 will have 90% of parent height. Also linear layout 1 must be aligned to the top of relative layout while linear layout 2 to the bottom of relative layout.
Any simple working solution will be appreciated.( I'm a newbie to android studio)
From the Android documentation:
<android.support.percent.PercentRelativeLayout
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">
<LinearLayout
android:layout_width="match_parent"
app:layout_heightPercent="90%"
android:layout_alignParentTop="true"/>
<LinearLayout
android:layout_width="match_parent"
app:layout_heightPercent="90%"
android:layout_alignParentBottom="true"/>
</android.support.percent.PercentRelativeLayout>
The order in which the LinearLayouts will overlap corresponds to the order in which they are defined.
Here is another Way
Set Linear Layout Height to your desired level (fixed)
Specify android:gravity property for both Linear Layouts (1'st Layout Top & 2'nd Layout Bottom.
Then you can get the required result.
Nice question, What you can do is use PercentRelativeLayout instead of RelativeLayout so you can adjust that 90% height, and then use this property
android:layout_alignParentTop = true
for your first LinearLayout and
android:layout_alignParentBottom = true
for second RelativeLayout
It will stick your LinearLayouts inside RelativeLayout as you want.
See this questions for how to use PercentRelativeLayout here
Sample Layout here
And If you also want Layering effect as you saw in one of pic use
android:elevation property on your both `LinearLayout`.
Code taken from another answer by #Svit for full explaination
<android.support.percent.PercentRelativeLayout
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">
<LinearLayout
android:layout_width="match_parent"
app:layout_heightPercent="90%"
android:layout_alignParentTop="true"/>
<LinearLayout
android:layout_width="match_parent"
app:layout_heightPercent="90%"
android:layout_alignParentBottom="true"/>
</android.support.percent.PercentRelativeLayout>
I've tried to add view with layout_marginTop set and gravity=bottom inside a horizontal LinearLayout and it causes margin to appear at the bottom for no reason.
I'm aware that kind of layout could be build differently but I can't understand why I'm getting such result.
Here is the xml 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"
android:background="#ff0000"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="8dp"
android:background="#0000ff"
android:textSize="24sp"
android:text="TEST"/>
</LinearLayout>
And here is the result:
Any ideas with this one?
After digging through the source code, it seems that the root cause of this behavior is the fact that LinearLayout aligns its child Views by their baselines by default. When it measures out the vertical offsets for the child Views, it takes into account the sum of the vertical margins. These offsets are then applied after the "normal" top (y) coordinates are calculated for the child Views.
The upshot of all this is, if you want your TextView aligned right at the bottom, set the LinearLayout's baselineAligned attribute to false.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:background="#ff0000"
android:orientation="horizontal">
...
TextView is set with Its own LAYOUT GRAVITY to bottom, i.e. TextView's whole body is aligned to bottom, it won't make difference if orientation is horizontal, because it is linearLayout it won't work with marginTop when layoutGravity of View is set to Bottom, remove layoutGravity and keep marginTop it will come near to the top with mentioned margin.!
Why it is not on the base.?
because you have given it a margin and when you are giving it some value provided you have given it layoutGravity of Bottom already so it takes the bottom as it base align and gives margin from it.!
Hope i helped you partially if not completely.
I'm new to android studio... So I've been trying to make a simple app. When I want to put two linear layouts in another one, One of them goes out of the frame!
I don't know if I'm doing this right or not.
Also here are the pictures (the second one is the problem):
1)http://i.imgur.com/2H1hOxk.jpg
2)http://i.imgur.com/5IeZHsC.jpg
thanks
From your pictures, your parent linear layout which contains the other two linear layouts has its orientation set to "horizontal". It must be set to "vertical" to be above each other...
In your parent linear layout, you will find this:
android:orientation="horizontal"
Change it to:
android:orientation="vertical"
For horizontal orientation, you need to set both of the inner LinearLayout widths to 0dp and set their weights to 1.
For veritcal orientation, you need to set both of the inner LinearLayout heights to 0dp and set their weights to 1.
Without the weight attribute, since the first LinearLayout width is set to match_parent, it takes up the entire LinearLayout.
Example:
in your case of a horizontal layout:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0d"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="0d"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frameLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_gradient" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >
<ImageButton
android:id="#+id/buttonLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/log"
android:onClick="log" />
</RelativeLayout>
</FrameLayout>
I was expecting my button to appear in the center of the screen. However, it appears on the TOP center of the screen (that is, the button is center horizontally, but not vertically).
It seems to me that the RelativeLayout is behaving like it was defined with "wrap_content" instead of "fill_parent".
The funny thing is that, if I give an actual value to my RelativeLayout height property (android:layout_height), like:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="100dp"
android:gravity="center" >
Then the button behaves correctly (i.e. the button is also centred vertically). But I don`t want to use actual values. I want to use fill_parent! Why doesn't it work with "fill_parent" ??
Does anybody know what's going on?
Thank you in advance!
RelativeLayout requires you to specify the position of the elements in the Layout. I don't see any layout_below or layout_toLeftOf tags. Gravity works on LinearLayouts. In general, LinearLayouts are easier to work with, and they scale much better to different screen sizes. I suggest you replace the RelativeLayout by a LinearLayout, and also the FrameLayout by a LinearLayout. You use a FrameLayout typically if you want to use multiple overlapping layouts, which you don't do.
I recommend you read up on using layouts in the Android sdk reference documentation, like here: http://bit.ly/djmnn7
You specified fill_parent for both the layout_width and layout_height of your RelativeLayout, therefore it fills up it's parent view.
By default, a relative layout arranges it's children to the top-left corner, regardless you use fill_parent for the size.
You should achieve the desired aspect by taking advantage of the RelativeLayout's own attribute set, which helps you arrange the child views relatively to each other or to their parent:
<ImageButton
android:id="#+id/buttonLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/log"
android:onClick="log" />
Using the android:layout_centerInParent you can achieve this. This attribute if set true, centers this child horizontally and vertically within its parent.