Develop Reference

Does getMeasuredHeight() and getMeasuredWidth() work on nested views, and when do I use it?

I've been trying to measure the pixel dimensions of a view within a RelativeLayout that's within another RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="60"
>
...
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/labels_placeholder"
android:id="#+id/player_section_layout"
>
<LinearLayout
android:id="#+id/player_section_background"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<!--The view above is what I'm trying to measure-->
<LinearLayout
android:id="#+id/player_section_background_left"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="50"
android:background="#AAAAAA"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/player_section_background_right"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="50"
android:background="#DD0000"
android:orientation="horizontal" />
</LinearLayout>
<HorizontalScrollView
android:id="#+id/player_section"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_alignTop="#id/player_section_background">
<ImageView
android:id="#+id/waveform_placeholder"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="centerInside"
/>
</HorizontalScrollView>
</RelativeLayout>
</RelativeLayout>
I tried calling getMeasuredHeight() and getMeasuredWidth() right after referring to it in onCreateView() of the fragment:
waveformBackground = (LinearLayout)result.findViewById(R.id.player_section_background);
waveformBackground.post(new Runnable() {
#Override
public void run() {
Log.i("bckg_layout_dims", waveformBackground.getMeasuredWidth()+" "+waveformBackground.getMeasuredHeight());
}
});
And it returns 0 for both.
I did hear something about it not working before the view is being drawn, but I don't know when exactly it finishes drawing. Is it after OnCreateView, and if so, can I call it in OnActivityResult?

The problem you are facing is because the view is being drawn after you ask for the height and width. I used a ViewTreeObserver which constantly listens for changes in the views, and can access the measurements after the views has been drawn. Im not sure this is the best solution for your problem but you should look into it. Here's an example:
mTitleContainer.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int toolBarHeight = mTitle.getHeight() + mSubtitle.getHeight() + (int) TOOLBARPADDING;
if (toolBarHeight != mLastTitleHeight) {
CollapsingToolbarLayout.LayoutParams layoutParams = (CollapsingToolbarLayout.LayoutParams) mTitleToolbar.getLayoutParams();
layoutParams.height = toolBarHeight;
mTitleToolbar.setLayoutParams(layoutParams);
mLastTitleHeight = toolBarHeight;
}
}
}
);

Text over image with matching relative positioning on different screen sizes

I'm stuck.
The problem is how to place text on a static image and keep position depends on it between different screen dimensions.
To achieve this I've tried the layout above:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/default_view_padding">
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:adjustViewBounds="true"
android:layout_height="900dp"
android:layout_centerInParent="true"
android:src="#drawable/example"/>
<TextView
android:layout_alignLeft="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignEnd="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_width="wrap_content"
android:layout_marginTop="190dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>
</RelativeLayout>
But on different screens it looks differently.
So, by example, screenshots. The static image background (in example white image with green line), the view with text on nexus5, on nexus7.
As you can see, a text placed on different places over image.
I doesn't know why is it happend, because I'm using dp and relative layout.
I tried wrap_content/match_parent on image sizes, without ajust view bounds etc. And it haven't help.
Ty for answers.
EDIT: I want the text to always be above the green line on the same distance in different screen dimensions. (the same as in the second image)
EDIT2: Someone misunderstood me, sorry if the question isn't clear. As a background in example i'm tried to use imageview instead of background tag of relative layout, because it is'nt help whatever, i tried that before
The line, which I used in example, is only for that. It just needs to explain the issue of the text positioning

use dimens.xml to Support different size of screens.
in your res folder create some value folders Like :
values-xlarge
values-large
values-small
values-sw800dp
...
in these folders youy should have dimens.xml and define your dimensions.
for example this may be your dimensions for normal screens :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="ImageViewWidth">500dp</dimen>
<dimen name="ImageViewHeight">900dp</dimen>
<dimen name="TextViewMarginTop">190dp</dimen>
</resources>
Definitely your dimensions for large or xlarge screens are different!
to use these, simply put them in XML instead of hard-coding dimens
<TextView
android:layout_alignLeft="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignEnd="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_width="wrap_content"
android:layout_marginTop="#dimens/TextViewMarginTop"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>

