Develop Reference

EditText and textView will not fit within layout bounds

I'm building a gridView which replicates the basic functionality of a Launcher (it allows you to create new folders - and arrange them within the gridView).
My problem is I have a textView and an imageView (which should appear below the bottom most tile [it is either white or grey depending on how many times the add image button is clicked] in the screenshot below) however they are being pushed outside the bounds of the layout for some reason - and I'm having trouble identifying which one is causing this to occur.
I've tried many different combinations of height and width paramaters as well as trying Linear vs Relative layout for my innermost child layout - but I still can't seem to keep the textView and an imageView from being pushed outside the layout completely and I'm having a bit of trouble nailing down what exactly is causing it.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1.0" >
<GridView
android:id="#+id/image_grid_view"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.8"
android:background="#color/grid_background"
android:gravity="center"
android:horizontalSpacing="2dip"
android:numColumns="#integer/num_columns"
android:stretchMode="columnWidth"
android:verticalSpacing="2dip" />
<RelativeLayout
android:id="#+id/bottom_part"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_weight="0.2"
android:background="#android:color/black"
android:orientation="horizontal"
android:weightSum="1.0" >
<Button
android:id="#+id/button_add_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:onClick="onClickAddImage"
android:text="Add image" />
<com.example.project.DeleteZone
android:id="#+id/delete_zone_view"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:src="#drawable/delete_zone" />
<FrameLayout
android:id="#+id/image_source_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/sqwhite"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="5dp" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/sqwhite"
android:layout_marginRight="5dp" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/editText1"
android:layout_marginRight="5dp"
android:text=""
android:textColor="#android:color/white" />
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Your FrameLayout is redundant as it only contains a LinearLayout, but more importantly it's set to 80dp height. This means that anything beyond 80dp will not be visible. Try setting it to wrap_content.

Problems with LinearLayout, views aren't resembling the preview in Graphical Layout on device

So I'm having a problem that is driving me crazy. Knowing the purpose of my app isn't important/relevant so I'll just paste my code from the xml file. The layout is a RelativeLayout, but the problem I'm having is inside of this LinearLayout.
Code:
<?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:orientation="vertical"
android:background="#drawable/background_orange"
android:id="#+id/rel_layout" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/component_1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:src="#drawable/source1"
/>
<ImageView
android:id="#+id/component_2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#id/component_1"
android:src="#drawable/source2"
android:layout_alignRight="#id/component_1"
android:layout_marginRight="-50dip"
android:layout_marginBottom="-25dip"
/>
</RelativeLayout>
<LinearLayout
android:id="#+id/problemIsHere"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal"
>
<EditText
android:id="#+id/edit_text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="What&apos;s your question?"
android:imeOptions="actionDone"
android:inputType="textCapSentences|textAutoComplete"
android:textSize="25sp"
android:layout_gravity="left"
android:textStyle="bold" />
<ImageButton
android:id="#+id/image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:layout_weight="0"
android:layout_gravity="right"
android:background="#drawable/source3"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/problemIsHere"
android:gravity="center"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/source4"
android:onClick="computeUserInput" />
<ImageButton
android:id="#+id/image_button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_view"
android:layout_alignTop="#id/image_view"
android:layout_marginLeft="-2dip"
android:background="#drawable/voice_recognition_touse"
/>
</RelativeLayout>
Again, this is nested inside of the parent, RelativeLayout. In the preview, when clicking on the "Graphical Layout" tab, this looks like exactly what I want; EditText to the left of a small ImageButton, with correct proportions and margins. However, when I run this on my device, the LinearLayout is REVERSED, meaning now that the EditText is to the RIGHT of the ImageButton. The proportions and margins are still accurate though. Does anyone know what is going wrong here?
Note: I've already cleaned and refreshed my project; this was ineffective. I've also tried removing the layout_gravity attributes, and that did nothing.
Thanks

Custom dialog height to match content

This is my custom dialog, there are some textboxs and two buttons.
I'm using a RelativeLayout on it.
I'd like the dialog size to match the content, not all that blank space under there.
I don't want to use explicit pixel heights (it's not good practice).
Another thing, there's a way to have some space between every view?
This is my XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_desc"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_place"
android:layout_toRightOf="#+id/view"
android:text="#string/btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txt_place"
android:layout_toLeftOf="#+id/view"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="#string/btn_edit" />
</RelativeLayout>

