Develop Reference

Nested fragment filling the rest of the space

I would like to have a nested fragment which should take the rest of the space. The problem is that it even doesn't show because the height is 1 px. If I set the height to 300 dp for example everything looks ok. Here is my code. Maybe the layout cannot calculate what is the height of the other two layouts.:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/white_with_divider_bg"
android:id="#+id/firstL">
</RelativeLayout>
<RelativeLayout
android:id="#+id/secondL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
</RelativeLayout>
<FrameLayout
android:id="#+id/child_fragment"
android:layout_height="0dip"
android:layout_width="match_parent"
android:layout_weight="1"/>
</LinearLayout>
It should look like this:

When working with weights all children of the LiniearLayout should have a weight, but that wouldnt help you. You should have android:id="#+id/child_fragment" have height="match_parent" and remove the weight.
That should work.

Resize ImageView to make entire layout fill screen

I have a screen that contains some TextViews and an ImageView inside a LinearLayout with vertical orientation. I would like the whole thing to fit exactly in the screen (no matter what its size is) where the ImageView is the one that adjusts itself to accommodate this.
I've seen here a few variations of this question (including this) but didn't find anything that really answers my requirement.
So far i've used a solution which is not very "pretty", which is putting the entire LinearLayout inside a ScrollView, and use a custom ImageView that on its onMeasure method calculates the delta between the height of the ScrollView to the height of the screen. If the former is larger than the latter then the delta is subtracted from the ImageView's measured height.
This solution is not perfect and i would really like to know if there is a better one. Im sure there is.
Appreciate your help.
EDIT: here is the layout xml
<com.xxx.widgets.LockableScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res/com.venews"
android:layout_width="match_parent"
android:layout_height="match_parent"
custom:scrollable="false"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/login_horizontal_margin"
android:paddingRight="#dimen/login_horizontal_margin"
android:orientation="vertical">
<com.xxx.widgets.ResizableToFitScreenImageView android:id="#+id/login_logo_image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/login_logo_margin"
android:layout_marginBottom="#dimen/login_logo_margin"
android:src="#drawable/ic_logo_and_name"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/login_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<TextView android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/login_username"/>
(...Other stuff...)
</RelativeLayout>
</LinearLayout>
</com.xxx.widgets.LockableScrollView>
EDIT2: and here's a sketch that i hope will make things clearer.
The sketch is showing 2 different screen sizes cause this solution would need to support also different devices with different screen sizes.

On the ImageView, set android:layout_height="0dp" and android:layout_weight="1". This will cause it to fill the remaining space (more about layout_weight here).
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

Multiple screen sizes and XML Layout

I have read everything I can find, and I just can't figure this out. I have an XML with a heading, then a listview, and then 2 buttons on the bottom row. In order to make the layout look perfect, I have "hardcoded" the size (467dp) of the listview. This is fine on my Samsung Galaxy S4, but I'm not sure it will look appropriate on other phones of slightly different sizes. I tested it on a Galaxy 8" tab and it did not look right. I then tested it on a 10.1" tab and it (again) did not look right. Basically the bottom buttons were up in the middle of the screen. I got around this by creating layouts for sw600dp and sw720dp. For each of those I had to hardcode a different size for the listview. It would seem to me that there is a better way to have a heading-listview-button XML that would display (relatively) the same on any device. Can anyone please tell me how to to alter my XML so I don't have to hardcode the size of the listview?
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/title_line"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="#string/workout_locations">
</TextView>
<ListView
android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="467dp"
android:longClickable="true" >
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/help_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="#string/help_description"
/>
<ImageButton
android:id="#+id/add_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="#string/add_description"
/>
</LinearLayout>
</LinearLayout>

android:layout_weight="1 add this in the buttons

I wonder if this might help:
ensure that the entire layout is a relativeLayout, and inside it, put the listview
<ListView
android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp" // the size of the buttons height
android:longClickable="true" >
</ListView>
and below it another relativelayout with the buttons inside it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/help_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/help_description"
/>
<ImageButton
android:id="#+id/add_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/add_description"
/>
If this still causes an issue, then you could write :
android:layout_above="#+id/relButtonLayout"
inside the listview.

Use layout_weight to take up as much room that can be afforded.
<ListView android:id="#+id/location_list"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:longClickable="true" >
</ListView>