If you just want green color as a background of text then use android:background on textview and remove ImageView. Create a 9Patch image with green line at bottom and give that image as background to your text.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/abc_ab_transparent_light_holo"
android:text="Dummy text string"
android:id="#+id/dummy_text" />

I don't know if I understand the question,
but I think solution could be putting RelativeLayout in another contener, ie:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="#dimen/default_view_padding" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:layout_height="900dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/example" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/iv_background"
android:layout_alignLeft="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_centerHorizontal="true"
android:layout_marginTop="190dp"
android:gravity="center"
android:text="Dummy text string" />
</RelativeLayout>
</LinearLayout>

set android:gravity="center", android:layout_centerInParent="true" and android:layout_alignParentTop="true" of the textview

Create a custom view like my sample:
layout view_product_image.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background_light_blue"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgProduct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dip"
android:src="#drawable/main0x" />
<TextView
android:id="#+id/tvQty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imgPoduct"
android:layout_marginLeft="3dp"
android:layout_marginTop="2dp"
android:background="#color/lightBlue3"
android:text="1111"
android:textColor="#color/red"
android:textSize="16dip" />
<TextView
android:id="#+id/tvInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgProduct"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:lines="2"
android:maxLines="2"
android:minLines="2"
android:singleLine="false"
android:text="TextView"
android:textColor="#color/black"
android:textSize="16dip" />
</RelativeLayout>
Class:
package org.mabna.order.ui;
import org.mabna.order.R;
import org.mabna.order.businessLayer.db.BoPreferences;
import org.mabna.order.utils.Farsi;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class ImageView_Product extends LinearLayout implements OnTouchListener {
private static final float FONT_SIZE_LARGE = 20;
private static final float FONT_SIZE_NORMAL = 16;
private static final float FONT_SIZE_SMALL = 12;
private RelativeLayout rlParent;
private ImageView imgProduct;
private TextView tvInfo;
private TextView tvQty;
private double qty = 0;
private float mDensity;
private Typeface tf;
public ImageView_Product(Context context) {
super(context);
initialize();
}
public ImageView_Product(Context context, AttributeSet attrs) {
super(context, attrs);
initialize();
}
protected void initialize() {
if (!this.isInEditMode()) {
tf = Farsi.getFarsiFont(this.getContext());
}
mDensity = this.getResources().getDisplayMetrics().density;
LayoutInflater layoutInflater = (LayoutInflater) getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater
.inflate(R.layout.view_product_image, this);
rlParent = (RelativeLayout) view.findViewById(R.id.rlParent);
imgProduct = (ImageView) view.findViewById(R.id.imgProduct);
tvInfo = (TextView) view.findViewById(R.id.tvInfo);
tvQty = (TextView) view.findViewById(R.id.tvQty);
tvInfo.setTypeface(tf);
tvInfo.setTextSize(FONT_SIZE_SMALL);
}
public TextView getTextView() {
return tvInfo;
}
public ImageView getImageView() {
return imgProduct;
}
public TextView getQtyView() {
return tvQty;
}
public void setInfoText(String text) {
tvInfo.setText(text);
}
public String getInfoText(String text) {
return tvInfo.getText().toString();
}
public void setQty(double value) {
this.qty = value;
if (this.qty > 0) {
tvQty.setText(BoPreferences.getStringValueNoGrouping(this.qty,
getContext()));
setStateHasQty();
} else {
tvQty.setText("");
setStateHasNotQty();
}
}
public double getQty() {
return Double.valueOf(tvQty.getText().toString());
}
public void setStateSelected() {
imgProduct.setBackgroundResource(R.drawable.border06);
}
public void setStateNotSelected() {
imgProduct.setBackgroundResource(R.drawable.border05);
}
private void setStateHasQty() {
tvQty.setBackgroundResource(R.color.lightBlueTransparent);
tvQty.setTextSize(FONT_SIZE_LARGE);
// tvInfo.setBackgroundResource(R.color.darkGreen);
rlParent.setBackgroundResource(R.drawable.background_light_green);
}
private void setStateHasNotQty() {
tvQty.setBackgroundResource(0);
tvQty.setTextSize(FONT_SIZE_NORMAL);
// tvInfo.setBackgroundResource(R.color.lightBlue3);
rlParent.setBackgroundResource(R.drawable.background_light_blue);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
return false;
}
public void setImageSize(int width, int height) {
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)
imgProduct.getLayoutParams();
lp.width = (int) (width * mDensity);
lp.height = (int) (height * mDensity);
imgProduct.setLayoutParams(lp);
tvInfo.setMaxWidth(lp.width);
}
}