First question
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
Second question
Plus use android:marginTop="5dp" if you want to separate a View from Top for 5 dp.
marginLeft|Right|Bottom are also available.
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp" <-----------------
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
By the way, if I were you, I'd nest some layouts to make order. You can have a general Relative Layout, then 2 linear layouts: one horizontal for TextViews and one vertical for Buttons. You can definely play with your editor and try to make the best appearance for your dialog.
EDIT
Try this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000"
android:orientation="vertical"
android:paddingBottom="50dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="prova"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="btn_edit" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I've hard-coded the texts. The main idea is to use a big container layout in background, which is trasparent (background=#0000) and in top of that a layout in wrap_content containing your Views.
If this solution doesn't resolve your problem, I think you could edit height directly in your code. Try to relate to this question

Set your relative layout's height to wrap_content.
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- More XML -->
</RelativeLayout>
Also be aware that fill_parent is deprecated for widths and heights.
You can add either margin (extra space outside a view) or padding (extra space inside a view) with android:layout_margin or android:padding respectively. There are also variants such as layout_marginTop that only apply to a specific side of the view.

Android include layout

I have a layout 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" >
<include layout="#layout/basicinfo" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="profile" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item" />
</LinearLayout >
the problem is that it only shows the include part,no buttons showing up. if I remove the include layout, buttons will show up. any idea what I am doing wrong here? thanks.
update: the basicinfo layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/imageView1"
android:layout_toRightOf="#id/imageView"
android:orientation="vertical" >
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="Name:" />
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="Catogery:" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="Description" />
<TextView
android:id="#+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="Owner" />
</LinearLayout>
</RelativeLayout>

Define your include file layout_height and width for eample:
<include layout="#layout/basicinfo"
android:layout_width="100dp"
android:layout_height="100dp"/>

I fount out the problem. it was because I used match_parent in basic layout. I just changed that from
android:layout_width="match_parent"
android:layout_height="match_parent"
to
android:layout_width="wrap_content"
android:layout_height="wrap_content"
thanks for help.

I would check layout_width and layout_height. This is mostly the point in displaying errors.

included layout is as big as the screen dimension, so the buttons are outside view area. you need to give dimension to this include layout

Change the outer LinearLayout width and height to fill_parent and also place a scroll bar inside it.

One of the main issues with an include layout is that BOTH android:layout_width and android:layout_height must be included or the layout will simply fill the screen (if for instance only the height is set, it will be ignored without setting the width as well).
So something like this should be done:
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/myLayout" />

Use Merge...
use the element as the root view for the re-usable layout
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/add"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/delete"/>
</merge>
Developer Site

How do I achieve the following result using RelativeLayout?

Pictures: http://img838.imageshack.us/img838/1402/picse.png
How do I make the layout in Pic. 2 using RelativeLayout ONLY. Below is the xml layout of the first screenshot.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/timer_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="10dip"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:text="#string/timer_start" />
<ListView
android:id="#+id/questions_listview"
android:layout_below="#id/timer_textview"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<Button android:id="#+id/true_btn"
android:text="#string/true_option"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/false_btn"
android:text="#string/false_option"
android:layout_toRightOf="#id/true_btn"
android:layout_alignBaseline="#id/true_btn"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

You could use LinearLayout at bottom to achieve this. But you want to use RelativeLayout layout only so:
<RelativeLayout android:layout_width="fill_parent" ... >
...
<View android:id="#+id/helper"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<Button android:id="#+id/true_btn"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/helper"/>
<Button
android:id="#+id/false_btn"
android:layout_alignBaseline="#id/true_btn"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/helper" />
</RelativeLayout>
Can't you really use nested layouts?

If you change the buttons to
<Button android:id="#+id/true_btn"
android:text="#string/true_option"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/false_btn"
android:text="#string/false_option"
android:layout_toRightOf="#id/true_btn"
android:layout_alignBaseline="#id/true_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
you use at least the full width although the false_btn gets all remaining space.
To increase the width of the first true_btn you could set the minWidth attribute - either use a fixed value or get the screen width and make the minWidth the half of it