If you've hardcoded some sizes, you can bet it won't look good in most of the devices. In order to do that, it's always better using layout_height and layout_weight set to wrap_content or match_parent depending on what you need.
There's another important tool for the case you describe: layout_weight, as you might have already used. Messing with a ListView to fit the design you want can be hard at the first time, but once you discover how to set up its layout it's easy for the rest of them.
In my case, this definition always work as should:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="#+id/mylistview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical" >
</ListView>
</LinearLayout>
Take a look at it: I've set a singular LinearLayout (in this case because it has more views than just the ListView I'm showing), but I'm setting the weight of that ListView to 1, being the sumWeights of that LinearLayout 1. This way you assure yourself the ListView will expand as long as it can, without the needing of hardcoding values.
It's just a matter of playing around with it for a while, but the less values you hardcode, the more adaptable will be on other devices.

Android TableLayout expressed as a percentage of LinearLayout

I am trying to place a TableLayout as the only item inside a LinearLayout (It has a background icon I want to cover the whole screen) and I want to centre it and say use 60% of the width and 70% of the height for example. I have this, and it looks ok, but I am not sure it will work across many devices and am wondering whats the best, most general way to express it.
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/mylogo"
android:padding="0dip"
android:gravity="center_vertical|center_horizontal"
android:baselineAligned="false"
>
<TableLayout
android:background="#FFFF0000"
android:layout_width="200dp"
android:layout_height="250dp"
android:gravity="center_vertical|center_horizontal"
android:stretchColumns="field">
</TableLayout>
</LinearLayout>
I messed around with layout_Weights, but the only thing I managed to do was make the table disappear.
Thanks
Stephen

LinearLayout can only do child sizing by weights for one dimension but as you're only worried really about sizing a single view, you can accomplish this by nesting LinearLayouts.
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/mylogo"
android:gravity="center"
android:weightSum="1.0">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:gravity="center"
android:weightSum="1.0"
android:layout_weight="0.7">
<TableLayout
android:background="#FFFF0000"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:stretchColumns="field"
android:layout_weight="0.6">
</TableLayout>
</LinearLayout>
</LinearLayout>
Whether this layout will look good across devices depends on your content. In general I tend towards reasonable paddings/margins, but again it's very dependent on content.

Try using a RelativeLayout instead of the LinearLayout, because if there is only one child in the linear, it will occupy the full space of its parent.

I think that the way you did is good. You'll probably have some differences between different devices, but you can set different layouts for other screens densities and orientations.
Using layout_weight would help only if you had more than one child inside the LinearLayout.

Scaling an image to max available width, keeping aspect ratio and avoiding ImageView extra space

I have this simple layout XML, and a green_square.png file which is 30X30 pixels
<?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:orientation="vertical" >
<ImageView
android:background="#color/red"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/green_square"/>
</LinearLayout>
What I'm trying to achieve is scaling the image to fill the parent width, keeping it's aspect ratio with no extra space of the ImageView.
I've added a red background to the ImageView just for reference of the extra space I want to avoid.
Here is my goal

<ImageView
android:id="#+id/game"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/ic_game"
/>
this works for me. Full width of parent and center crop to keep aspect ratio

It's so simple. Just make the width fill_parent and height wrap_content. Here is the I figured it out.
<ImageView
android:id="#+id/game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/ic_game"
/>

In my view, this ImageView extra layout is a bug. I had the same thing happen. As a result, text that I wanted to follow the green_square followed the extra layout. So what I did was specify the text relative to the bottom of the screen. That way, the text would go over the extra layout. I admit, it wasn't the best solution, but it looks much better than having a huge space between the green_square and the text.

There lots of great answers here which actually works. I just what to share the way I do this now with a more modern XML syntax, the constraint view. Trust me constraint view rooks!
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#394BAB"
tools:context="com.appdomain.app.apppro.ActivityName">
<ImageView
android:id="#+id/nice_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:src="#drawable/green_square"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
of course the
tools:context="com.collectsavings.collect.collectpro.LoginAndRegisterPrompt"
and
android:src="#drawable/green_square"
Should all match your app activity context and drawabl resources respectively.

Use scale type "fitCenter" or "fitxy"

Try this,
<?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:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/red"
android:scaleType="centerCrop"
android:src="#drawable/green_square" />
</LinearLayout>