I think I understand your problem. Here I've aligned the image to the left and right of the text and set the ImageView and TextView layout_width to wrap_content. I have used android:layout_below and given it a top margin.
This appears to work on all screen sizes.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="20dp">
<TextView
android:id="#+id/tv_example"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>
<ImageView
android:id="#+id/iv_background"
android:layout_width="wrap_content"
android:layout_height="4dp"
android:layout_alignLeft="#+id/tv_example"
android:layout_alignRight="#id/tv_example"
android:layout_marginTop="4dp"
android:layout_below="#+id/tv_example"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:src="#drawable/example"/>
</RelativeLayout>
You can change the height and top margin of the ImageView if you wish.

Use LinearLayout instead of RelativeLayout:
<?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" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:layout_height="900dp"
android:adjustViewBounds="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:gravity="center"
android:text="Dummy text string" />
</LinearLayout>
Second Solution is use android:drawablePadding=""and android:drawableBottom="" in TextView.
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding=""
android:drawableBottom=""
android:gravity="center"
android:text="Dummy text string" >
</TextView>

How write text on image in RelativeLayout while it always keeps the same position (even if image is resized)?

As the title says. I need to write some text at ImageView. For that I was advised to use RelativeLayout. BUT there is not possible to use alignParentBottom (or maybe it is but I cant use margin then).
Problem is: I need to keep text at exactly some part of image even though it is resized or it is shown on different screen resolution etc. Is that possible?
CODE:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:gravity="center" >
<!-- Speaker image -->
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:background="#ffffff"
android:src="#drawable/authorimg" />
<!-- Time -->
<TextView
android:id="#+id/timeTVid"
style="#style/TextWithShadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:text="2:59" />
</RelativeLayout>
I want the TextView to be somewhere in the middle but not exactly there.
EDIT: After first response tried (not working):
Horizontal position http://i59.tinypic.com/o76omg.png
Vertical position http://i59.tinypic.com/20tf7ky.png
I want to have "Your text" to be at the same position at the picture.

I found out that this is the solution. It's a shame that XML in android does not support percentage padding/margin so you have to do it programmatically as shown below. I just got the image width, width of frame and calculated it so the text is always on the same place on the image.
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
int paddingLeft;
frameHeight = imgFrameLayout.getHeight();
frameWidth = imgFrameLayout.getWidth();
imgWidth = image.getWidth();
imgHeight = image.getHeight();
// getting the difference of img width and frame width
int diff = frameWidth - imgWidth;
// if frame is bigger than image then set additional value to padding
// 20% image width + (diff/2)
if (diff > 0) {
paddingLeft = imgWidth / 100 * 20 + diff / 2;
}
// else set padding 20% of the image
else {
paddingLeft = imgWidth / 100 * 20;
}
timeTV.setPadding(paddingLeft, 0, 0, 0);
}

Use this example but it will only work for the Relativelayout:
<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/full_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignTop="#+id/myImageView"
android:layout_alignRight="#+id/myImageView"
android:layout_alignBottom="#+id/myImageView"
android:layout_margin="1dp"
android:gravity="center"
android:text="Your Text"
android:textColor="#000000" />

Might want to try using a FrameLayout. In any event, set textview to match_parent (both ways)
use android:gravity="center" (not layout_gravity). now if you want to adjust the centered position to make it offset a bit, you can use paddingLeft, paddingTop, etc to adjust your center.

