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.

android message box layout implementation

I was trying to implement a message box similar with that of Hangout. I want the edittext to expand if more content is typed into it, with the button to the right remain at the bottom right corner.
My current implement is as follows. The button to the right will move up if the edit text expands due to "alignParentTop". But if I set "alignParentBottom" as true, the entire screen will get occupied by this relative layout. Any idea how to fix it
<RelativeLayout android:id="#+id/structured_relative_interaction"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#E0E0E0">
<ImageButton android:id="#+id/structured_imagebutton_takePhoto"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:background="#drawable/save_structured_button"
android:src="#drawable/take_photo"/>
<EditText android:id="#+id/structured_edittext_answer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/structured_imagebutton_takePhoto"
android:layout_margin="5dp"
android:gravity="top"
android:maxLines="5"
android:padding="10dp"
android:hint="#string/structured_hint"
android:textColorHint="#B0B0B0"
android:inputType="textCapSentences|textMultiLine">
</EditText>
</RelativeLayout>

I was able to achieve it using the following layout (some ids for images and strings were changed to make it compileable):
<!--suppress AndroidLintUselessParent, AndroidLintContentDescription -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/structured_relative_interaction"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:background="#E0E0E0">
<EditText
android:id="#+id/structured_edittext_answer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/structured_imagebutton_takePhoto"
android:layout_margin="5dp"
android:gravity="bottom"
android:maxLines="5"
android:padding="10dp"
android:hint="hint"
android:textColorHint="#B0B0B0"
android:inputType="textCapSentences|textMultiLine" />
<ImageButton
android:id="#+id/structured_imagebutton_takePhoto"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/structured_edittext_answer"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
Will produce:
Seems it's common issue with ExitText and RelativeLayout (at least, I've seen some similar questions previously).

<EditText
android:id="#+id/write_post"
android:layout_width="match_parent"
android:layout_height="85dip"
android:ems="10"
android:gravity="top"
android:hint="#string/write_post"
android:inputType="textMultiLine"
android:textAppearance="?android:attr/textAppearanceSmall" >
</EditText>
set android:inputType to textMultiLine, android automatically expands edittext if the text exceeds from its boundry.

android child layout not showing

I have a LinearLayout with three RelativeLayout inside. The first two children layouts show. The third one does not show. When I change the children from RelativeLayout to LinearLayouts, the third one still does not show. Any ideas on how to fix this? The one not showing contains the ImageView.
Here is the code:
<?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="60dp"
android:clickable="true"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back1" >
<View
android:id="#+id/fract"
android:layout_width="60dp"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#00a5e5"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
<TextView
android:id="#+id/nume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="58 apple"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/denom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fract"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="46 orange"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/back2" >
<TextView
android:id="#+id/red_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:singleLine="true"
android:text="11 apple "
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/red_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/red_1"
android:layout_centerHorizontal="true"
android:layout_marginRight="5dp"
android:ellipsize="end"
android:singleLine="true"
android:text="13 oranges "
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#ffffff" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/guess" />
</RelativeLayout>
</LinearLayout>

Your second Relative Layout's height is
android:layout_height="match_parent"
try putting:
android:layout_height="wrap_content"
--edit - try adding a weight attribute.
</RelativeLayout>
<RelativeLayout
android:weight=1
>
</RelativeLayout>
<RelativeLayout
android:weight=1>
</RelativeLayout>

android:layout_centerInParent="true" remove this from the view, if you want to add a view you can add separately out of the RelativeLayout with this your Layout is already in the center of the parent, For debug purpose set the width of each view to certain level so that you can see. Your two RelativeLayout already took the width of the Linear Layout, so no space left for the third Layout.

I decide to do it programmatically. I get the width of the device using context.getResources().getDisplayMetrics().widthPixels. Then from there I layout my pieces pixels by pixels, so to speak.

Android edittext auto grow with text and pushing things down

