How to arrange two linear layouts inside a relative layout in android? - android

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>

Related

Let Linearlayout width be 650dp if parent is over 650dp, otherwise match parent

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

Layouts within layouts in XML, what's a cleaner way of doing this?

A "schematic" and an image of the desired layout is at the bottom where the outer frame represents the activity layout and the bottom frame is a container for the views (textview and imageview) inside of it.
This is what I tried:
Outer frame must be a relative layout so that its child, the container, can be placed on the bottom using the android:layout_alignParentBottom atribute.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:focusableInTouchMode="true"
android:layout_height="match_parent"
android:layout_width="match_parent">
The container layout must be a linear layout with horizontal orientation.
<LinearLayout
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="100dp"
android:orientation="horizontal">
The two-view combo is placed in a layout of its own so that one can be above the other. I chose a linear layout for this. Each of these layouts have a weight so that maximum space can be used and shared appropriately.
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_height="wrap_content">
The views themselves are code repeated 3 times. I suppose I could use a seperate layout and use <include> but I'd need to be able to change them as they're not identical
Relative Layout
Linear Layout
Linear Layout
Views
Linear Layout
Views
Linear Layout
Views

Android Studio layout management problems

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>

match_parent within wrap_content layout

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

Layout weight in relative layout

I am aware about layout weight in linear layout. Can i assign layout weight in relative layout.
example: two image view in a layout which fills the layout in the ratio 60:40. first image should take up 60% of the whole screen height and the second image has to take the remaining 40% of the screen.
Don't just answer for this example problem alone please tell me the concept precisely or post some reference links about layout weight in relative layout. Thanks in advance.
You can place an invisible view in center of your layout and align your view in left and right. Here is an example
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/view"
android:background="#fffba2" />
<View
android:id="#+id/view"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/view"
android:background="#ba2fff" />
</RelativeLayout>
There is no need of weights with Relative Layout. You can move around the Image Views to make sure that they are in correct proportion. Weights are only used with LinearLayout.
Actually you cannot use weight in a RelativeLayout but you can use a combination of Relative and Linear layouts in order to take both advantages of them!
Tip: Try to use as less layouts as possible to avoid slow UI, because of multiple screen measurements! [1] [2]

Categories

Resources