I think you should create two separate xml files. the first one for the image and 2nd one for the overlayed text. then in your activity class you should use LayoutInflater. I created an example and I hope it is what you are looking for.
JavaCode:
private ImageView imgView;
private TextView tv00, tv01, tv02, tv03;
private LayoutInflater mInflater = null;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_overlayed_with_text00);
imgView = (ImageView) findViewById(R.id.imgview);
tv00 = (TextView) findViewById(R.id.tv00);
tv01 = (TextView) findViewById(R.id.tv01);
tv02 = (TextView) findViewById(R.id.tv02);
tv03 = (TextView) findViewById(R.id.tv03);
//imgView.setImageBitmap(BitmapFactory.decodeFile("c:\\pic.jpg"));
imgView.setImageResource(R.drawable.pic);
mInflater = LayoutInflater.from(getApplicationContext());
View overView = mInflater.inflate(R.layout.textoverlay, null);
addContentView(overView, new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
ImageviewXML:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.imageoverlayedwithtext00.ImageOverlayedWithText00$PlaceholderFragment" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imgview" />
TextOverlayXML:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<TextView
android:id="#+id/tv00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50sp"
android:text="text0"/>
<TextView
android:id="#+id/tv01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50sp"
android:text="text1"/>
<TextView
android:id="#+id/tv02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50sp"
android:text="text2"/>
<TextView
android:id="#+id/tv03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50sp"
android:text="text3"/>
</LinearLayout>

Heterogeneous GridLayout

I am trying to implement the layout below:
I guess GridLayout is suitable for my needs but after 2 hours of struggle I couldn't create even a similar layout.. The layout is resizing itself wrongly, it exceeds the screen of the phone and it also does not span the specified rows and columns.
Here I selected a button so you can see how it exceeds the boundaries:
and here is the associated xml code: https://gist.github.com/2834492
I have reached a similar layout with nested linearlayouts but it's not possible to properly resize it for different screen sizes.
UPDATE - approximate LinearLayout implementation:
The XML code: https://gist.github.com/cdoger/2835887
However, the problem is it does not resize itself properly here some screenshots with different screen configurations:
TLDR: Can someone show me a heterogeneous layout implementation with GridLayout like in the first picture?

The issue you are facing is due to inappropriate use of the GridLayout. The GridLayout is made to show its children in a grid and you are trying to override that without extending the GridLayout. While what you want may be accomplished in code (utilizing numcolumns and columnsize), it will not be useful for multiple screen sizes without a heck of a lot of code.
The only adequate solution that won't require a ton of hacking is judicious use of both LinearLayout and RelativeLayout. LinearLayout should not be used exclusively as it is made to drop items in a line (horizontally or vertically only). This becomes especially apparent when you try and do the bottom four buttons. While the buttons above may be done with LinearLayout with very little effort, RelativeLayout is what you need for the bottom four buttons.
Note:
RelativeLayout can be a little bit tricksy for those with little experience using them. Some pitfalls include: children overlapping, children moving off the screen, height and width rendering improperly applied. If you would like an example, let me know and I will edit my answer.
Final Note:
I'm all for utilizing the current framework objects in unique ways, and genuinely prefer to provide the requested solution. The solution, however, is not viable given the constraints of the question.
(Revision) Solution 1
After some careful thought last night, this may be accomplished with a pure LinearLayout. While I do not like this solution, it should be multi-screen friendly and requires no tooling around from me. Caution should be used with too many LinearLayouts, as according to Google's developers, it can result in slow loading UIs due to the layout_weight property. A second solution utilizing RelativeLayout will be provided when I return home. Now Tested This provides the desired layout parameters on all screen-sizes and orientations.
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/Button01"
android:layout_width="0"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/Button02"
android:layout_width="0"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.00"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="Button" />
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Solution 1 Explanation
The key to LinearLayouts is to define your imperatives as separate Layouts and nest the others in them. As you apply constraints to more dimensions, more LinearLayouts must be added to encapsulate the others. For yours, it was crucial to have two more parents in order to maintain the proportion. A great indicator of when you should add another level is when you have to utilize layout_weight using anything other than an integer value. It simply becomes to hard to calculate properly. From there it was relatively simple to break it into columns.
Solution 2 (Failed)
While I was able to achieve desirable results utilizing RelativeLayout and "struts", I could only do so with layouts that were multiples of 2 buttons in height. Such a trick would be awesome as the levels of layout are greatly reduced, so I will work on a pure XML solution and post the answer here if and when I achieve it. In the meantime, the LinearLayout above should suit your needs perfectly.

I read this thread and realised that I wanted a flatter solution than those with linear layout. After some research I ended up making my own layout. It is inspired by a GridLayout but differs a bit.
Please note that if you are going to copy-paste the code you'll need to change package names in some places.
This layout has 4 layout parameters that children use to position themselves.These are layout_left, layout_top, layout_right, layout_bottom. The ICGridLayout itself has two attributes: layout_spacing and columns.
Columns tells the layout how many columns you want it to contain. It will then calculate the size of a cell with the same height as width. Which will be the layouts width/columns.
The spacing is the amount of space you want between each child.
The layout_left|top|right|bottom attributes are the coordinates for each side. The layout does no calculations in order to avoid collision or anything. It just puts the children where they want to be.
If you'd like to have smaller squares you just have to increase the columns attribute.
Keep in mind that this is a quick prototype, I will continue working on it and when I feel that it's ready I'll upload it to Github and put a comment here.
All of my code below should produce the following result:
*****EDIT*****
Added the call to measure for the children, forgot that the first time around.
END EDIT
ICGridLayout.java:
package com.risch.evertsson.iclib.layout;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import com.risch.evertsson.iclib.R;
/**
* Created by johanrisch on 6/13/13.
*/
public class ICGridLayout extends ViewGroup {
private int mColumns = 4;
private float mSpacing;
public ICGridLayout(Context context) {
super(context);
}
public ICGridLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public ICGridLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs);
}
private void init(AttributeSet attrs) {
TypedArray a = getContext().obtainStyledAttributes(
attrs,
R.styleable.ICGridLayout_Layout);
this.mColumns = a.getInt(R.styleable.ICGridLayout_Layout_columns, 3);
this.mSpacing = a.getDimension(R.styleable.ICGridLayout_Layout_layout_spacing, 0);
a.recycle();
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
int width = (int) (r - l);
int side = width / mColumns;
int children = getChildCount();
View child = null;
for (int i = 0; i < children; i++) {
child = getChildAt(i);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
int left = (int) (lp.left * side + mSpacing / 2);
int right = (int) (lp.right * side - mSpacing / 2);
int top = (int) (lp.top * side + mSpacing / 2);
int bottom = (int) (lp.bottom * side - mSpacing / 2);
child.layout(left, top, right, bottom);
}
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureVertical(widthMeasureSpec, heightMeasureSpec);
}
private void measureVertical(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int width = 0;
int height = 0;
if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.EXACTLY) {
width = MeasureSpec.getSize(widthMeasureSpec);
} else {
throw new RuntimeException("widthMeasureSpec must be AT_MOST or " +
"EXACTLY not UNSPECIFIED when orientation == VERTICAL");
}
View child = null;
int row = 0;
int side = width / mColumns;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
child = getChildAt(i);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp.bottom > row) {
row = lp.bottom;
}
int childHeight = (lp.bottom - lp.top)*side;
int childWidth = (lp.right-lp.left)*side;
int heightSpec = MeasureSpec.makeMeasureSpec(childHeight, LayoutParams.MATCH_PARENT);
int widthSpec = MeasureSpec.makeMeasureSpec(childWidth, LayoutParams.MATCH_PARENT);
child.measure(widthSpec, heightSpec);
}
height = row * side;
// TODO: Figure out a good way to use the heightMeasureSpec...
setMeasuredDimension(width, height);
}
#Override
public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new ICGridLayout.LayoutParams(getContext(), attrs);
}
#Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof ICGridLayout.LayoutParams;
}
#Override
protected ViewGroup.LayoutParams
generateLayoutParams(ViewGroup.LayoutParams p) {
return new ICGridLayout.LayoutParams(p);
}
#Override
protected ViewGroup.LayoutParams generateDefaultLayoutParams() {
return new LayoutParams();
}
public static class LayoutParams extends ViewGroup.MarginLayoutParams {
int right = 1;
int bottom = 1;
int top = 0;
int left = 0;
int width = -1;
int height = -1;
public LayoutParams() {
super(MATCH_PARENT, MATCH_PARENT);
top = 0;
left = 1;
}
public LayoutParams(int width, int height) {
super(width, height);
top = 0;
left = 1;
}
public LayoutParams(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(
attrs,
R.styleable.ICGridLayout_Layout);
left = a.getInt(R.styleable.ICGridLayout_Layout_layout_left, 0);
top = a.getInt(R.styleable.ICGridLayout_Layout_layout_top, 0);
right = a.getInt(R.styleable.ICGridLayout_Layout_layout_right, left + 1);
bottom = a.getInt(R.styleable.ICGridLayout_Layout_layout_bottom, top + 1);
height = a.getInt(R.styleable.ICGridLayout_Layout_layout_row_span, -1);
width = a.getInt(R.styleable.ICGridLayout_Layout_layout_col_span, -1);
if (height != -1) {
bottom = top + height;
}
if (width != -1) {
right = left + width;
}
a.recycle();
}
public LayoutParams(ViewGroup.LayoutParams params) {
super(params);
}
}
}
ICGridLayout.java is pretty straight forward. It takes the values provided by the children and lays them out.
attrs.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ICGridLayout_Layout">
<attr name="columns" format="integer"/>
<attr name="layout_left" format="integer"/>
<attr name="layout_top" format="integer"/>
<attr name="layout_right" format="integer"/>
<attr name="layout_bottom" format="integer"/>
<attr name="layout_col_span" format="integer"/>
<attr name="layout_row_span" format="integer"/>
<attr name="layout_spacing" format="dimension"/>
</declare-styleable>
</resources>
example_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.rischit.projectlogger"
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.risch.evertsson.iclib.layout.ICGridLayout
android:id="#+id/ICGridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_spacing="4dp"
app:columns="4" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_bottom="1"
app:layout_left="0"
app:layout_right="4"
app:layout_top="0"
android:background="#ff0000"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_bottom="3"
app:layout_left="3"
app:layout_right="4"
app:layout_top="1"
android:background="#00ff00"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_bottom="4"
app:layout_left="0"
app:layout_right="3"
app:layout_top="1"
android:background="#0000ff"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_bottom="4"
app:layout_left="3"
app:layout_right="4"
app:layout_top="3"
android:background="#ffff00"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_bottom="6"
app:layout_left="0"
app:layout_right="1"
app:layout_top="4"
android:background="#ff00ff"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_bottom="6"
app:layout_left="1"
app:layout_right="4"
app:layout_top="4"
android:background="#ffffff"
android:text="TextView" />
</com.risch.evertsson.iclib.layout.ICGridLayout>
</ScrollView>
-- Johan Risch
P.S
This is my first long answer, I've tried to do it in a correct way. If I've failed please tell me without flaming :)
D.S