Yes, this is yet another edittext grow question on SO. And yes I've already gone through all those edittext grow questions. But this ones a bit specific.
UI:
A simple android layout with edittext and button below it. When text is less, the edittext view is still covering whole screen leaving space for button below.
Once user starts entering text, edittext grows vertically to accommodate text. At the same time, the button should also kept pushing downwards to let edittext grow.
User can vertically scroll through screen to view full text.
UI after entering significant text:
Here's the layout with edittext and button below:
<?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:background="#color/background"
android:clipToPadding="false"
android:fadingEdge="none"
android:fillViewport="true"
android:padding="13dp"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- some fixed width image -->
<ImageView
android:id="#+id/someimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:src="#drawable/page_white_text" />
<EditText
android:id="#+id/some"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/someimage"
android:background="#null"
android:gravity="top"
android:minLines="10"
android:minHeight="50dp"
android:textColor="#222222"
android:textSize="15dp"
android:typeface="serif" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
This works more or less. But when I enter to much text, instead of pushing button downwards. It goes behind it like:
Any help here is much appreciated. Thanks :)

Here's my recommendation: inside the ScrollView, put a RelativeLayout in which you can place every element in a certain order using android:layout_below. For the auto-growing of your EditText, use this solution.
Let's see an example:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center">
<RelativeLayout
android:id="#+id/general2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20sp" >
<TextView
android:id="#+id/textFirstOpinion"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/titleFirstOpinion"
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#FFFFFF"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/fieldFirstOpinion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textFirstOpinion"
android:minHeight="80sp"
android:isScrollContainer="true"
android:inputType="textMultiLine"
android:textSize="20sp"
android:gravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_below="#id/fieldFirstOpinion"
android:layout_centerHorizontal="true"
android:layout_marginTop="37sp"
android:textSize="23sp"
android:text="#string/textSendButton"
android:gravity="center_horizontal"
android:padding="10dp" />
</RelativeLayout>
</ScrollView>

try adding android:layout_below="#id/some" in your LinearLayout like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_below="#id/some" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

Since you want the button to be at the bottom of the page, add the following line
android:layout_below="#+id/some"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
in your LinearLayout code here like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/some"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
Also make sure the layout:height parameter of EditText is set to wrap_content
Try this and tell me if it works or not

Android RelativeLayout make Edit Texts take all space

I have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/aussie_bg_big" >
<ImageView
android:id="#+id/titleImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#drawable/aussie_title_small" />
<ImageView
android:id="#+id/clearButtonOutput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/titleImage"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/OutputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/clearButtonOutput"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/translateButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/OutputText"
android:layout_centerHorizontal="true"
android:clickable="true"
android:contentDescription="#null"
android:src="#drawable/translatebuttonselector" />
<ImageView
android:id="#+id/ClearButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/translateButton"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/InputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/ClearButton"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:singleLine="false"
android:textColor="#ffffff" />
What I'd like to do is:
-> Keep the "imageBottom" imageview on the BOTTOM of the activity at all times, centered horizontally.
-> Keep the "imageCenter" imageview on the center of the activity at all times, centered horizontally.
-> Keep "imageBelowInputText" imageview below the InputText edittext which is located ABOVE imageCenter, aligned to the right.
-> Keep "imageBelowOutputText" imageview below the OutputText edittext which is located BETWEEN imageCenter and imageBottom, aligned to the right.
It works fine so far but I'd also like for the edittext views to occupy ALL of the remaining space EQUALLY. Providing different versions of the layout for small, normal, large, x-large screens worked fine, considering I hardcoded each edittext's size in dpi. However, on some layouts, it still looks a bit wrong and misplaced (misaligned). That's why I'm looking for a solution to place the ImageViews accordingly first, and then let the two EditTexts take all the remaining space EQUALLY (important).
So far, I couldn't think of a 100% correct solution. Can you help me out? Thanks!

Notice the two edittexts have their layout_height set to "0dp" and layout_weight set to "1"
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="15dp"
android:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Bear" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Speaking Aussie" />
</LinearLayout>

Try giving each of the EditText views a height of 0dp, and a layout_weight value of 1. Give it a shot and let me know if that works.