This question already has answers here:
clipChildren is not working even though set to false?
(6 answers)
Closed 1 year ago.
I have a yellow RelativeLayout containing a taller red LinearLayout.
In order to make the whole LinearLayout visible, I set android:clipChildren="false", but this does not work as expected:
<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="44dp"
android:background="#FFFF00"
android:clipChildren="false" >
<LinearLayout
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#FF0000"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
with android:clipChildren="true":
with the red LinearLayout clipped as expected
with android:clipChildren="false":
where the LinearLayout height is clipped, and the width set in the layout is not respected.
What's wrong?
EDIT
If I wrap the container in a LinearLayout with both dimensions matching its parent, I get the same result (I checked that the LinearLayout container's container fill the whole screen).
<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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="#FFFF00"
android:clipChildren="false" >
<LinearLayout
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#FF0000"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
</LinearLayout>
EDIT 2
If I put the android:clipChildren="false" attribute in the parent LinearLayout, I get the following:
android:clipChildren="false" allows each child to draw outside of its own bounds, within the parent. It doesn't allow children to draw outside of the parent itself. For that you would need to set android:clipChildren="false" on the grandparent (as well).
I think what you're seeing with the colors is just because colors have no inherent bounds. If there is nothing clipping them, colors go forever. My theory is that if you used, say, a stretched 1x1 px image instead of a color, things would be different.
Also set
android:clipToPadding="false"
Beside:
android:clipChildren="false"
A trick which can solve your problem is to add some placeholder view
<View
android:layout_width="wrap_content"
android:layout_height="1dp"
android:background="?android:attr/listDivider"
android:layout_alignParentBottom="true"/>
in the relative layout and boom!
Explanation
For me the boundary of relative layout seems to be different than the height.
The boundary seems to be where the content ends or where the parent ends. Adding some view to the bottom sets the boudary at the bottom so everything works fine.
Related
Background
I'm developing a custom notification layout by injecting an OS-generated notification view into my own layout. My layout must be as short as possible, which is 50dp in Android 10.
Problem
The view that I'm injecting into my view has margins that cause it to stretch my layout from 50dp to 66dp.
Code
The following layout is a simplification of what's going on to demonstrate the problem:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="#+id/activity_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/full_height_view"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_bright"
/>
<TextView
android:id="#+id/bad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="46dp"
android:layout_marginBottom="20dp"
android:background="#android:color/holo_red_light"
>
</TextView>
</LinearLayout>
</FrameLayout>
Note that container has minHeight of 50dp, which I don't want to be exceeded. The problem is the margins from bad_view sum up to 66dp and stretch the parent to 66dp.
Question
How can I prevent the margins on bad_view from stretching the parent beyond its minimum height? I cannot set a fixed height on the parent because the exact height is OS-dependent. And I cannot modify bad_view because it's generated by the OS.
I ended up solving this by setting the visibility of bad_view to gone.
I found another solution: use GridLayout vertical weights to override the problematic view's height. This gave me the flexibility of a weighted horizontal LinearLayout but with the addition of vertical weights.
This question already has answers here:
What does android:layout_weight mean?
(13 answers)
Closed 2 years ago.
The xml layout is like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bottom"/>
</LinearLayout>
And it turns out that the textview will be placed to the bottom of its parent.I think layout_weight is used to allocate unusesd space and it's very common to use layout_weight with code like :
android:layout_width="0dp"
But in this case,the first layout asks to occupy all spaces with:
android:layout_width="match_parent"
android:layout_height="match_parent
So how does layout weight work here?
PS:I have read this question: What does android:layout_weight mean? but I don't think it accounts for this question.
layout_weight specifies how much of the extra space in the layout to be allocated to the View.
The first linearlayout has already taken the whole space with attribute match_parent,why setting layout_weight enables the second view to showup at the bottom ?
I believe this is not the common usage of layout_weight.Hope somebody point out my mistake.
When you use layout_weight attribute it is used to calculate the weightage of child views of the single parent.
As you have not mentioned weight of all other views it's behaving wrong.
layout_weight is useful when you want your child views to be certain percentage of the parent view.
for example,
in parent view you need to mention:
android:weightSum="1"
So your parent view will have total weight as 1, and in both of the views you need to mention the:
android:layout_weight=".9" and android:layout_weight=".1"
so the first view will take 90%, and second view will take 10% of the space.
To be more clear Ideally the sum of weights of all the childs should be equal to the weightsum mentioned in parent, to it work as expected.
**And as you have provided android:layout_width,android:layout_height` of the textview, this is the mistake as it will make issue in the weight.
So to use weight attribute correctly you need to give other specs as 0dp in order to weight to apply successfully.**
Note: When you use weight other specs like android:layout_width,
android:layout_height should be set to 0dp.
To understand it practically, why don't you play around with below
layout:
Just Try to change the weight of linear_layout, text_view and you will see, how it's supposed to works ideally:
<?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:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#android:color/holo_blue_bright" >
</LinearLayout>
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="90"
android:background="#android:color/white"
android:text="bottom"
android:textColor="#android:color/black" />
</LinearLayout>
If you want to place your components in separate boxes in layout ,you should use LinearLayout.
You can define the manner of boxes place with orientation vertical or horizental.
You can define their size easily with layout_weight.
look here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id=#+id/parent_linear>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4">
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="bottom"/>
</LinearLayout>
parent_linear divides your layout in 2 parts(because you use 2 components) vertically. Now you can set weights to child's components width. So,(for TextView) you set android:layout_width="0dp" for its width and android:layout_weight="2" ..follow it for LinearLayout- .
The result of this is parent_layout divide itself into 6 parts (2+4=6),and allocates 4 parts to LinearLayout and 2 for TextView.
I've been struggling with this problem for awhile now. Basically, I've created a class that returns me a properly stylized GraphicalView chart; I have one class for bar charts and another for pie charts (I used renderer.setInScroll(true) BTW). I populate my Activity with a few charts and a few TextViews, but the more I add Views (any View) they are pushed off the top of the screen and there is a big empty space at the bottom of the scroll view.
My XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollingProfilePaid"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="00dp"
android:orientation="vertical">
<TextView
android:id="#+id/totalScore"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastScoresChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/totalTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<TextView
android:id="#+id/totalAverageResponseTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastTimesChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<!--...........-->
</LinearLayout>
</ScrollView>
What I've tried:
1.ScrollView->android:fillViewport="true"
2.Instead of specifying a height for the charts I set it in the java class using pastScoresChart.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, (int)(dens*350)));
3.Wrapping the ScrollView in a , using a child Relative Layout with android:alignParentTop="true" as the header, another child Relative Layout with android:alignParentBottom="true" as the footer, and changing the ScrollView to android:alignBelow="#id/header". This just made the Scrollview about 40px tall, seemingly making the problem worse.
4.Oodles of other things that I can't recall this second.
I've found a workaround of setting android:marginTop="500dp" (or a similarly large value) in the ScrollView will push the Views back down into their approximate respective positions. Unfortunately it is difficult to get it to fit exactly, and it worries me for device compatibliity. Any suggestions?
The empty space at the bottom of the ScrollView must be because of it's child (LinearLayout) attribute android:layout_gravity="center". Try to use like this:
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
OBS 1: The android:layout_marginTop="00dp" attribute is unnecessary.
OBS 2: fill_parent is deprecated starting from API Level 8 and is replaced by match_parent. So, use match_parent. More on: http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
OBS 3: Here is a tip about debugging layouts: change the background color of the views to see what are the bounds of each view.
I'm trying to achieve the layout on the right of the image below. What I am currently getting is on the left.
Here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/garment_grid_item_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/gridview_image_placeholder"
android:contentDescription="#string/blank"
android:scaleType="centerCrop"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/garment_grid_item_on_loan"
android:src="#drawable/icon_borrowed"
android:contentDescription="#string/blank"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:visibility="gone"
/>
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/item_border"
/>
</RelativeLayout>
#drawable/item_border (lime green is just to highlight the transparent areas):
The RelativeLayout is used as an item template for a GridView. garment_grid_item_image is being populated in code. garment_grid_item_on_loan is the purple triangle in the top right whose visibility is controlled in code.
The View at the bottom uses a 9 patch and it is the one I'm having trouble with. I want it to be as tall as the parent RelativeLayout but neither match_parent or fill_parent work. What can I do to get it to work?
I've just tried your layout with some similar images and it works fine when set as the root element in an Activity.
It could be to do with your RelativeLayout having wrap_content as its size, with the child Views not specifying a size to wrap. Try specifying a fixed size just to see if the problem goes away, then go from there.
First off, this is not a duplicate question, to best of my ability I've tried all (there are many) similar questions. Solutions to such problems appear to be very subjective, specific to a given scenario.
My layout currently appears as follows. Black boxes are images (logo and body, respectively), colours represent each layout:
My XML:
<?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="#000"
android:padding="0px"
android:layout_margin="0px"
android:orientation="vertical">
<LinearLayout
android:layout_weight="16"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:gravity="top|center"
android:orientation="horizontal">
<ImageView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/logo"
android:layout_gravity="top|center" />
</LinearLayout>
<LinearLayout
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00F"
android:gravity="bottom|left"
android:orientation="vertical">
<ImageView
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/body"
android:layout_gravity="bottom|left" />
</LinearLayout>
</LinearLayout>
Here you can see I have a parent linear layout, split into two children linear layouts. This is because I need the images to be positioned differently within that part of the page.
In a nutshell, I need logo to be vertically aligned to the top, and body horizontally aligned to bottom-left.
Now, a few things that I've tried:
Using RelativeLayout rather than Linear
Switching gravity with layout_gravity for both LinearLayout and ImageView, along with combinations of excluding each
Fairly confident match_parent for width and height is what I want, but I have tried different combinations with wrap_content
What I've come to understand:
gravity:top requires the parent view use orientation:horizontal
gravity:left requires the parent view use orientation:vertical
gravity applies to the children of the view
linear_gravity applies how the child aligns with it's parent
Using the same value for gravity on the parent and linear_gravity on the child might have the same effect (when using one instead of the other)?
Hopefully this is enough information. I'm having a very difficult time wrapping my head around how these layouts work.
Thank you SO much for the help!
I think your problem is you are setting dimensions of the image views to match_parent. I would use a RelativeLayout as it seems to be the most efficient in your case (pseudo-XML-code):
RelativeLayout (width=match_parent, height=match_parent)
ImageView (width=wrap_content, height=wrap_content,
alignParentTop=true, centerHorizontal=true)
ImageView (width=wrap_content, height=wrap_content,
alignParentBottom=true, alignParentLeft=true)
You don't need any gravity setting here. You might want to play with the scaleType attribute depending on your image sizes.