Like this ?
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.54" >
<Button
android:id="#+id/Button01"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.00"
android:text="Button" />
<Button
android:id="#+id/Button02"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.00"
android:text="Button" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="99dp" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="152dp"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

As many have said, nested linear layouts seem the only way to win here. Some of the solutions have not used the layout parameters in the most flexible manner. Code below seeks to do that, and in a way that's robust with aspect ratio changes. Details are in the comments.
<?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" >
<!-- First row. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Equal weights cause two columns of equal width. -->
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="A" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="B" />
</LinearLayout>
<!-- Second row. -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="C" />
<!-- Third row. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Equal weights cause two columns of equal width. -->
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="D" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="E" />
</LinearLayout>
<!-- Uneven fourth and fifth rows. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:baselineAligned="false" >
<!-- Left column. Equal weight with right column gives them equal width. -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<!--
The use of weights below assigns all extra space to G. There
are other choices. LinearLayout computes sizes along its
axis as given, then divides the remaining extra space using
weights. If a component doesn't have a weight, it keeps
the specified size exactly.
-->
<!-- Fill width of layout and use wrap height (because there's no weight). -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="F" />
<!-- Fill width of layout and put all the extra space here. -->
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="G" />
</LinearLayout>
<!-- Right column. Equal weight with left column gives them equal width. -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<!-- Same as above except top button gets all the extra space. -->
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="H" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="I" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

So here is the solution I promised after one year =)
It basically uses the ViewTreeObserver to get the dimensions of the parent layout and create custom views accordingly. Since this code is one year old ViewTreeObserver might not be the best way to get the dimensions dynamically.
You can find the full source code here:
https://github.com/cdoger/Android_layout
I divided the screen into 8 equal widths and 6 equal heights. Here is a snapshot of how I laid out the views:
final RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.main_layout);
ViewTreeObserver vto = mainLayout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
final int oneUnitWidth = mainLayout.getMeasuredWidth() / 8;
final int oneUnitHeight = mainLayout.getMeasuredHeight() / 6;
/**
* 1
***************************************************************/
final RelativeLayout.LayoutParams otelParams = new RelativeLayout.LayoutParams(
oneUnitWidth * 4, oneUnitHeight);
otelParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
otelParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
// otelParams.setMargins(0, 0, 2, 0);
View1.setLayoutParams(otelParams);
/***************************************************************/
/**
* 2
***************************************************************/
final RelativeLayout.LayoutParams otherParams = new RelativeLayout.LayoutParams(
oneUnitWidth * 4, oneUnitHeight);
otherParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
otherParams.addRule(RelativeLayout.RIGHT_OF, View1.getId());
otherParams.setMargins(2, 0, 0, 0);
View2.setLayoutParams(otherParams);
/***************************************************************/
//... goes on like this
Here is the final screenshot:

Embed your GridLayout in LinearLayout as below and try it worked for me.
<?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="horizontal" >
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2" >
<Button
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_gravity="start|end"
android:layout_row="0"
android:text="ASDFASDF" />
<Button
android:layout_column="1"
android:layout_gravity="start|end"
android:layout_row="0"
android:text="SDAVDFBDFB" />
<Button
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_gravity="fill|center"
android:layout_row="1"
android:text="ASDVADFBFDAFEW" />
<Button
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_gravity="fill|center"
android:layout_row="2"
android:text="FWEA AWFWEA" />
<Button
android:layout_column="1"
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:layout_row="2"
android:text="BERWEfasf" />
<Button
android:layout_width="94dp"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_gravity="fill|center"
android:layout_row="3"
android:text="SDFVBFAEVSAD" />
<Button
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_gravity="fill|center"
android:layout_row="4"
android:layout_rowSpan="2"
android:text="GVBAERWEFSD" />
<Button
android:layout_column="1"
android:layout_columnSpan="1"
android:layout_gravity="fill|center"
android:layout_row="3"
android:layout_rowSpan="2"
android:text="VSDFAVE SDFASDWA SDFASD" />
<Button
android:layout_column="1"
android:layout_columnSpan="1"
android:layout_gravity="fill|center"
android:layout_row="5"
android:text="FWEWEGAWEFWAE"/>
</GridLayout>
</LinearLayout>

