RelativeLayout positioning issue with first child LinearLayout using margin - android

I'm currently trying to position some LinearLayouts (which are then filled with some images) on an absolute position on the screen. Currently the LinearLayouts are alinged to the top-left of the parent RelativeLayout and then positioned using margins. This works properly for all child LinearLayouts EXCEPT the first one in the list. Setting some margins (as for example 25dp for the left margin) does not show any effect in this case. I hope someone has had the same issue and can provide some guidance.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_page"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:id="#+id/ll_first" android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="25dp" android:layout_marginTop="20dp"></LinearLayout>
<LinearLayout android:id="#+id/ll_second" android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="175dp" android:layout_marginTop="30dp"></LinearLayout>
<LinearLayout android:id="#+id/ll_third" android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="40dp" android:layout_marginTop="140dp"></LinearLayout>
</RelativeLayout>
Edit:
Example image http://i.stack.imgur.com/HuYjU.jpg

The RelativeLayout provides some tags for the positioning of Views/ViewGroups relative to another View/ViewGroup.
android:layout_below="id" and android:layout_above="id"
This will put the View below/above another View with the id.
android:layout_alignRightOf="id" and android:layout_alignLeftOf="id"
This will put the View to the right/left of another View with the id.
All tags have the same usability like this, where I use the android:layout_below="" to set a View/ViewGroup below another:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_page"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<--! YOUR LAYOUT AT THE TOP OF YOUR PARENT -->
<LinearLayout
android:id="#+id/ll_first"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"></LinearLayout>
<LinearLayout android:id="#+id/ll_second"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/ll_first" ></LinearLayout>
<LinearLayout
android:id="#+id/ll_third"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/ll_second"></LinearLayout>
</RelativeLayout>
Now you can use some margins for the position of every View.

Related

Linear Layout won't take the height of its parent in percentRelativeLayout

