Develop Reference

I don't understand how this is working (MATCH_PARENT at View with layout_weight)

When I set MATCH_PARENT for View + layout_weight the elements of the view behave strangely. Please can you explain why this is so. For example, here is the code on which to experiment. I can't understand the pattern. The less put the weight of the item, so it is more, however, it is unclear how many times.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="5"
tools:context=".MainActivity">
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F00"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F0F"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0FF"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00F"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
Testing for Yellow layout: set layout_weight= 0.5 > large?? how much bigger? Did the elements shrink in size or were they thrown out of the parent?
<LinearLayout
android:layout_weight="0.5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F00"
android:orientation="horizontal">
</LinearLayout>
Update, PS: I know how the layout will work with WRAP_CONTENT (or 0dp). If you set MATCH_PARENT + layout_weight, then we have a fixed element size regardless of the content, when WRAP_CONTENT does not guarantee a fixed size from the content (and if the content size is increased, the element will be stretched). I am only interested in the pattern MATCH_PARENT + layout_weight, because it guarantees the block size when the content size is exceeded.

The less put the weight of the item, so it is more...
The reason is because you are assigning android:layout_width as match_parent to all LinearLayout. To get android:layout_weight worked, you should set android:layout_width as 0.

First of all, give android:weightSum to the parent of the layouts.
Secondly, if you have layouts placed horizontally next to each other then set android:layout_width="0dp" for each element.
Similarly, for vertically aligned elements, give android:layout_height="0dp".

weird behavior using LinearLayout and layout:weight

I'm reading a book about Android and I'm stuck here
Here are the instructions:
Use the Real UI project we recently created but let's start with a completely
clean sheet for the layout. Right-click the layout folder in the project
explorer. From the pop-up context sensitive options menu, choose New |
Layout resource file.
Make sure LinearLayout is selected for the Root element.
Name the file list_detail_layout then left-click OK.
In the Properties window, find the orientation property of the
LinearLayout, which is provided by default, and change it to horizontal.
Drag a LinearLayout(vertical) onto the design.
Now drag a LinearLayout(horizontal) onto the design
Select the first (vertical) LinearLayout within the root LinearLayout, find
its layout:weight property, and set it to 40. Set its background to a color of
your choice by finding and left-clicking the background property ellipses ...,
then left-clicking the Color tab and choosing a color.
Select the second (horizontal) LinearLayout within the root LinearLayout,
find its layout:weight property, and set it to 60. We now have two
clearly discernible areas of the screen: one taking up 40%, the other 60%,
as shown next:
Screen Shot
I follow all the steps but I still do not get the result of the image. This is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
If I change both layout_width values to "wrap_content" it works but I don't know why is not mentioned in the book...

The android:layout_weight attribute tells the LinearLayout how to distribute its children. If you give both widgets the same value, but that does not necessarily make them the same width on screen. To determine the width of its child views, LinearLayout uses a mixture of the layout_width and layout_weight parameters.
LinearLayout makes two passes to set the width of a view. In the first pass, LinearLayout looks at layout_width(or layout_height, for vertical orientation). If the value for layout_width for both of the LinearLayout is wrap_content, then each view will get only enough space to draw itself.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>
I guess you are a beginner. I want to mention you that writing your own code for UI design is a better practice than drag and drop.

You have to use weightSum in the parent.
It should look like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent
android:weightSum="100">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>

When you are using android:layout_weight make sure either you have android:weightSum set in the parent LinearLayout or set the android:layout_width = 0
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60">
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#android:color/holo_orange_light"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="60"></LinearLayout>
</LinearLayout>

How to achieve this layout in Android (studio)

my name is Josh. I am trying to achieve the below layout in Android but I can't seem to split the inner layout to get the layout I want. Can someone help please.
This is what I have so far:
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.firstapplication.myapplication.MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="Name"
android:ems="10"
android:id="#+id/editText" />
</LinearLayout>
</RelativeLayout>
The only problem I am having is, I can't figure out how to split the layout as shown in the picture.

You can solve this multiple ways. I don't know the requirement for your layout but you really don't need two LinearLayout to solve this. However, with what you have currently all you have to do is give your first LinearLayout an id, and set the height to wrap_content like so:
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
then in your second layout set the positioning to be below your first one, set the height to wrap_content and remove layout_alignParentTop otherwise your second layout will overlap to your first. So you have something like this for the second:
<LinearLayout
android:layout_below="#id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
This will put the second layout underneath the first, but the sizing will vary unless the first layout is always a constant height.
If you know you always want a 70:30 ratio regardless of the first layout height, you can use layout_weights instead. I can add that in if that's what you're looking for instead.
To have a constant ratio, change your root layout to be LinearLayout instead of RelativeLayout then set the orientation to be vertical and a weightSum to 1.
Then set your first LinearLayout to be a layout_weight of 0.7 and your second LinearLayout to be a layout_weight of 0.3. Like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"></LinearLayout>
</LinearLayout>

Set the LinearLayout's height parameters accordingly to achieve the desired ratio between two layouts.
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="**XYZ dp**"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">

Divide height in 3 with LinearLayouts

I want to place 3 separate LinearLayout controls inside a RelativeLayout, and divide the available height between the 3 LinearLayout controls, so that they all have an even height.
I have tried, weightSum, as well as gravity, but none of these work as I wrongly assumed it would. I have read about layout_weight, but this is not available in LinearLayout.
I can give each of them a static height, but how would I know the available space for each and every device the app may run on?
Here is my current code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_image">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:weightSum="1">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:weightSum="1"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:weightSum="1"></LinearLayout>
</RelativeLayout>
I am still learning Android development, so any help/advice would be appreciated.

The following layout will have 3 LinearLayouts evenly divided vertically
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
android:orientation="vertical"
android:background="#drawable/bg_image">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>

I have read about layout_weight, but this is not available in LinearLayout
No you are wrong LinearLayout supports assigning a weight to individual children with the android:layout_weight attribute.
I want to place 3 separate LinearLayout controls inside a RelativeLayout, and divide the available height between the 3 LinearLayout controls, so that they all have an even height.
Better adding 3 separate RelativeLayout inside LinearLayout and then giving android:weightSum="3" to the parent LinearLayout and android:layout_weight="1" to each child RelativeLayout.

Is that you are looking for
<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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
</LinearLayout>

android: how do I add padding to a LinearLayout inside a FrameLayout

I have a FrameLayout with many children. One of the children is a LinearLayout. I want the width of the LinearLayout to match_parent but about 90% so; which means I want to add some sort of paddingLeft/Right or margingLeft/Right. But when I add the padding or margin, it is not applied in the Graphical Layout. How do I do this correctly?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/red"
android:marginLeft="20dp"
android:marginRight="20dp"
android:orientation="vertical" >
....

you have
android:marginLeft="20dp"
android:marginRight="20dp"
instead change it to:
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
If it still doesnot work, put this layout inside another layout and set the margins to the other layout.

You worte following code, which is not correct
android:marginLeft="20dp"
android:marginRight="20dp"
Try This :-
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
**android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"**
android:background="#android:color/white"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
Similarly you can give margin at Top and Bottom