difficulty using AttributeSet.getAttributeIntValue()

My app needs the height and width of the extended ImageView. I thought this should work:
package my.android.test;
public class TestImageView extends ImageView
{
private int mWidth=0;
private int mHeight=0;
public TestImageView(Context context, AttributeSet as)
{
super(context, as);
final String xmlns="http://schemas.android.com/apk/res/android";
mWidth = as.getAttributeIntValue(xmlns, "layout_width", 0);
mHeight = as.getAttributeIntValue(xmlns, "layout_height", 0);
}
#Override
protected void onDraw(Canvas canvas)
{
//do stuff
}
}
but it doesn't work. 0 is returned by getAttributeIntValue() eventhough the layout_height is defined in the layout XML:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:background="#fffcb95a"
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<FrameLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip"
<my.android.test.TestImageView
android:id="#+id/TestImageViewID"
android:layout_width="100dip"
android:layout_height="100dip"
android:src="#drawable/icon"
android:scaleType="centerCrop" />
</RelativeLayout
</FrameLayout
</LinearLayout
</ScrollView
what to do ?

Note an explanation for why the original attempt doesn't work -- layout_width and layout_height are not actually holding integers, they are holding dimensions. You need to retrieve these via Context/Theme.obtainStyledAttributes, so you can get them as a TypedValue that can be converted to pixels.

Just call getWidth() and getHeight().