I am using Xamarin Android, and I have a list view with row views that have the following content in them:
All of these views are wrapped in a PercentRelativeLayout, because I want to keep the widths proportional. So the issue I'm running into is that since the two layouts on the left are left empty and filled at runtime (there is absolutely no way around this) their height is measured out to 0, which then sets the Rowview height to 0, and that then sets the controls layout off to the right to have a height of 0, which then stretches to the size of the largest control inside of it (ex:)
I have tried:
Using layout weights and a height of 0 to allow the layout itself to stretch to fill the parent
Using layout weights on the controls themselves within the layout
Scrapping a layout altogether, and simply wrapping the image buttons in the PercentRelativeLayout, and using layout positions to position them properly
Using percentage based layout widths and heights within the children to fill the height (this only seems to work for the width, but not height)
Adding dummy views as padding to push the controls layout into position
Adding percentage based margins to the layout itself, the children, the padding dummy views, and every combination of those
Not one single thing I have tried has had any effect, the only thing that affects the height of the linear layout is simply hard-coding the height.
My question then is how can I tell this layout to occupy the full height of the rowview once everything has been measured? (Please let me know if you have any other questions to help address this, I'm happy to oblige)
EDIT #1: Here is my xml for the rowview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="400dp"
android:layout_height="match_parent"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:paddingTop="10dp"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="match_parent"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_below="#id/LeadTagLayout"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingRight="10dp"
android:paddingLeft="10dp">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"
android:background="#drawable/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"
android:background="#drawable/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
I've played a bit with your code, and the result seems good.
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="this is a test"/>
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_marginTop="5dp"
android:layout_below="#id/LeadTagLayout">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
Let me know if this works for you at runtime (i've removed some background drawable files which you didn't provided to test this XML).
I've added a TextView inside the RelativeLayout to test his height

Android - How do I make the button taller in a linear layout?

I have a linear layout inside a relative layout, and I want to make the buttons 'taller' to fit the height of the linear layout.
I tried adding padding, as you can see in the screenshot, the layout is 'taller' but the buttons are not. I tried 'fill_parent', 'match_parent' but it didn't make a difference. How do I make the buttons expand in height?
<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="match_parent"
android:id="#+id/timerLayout">
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="48dp"
android:text="#string/chronometer"
android:textSize="50sp" />
<LinearLayout
android:id="#+id/buttonLayout"
android:orientation="horizontal"
android:paddingLeft="4.0dp"
android:paddingTop="50.0dp"
android:paddingRight="4.0dp"
android:paddingBottom="4.0dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnReset"
android:layout_width="0.0dp"
android:layout_height="fill_parent"
android:drawableLeft="#drawable/ic_restore_white_24dp"
android:drawableStart="#drawable/ic_restore_white_24dp"
android:text="#string/pause_btn"
android:layout_weight="1.5" />
<Button
android:id="#+id/btnStart"
android:layout_width="0.0dp"
android:layout_height="fill_parent"
android:text="#string/start_btn"
android:drawableLeft="#android:drawable/ic_media_play"
android:drawableStart="#android:drawable/ic_media_play"
android:layout_weight="1.5" />
<Button
android:id="#+id/btnSave"
android:layout_width="0.0dp"
android:layout_height="fill_parent"
android:text="#string/save_btn"
android:drawableLeft="#drawable/ic_save_white_24dp"
android:drawableStart="#drawable/ic_save_white_24dp"
android:layout_weight="1.0" />
</LinearLayout>
The extra space you are seeing is from the padding values in your linear layout, and your buttons are already filling the parent linear layout. But your linear layout has specified the following.
android:layout_height="wrap_content"
If you want to see buttons with a larger height, change the height value for your linear layout to something else like:
android:layout_height="300dp"
your linearlayout says height:wrap_content
so the child elements will takeup only as much space as specified.
Try giving either minHeight for linearlayout or simply remove linearlayout and in your buttons specifiy "alignparentbottom = true".
For left-most button give alignparentStart = true.
Take a look at your xml layout file very closely
<LinearLayout
android:id="#+id/buttonLayout"
android:orientation="horizontal"
android:paddingLeft="4.0dp"
android:paddingTop="50.0dp" //this guy
android:paddingRight="4.0dp"
android:paddingBottom="4.0dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
the android:paddingTop is the space on the top of every child in your LinearLayout so if you remove it the buttons will fit.

Incorrect height of RemoteViews notification when using linear layout

I've created a notification using RemoteViews with a custom layout. The layout structure is as below.
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:adjustViewBounds="true" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6"
android:layout_gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingTop="8.0dip" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:divider="?android:listDivider"
android:dividerPadding="12.0dip"
android:gravity="center_vertical"
android:layout_gravity="center"
android:orientation="horizontal"
android:showDividers="middle|beginning" >
</LinearLayout>
</LinearLayout>
The effect of it all appears only in a fraction of the notification height, and not in the full height of the notification. E.g. check-out the buttons in the screenshot at http://i57.tinypic.com/14dzo9i.png (the middle notification is the focus of the question), which are in the last child of the parent LinearLayout, and should be all vertically centre-aligned.
My question is very similar to Height of notification incorrect "match_parent", but since there isn't a real answer present there, I'm asking this. The answer on that question does refer to a way to dynamically figure out the notification height. If that is the solution to use, I'd like to know how to use the height obtained from there to dynamically set the height of the remote view, since I don't see a height setter on the remote views object.
Please note that the height of the image is fine when I use a relative layout instead. Relative layout still has two problems: 1. the buttons are still not vertically centre-aligned and 2. I can only wrap content or fill parent, not divide the available space into the two children linear layouts. Screenshot: http://i59.tinypic.com/o1000j.png
Seems to be working on changing android:layout_height="wrap_content" to android:layout_height="match_parent" for the views within. Somehow missed it earlier, interesting though the behaviour for this combination of values.
Change your Layout to RelativeLayout and use param android:toLeftOf="#+id/...", android:toRightOf="#+id/..." to align your subView in layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/image1"
android:src="#drawable/ic_launcher" />
</RelativeLayout>

android center textview in layout

I have a listview with custom rows. In the row there are these items:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="10dp"
android:layout_height="fill_parent"
android:focusable="false"
android:scaleType="fitXY">
</ImageView>"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textsll"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_marginLeft="5dp">
<TextView android:id="#+id/textView1"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:maxLines="1"
android:ellipsize="end">"
</TextView>
<TextView android:id="#+id/textView2"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true"
android:layout_below="#+id/textView1"
android:maxLines="1"
android:ellipsize="end">
</TextView>
</RelativeLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textsll2"
android:layout_gravity="center_vertical|right"
android:layout_marginLeft="10dp">"
<TextView android:id="#+id/textView3"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:paddingBottom="5dp"
android:maxLines="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:background="#87EB81">
</TextView>
</LinearLayout>
</LinearLayout>
If both textviews has some content, they are centered vertically in the row (almost).
But if the lower textview is empty, I call:
holder.textView2.setVisibility(View.INVISIBLE);
holder.textView.setGravity(Gravity.CENTER_VERTICAL);
Still, the upper textview gets into the top of the row. Why?
If I set it to View.GONE, I get this, but I dont want the height of the row to change:
Use android:layout_weight to set all the childs of the main LinearLayout to mesure the same.
Use a LinearLayout as parent for textView1 and textView2. Use Use android:layout_weight to have the same size for each one.
Define TextView one with android:gravity="center_vertical|left" Then, if you don't want to show the second TextView, set its visibility as View.GONE.
Maybe this will resolve your problem,
Update:
In a RelativeLayout, views are aligned with their parent, with the RelativeLayout itself, or with other views. For instance, we declared that the description is aligned with the bottom of the RelativeLayout and that the title is positioned above the description and anchored to the parent's top. With the description GONE, RelativeLayout doesn't know where to position the title's bottom edge. To solve this problem, you can use a very special layout parameter called layout_alignWithParentIfMissing.
This boolean parameter simply tells RelativeLayout to use its own edges as anchors when a constraint target is missing. For instance, if you position a view to the right of a GONE view and set alignWithParentIfMissing to true, RelativeLayout will instead anchor the view to its left edge. In our case, using alignWithParentIfMissing will cause RelativeLayout to align the title's bottom with its own bottom.
For more look at Layout Tricks: Creating Efficient Layouts
This can be possible in your RelativeLayout by setting up the layout_below and layout_above with the help of parent alignment by using layout_centerInParent and set the value true of layout_centerHorizontal
Hope, this will work.
Try to use:
<TextView
...
android:layout_height="?android:attr/listPreferredItemHeight"
...
/>
in your_list_item.xml. And use View.GONE
Try to fix some value to your RelativeLayout's height like-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textsll"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_marginLeft="5dp">
To Solve for your problem what u can do is have the LinearLayout fill Parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
And use View.GONE This will make the Row Height Same.
If you see a gap after Best Car in World then try using Relative Layout and align last Layout to bottom.

GridLayout pushes down its children and overflow when given fill_parent for height

As it seems the GridLayout will always push its children to layout corresponding to their needs. for instance the following declaration:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="3"
android:orientation="vertical"
android:rowCount="4"
android:useDefaultMargins="true" >
...
<ImageView
android:id="#+id/main_image"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_row="3"
android:scaleType="fitStart" />
</GridLayout>
The GridLayout declares fill_parent and as such I would expect it to not overflow. The GridLayout should take the size of the parent which in this case is the window (full height). However in hierarchy viewer the GridLayout is set as Wrap_content for both vertical and horizontal.
As such the ImageView (which is a large image) or any text view will be push to fit themself and as such overflow the container.
This can be seen within the hierarchy viewer where the container grid view fits the parent:
while the image view overflow
Reading the documentation, I understand there is a need to set gravity. As far as I can try, I used all kinds of gravity options and image scaling options without much effect. Removing the margins with useDefaultMargins="false" does change the layout overflow which leads the issue towards gridlayout.
My question follows:
Is this a bug or am I using the GridLayout incorrectly
How can I force the GridLayout's children to fit their container and to fill
remaining spaces
The trick in other layouts is to give the first element an android:layout_weight="1.0" and nothing to the other elements. Why it works I have no idea, but it does. Here's a simple XML that displayed an ImageView, a TextView and a Button. Without the layout_weight parameter assigned to the ImageView the text and button were shifted down.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
android:orientation="vertical"
android:keepScreenOn = "true" >
<ImageView
android:id="#+id/imageView_surprise"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:scaleType="centerInside"
android:contentDescription="#string/accessibility_imageView_surprise"
android:layout_weight="1.0" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom" >
<TextView
android:id="#+id/textView_message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="24sp"
android:gravity="center_horizontal" />
<Button
android:id="#+id/button_share"
style="#style/button_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

Categories

Resources