Include layout inside another one: strange behavior of wrap_content - android

I have a layout (principal) that include another layout. In principal Layout I include the other one like
<include
android:id="#+id/other_layout_id"
android:layout_height="match_parent"
layout="#layout/other_latyout_name" />
and this is code of my other layout that represent a custom row with some elements (some text and a button):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative_row_opponent"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- other widget, all with wrap_content -->
If inside principal layout, in include tag i specify
android:layout_height="wrap_content"
other layout take all vertical space inside principal layout and I doesn't expect this behavior. why happen this?

Acoording to the http://developer.android.com/training/improving-layouts/reusing-layouts.html#Include
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.
Also
However, if you want to override layout attributes using the <include> tag, you must override both android:layout_height and android:layout_width in order for other layout attributes to take effect.
So what you should do is
<include
android:id="#+id/other_layout_id"
android:layout_height="match_parent"
android:layout_width="match_parent"
layout="#layout/other_layout_name" />
Here I have included android:layout_width property along with android:layout_height as suggested by the website.
I haven't tested it. But hope it helps.

Related

How to override layout params of child layouts when including

Let's say I have my_custom_view.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
android:padding="10dp" />
........
</LinearLayout>
And I want to include my_custom_view on my activity_main.xml multiple times.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android">
<include layout="#layout/my_custom_view.xml"/>
<include layout="#layout/my_custom_view.xml"/>
<include layout="#layout/my_custom_view"/>
</LinearLayout>
But what if I want just override text (textview) on each my_custom_view views.
i.e. How can I override a parameter of a child element of the parent my_custom_view.xml when used with <include/> tag?
I know I could create a custom view class with attributes, but I'd like my views to be rendered directly on Android Studios design view.
You can't really do complex logic like that in xml.
Custom views are rendered just like any other view (just rebuild the project after creating class). They also give you much more flexibility with attrs.xml as you are already aware

How to arrange two linear layouts inside a relative layout in 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>

Use margin on an include layout

This is a follow up question to this question:
Margin does not impact in "include"
I am trying to add a margin to an include layout. I have added layout_width and layout_height to the include element, but the margin is still ignored. Furthermore, when I try to auto complete the word "margin" in the layout xml file, this attribute is not even recognized.
So how can I add a margin to an include tag?
The layout:
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/main_status"
/>
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<!--
android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead.
-->
<!--
The drawer is given a fixed width in dp and extends the full height of
the container.
-->
<fragment
android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="left"
tools:layout="#layout/fragment_navigation_drawer" />
As you can see, the LinearLayout's height is set to match_parent. I still want it like that, but that's what caused the included layout and container layout be on top of each other when trying to add margin inside the layout that I wanted to include.
So what I did that got me the effect I wanted was setting the paddingTop attribute of the linear layout container. It created some space between the included layout and the linear layout.

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

How to set width of several views to the largest content width among them? (dynamically)

When I use statically defined layout, I'm able to do this by setting wrap_content as LinearLayout layout_width and match_parent as its childrens' layout_width.
For example, the following XML layout definition:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f88"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#8f8"
android:text="Smaller"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#8f8"
android:text="I'm a bigger view"
/>
</LinearLayout>
looks like the following (note that you can't see LinearLayout background color as it's obscured by TextViews completely):
Which is the desired result. But if I use the same technique when inflating and adding views dynamically via LayoutInflater, the LinearLayout gets stretched to screen width.
(by using LayoutInflater I mean using this method and I pass the right value for root argument)
Why this happens? How can I make similar thing dynamically then? Is it possible to define that in XML, or I'm doomed to implement that logic by myself?
Update:
I display the layout in a PopupWindow. When I look at the LinearLayout in Hierarchy Viewer, it has layout_width = match_parent, which is very strange, because it's wrap_content in my XML.
Update 2:
The problem was caused by adding another View with match_parent width. (it's used as divider) Like this:
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#777" />
Seems like it has no concept of "required width" and forces its parent to stretch.
Problem is solved by simply changing view class of "divider" from View to TextView. The latter doesn't try to grab all available space. But it's still interesting if there are more elegant solutions (I suspect that using TextView for this purpose is overkill and isn't very efficient).
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#777" />

Categories

Resources