Android: EditText not filling ScrollView and RelativeLayout - android

I have been trying to wrap my editText with ScrollView to auto scroll it when the content is updated. I found the problem that the EditText wont cover the entire scroll view even with both width and height are set to fill_parent. Please enlighten me. Thank you.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="send"
/>
<EditText
android:id="#+id/msgBox"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/sendButton"
android:gravity="left"
android:longClickable="false"
/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/msgBox">
<EditText
android:id="#+id/chatBox"
android:editable="false"
android:gravity="left|top"
android:cursorVisible="false"
android:longClickable="false"
android:clickable="false"
android:autoLink="all"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</ScrollView>
</RelativeLayout>

Try adding android:fillViewport="true" to ScrollView properties. That should make it adjust its size every time something inside it changes. Also, use android:layout_height=wrap_content for EditText. It doesn't make sense to fill a parent that itself can re-size

Related

Android: How to set EditText and Button to same height?

I want to make the EditText and the OK button same height, but always got the EditText slightly shorter than the Button.
I googled and tried the following way without succeed, nothing changed:
set both the EditText and Button to same height in pixel
wrap EditText and Button into a RelativeLayout. Set the height of the RelativeLayout and set EditText and Button both to fillparent in height
set alignTop and alignBottom on the Button
The theme is: android:theme="#android:style/Theme.NoTitleBar.Fullscreen
Could someone please help me on this? Thanks!
Here is the xml:
<RelativeLayout android:id="#+id/login_layout_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#CEE6F0"
android:visibility="invisible">
<RelativeLayout android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText android:id="#+id/login_text_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:inputType="text"
android:textSize="5pt"
android:hint="#string/login_text_ipAddr" />
<Button android:id="#+id/login_btn_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#00ABDF"
android:textColor="#FFFFFF"
android:text="#string/login_btn_ipAddr"
android:onClick="updateIPaddr"/>
</RelativeLayout>
</RelativeLayout>
I have correct your code so try this one...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/login_layout_ipAddr"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#CEE6F0"
android:visibility="invisible">
<LinearLayout
android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal"
android:weightSum="2">
<EditText
android:id="#+id/login_text_ipAddr"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.8"
android:inputType="text"
android:textSize="5pt"/>
<Button
android:id="#+id/login_btn_ipAddr"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:background="#00ABDF"
android:textColor="#FFFFFF"/>
</LinearLayout>
you can put both the edit text and the button in a TableRow and control their space with weight, it would make this process easier
Set padding to the button.
<Button android:id="#+id/login_btn_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#00ABDF"
android:textColor="#FFFFFF"
android:text="#string/login_btn_ipAddr"
android:onClick="updateIPaddr"
android:paddingLeft="5dp"
android:paddingRight="5dp"/>
Try to use LinearLayout instead on RelativeLayout
<?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"
android:layout_centerInParent="true">
<LinearLayout
android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#CEE6F0"
android:weightSum="6" >
<EditText
android:id="#+id/login_text_ipAddr"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="5"
android:hint="#string/login_text_ipAddr"
android:inputType="text"
android:textSize="5pt" />
<Button
android:id="#+id/login_btn_ipAddr"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00ABDF"
android:onClick="updateIPaddr"
android:text="#string/login_btn_ipAddr"
android:textColor="#FFFFFF" />
</LinearLayout>
</LinearLayout>
Finally, I solved the problem by adding "android:background="#FFFFFF"" to the EditText element. But I've no idea what is the causes of such a behavior. I'd really appreciate if someone could shed some light on this.
No background:
With background:
Use following code :
<RelativeLayout android:id="#+id/login_layout_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#CEE6F0"
android:visibility="invisible">
<RelativeLayout android:id="#+id/login_layout_inner_ipAddr"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText android:id="#+id/login_text_ipAddr"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:inputType="text"
android:textSize="5pt"
android:drawableRight="#drawable/your_Button_image"
android:hint="#string/login_text_ipAddr" />
</RelativeLayout>
</RelativeLayout>
The default background of EditText has short padding. Buttons have these padding too! If you want to have an exact alignment, you can set your custom drawable background to each one. The most simple way is to set a solid color for the background.
To create a button with fixed height and width, you can give values in both px or in dp.
giving values in dp is more convenient , because android automatically scale the height and width in ldpi,mdpi and hdpi devices.
<Button
android:layout_width="100dp"
android:layout_height="50dp"
android:text="Click" />

How to make widget in the middle of layout stretch to fill the parent in Android

I have an Android layout question. I have a display where I am putting some text into the middle of a view that has a header at the top and three buttons at the bottom. What I am having trouble with is getting the TextView (which is inside a ScrollView) to stretch to fill up the available screen space. If I set the layout_height of the ScrollView to "fill_parent" the three buttons are pushed off the bottom of the screen. If I set it to "wrap_content" it is only as large as is needed to support the text that is put into the TextView.
Here is the XML for the layout I am using:
<?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="fill_parent"
android:orientation="vertical" >
<LinearLayout android:orientation="horizontal"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher">
</ImageView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
style="#android:style/TextAppearance.Large"
android:text="#string/meetingdetail" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
<Button android:id="#+id/navigation"
android:text="#string/naviation"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="#+id/mapsingle"
android:text="#string/mapsingle"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="#+id/goback"
android:text="#string/goback"
android:onClick="meetingInfoOnClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Could someone suggest what would work best to make the ScrollView with the TextView fill up the available space but still allow the three buttons to appear?
Set the height of the ScrollView to 0dp and its weight to 1.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
However if you don't plan to have more than one views scrollable you should remove the ScrollView and use:
android:scrollbars="vertical"
attribute on your TextView since the TextView is scrollable itself.
Just replace your ScrollView tag code to..
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView android:id="#+id/meeting"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#android:style/TextAppearance.Medium" />
</ScrollView>
It will work fine, if still you have any problem then tell me. if works then accept as answer.

Place a fixed height button at the bottom of the screen always

I wish to keep a button at the bottom of my Activity screen. It has to be fixed irrespective of the size of scrollview above it. The problem is that once the textviews of the scrollview take up some place, the height of my button keeps decreasing and it eventually gets pushed out of the activity screen. This is the layout I am using.
<?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">
<TextView android:id="#+id/tvBanner" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:gravity="center"
android:text="Practice Exam" />
<ScrollView android:id="#+id/Scroll" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/LinearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="#+id/tvDesc" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="10dp"
android:gravity="center" android:paddingTop="40dp" android:text="#string/welcom"
android:textSize="20sp" />
<TextView android:id="#+id/tvURL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="30dp"
android:paddingTop="10dp" android:layout_gravity="center"
android:text="hello" android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom">
<Button android:id="#+id/btBottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="Enter" />
</RelativeLayout>
</LinearLayout>
I have also tried using android:weight=1 and android:layout_height=0dp in the Scrollview. But this removes the entire Scrollview portion from my activity and I can't see anything.
I do know that there are many similar questions asked about this and believe me, I have tried many of these. However, none of the tricks have worked for me. I have spent almost half a day fixing this. Kindly help.
For a case like this always use RelativeLayouts. A LinearLayout is not intended for such a usage.
Try this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter"
android:layout_alignParentBottom="true"/>
<ScrollView
...
android:layout_above="#id/btnGetMoreResults"/>
</RelativeLayour>
You should try using RealativeLayout instead of Linear, and then you could use
android:layout_above="#+id/btBottom"
android:layout_alignParentBottom="true"
That should solve your problem.
looks like you need 'alignParentBottom' in your button like this
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Enter" />
Do not wrap Button to RelativeLayout
Set layout_height of ScrollView to 0dp
Add layout_weight of ScrollView to 1
For this it would probably be a good idea if you used RelativeLayout for the outer wrapper layout. Then you could just set the layout with the button inside to LinearLayout and set layout_alignParentButtom="true" while you set your #+id/Scroll to layout_alignParentTop="true"
Also, you should probably set the layout with the button insideĀ“s height to wrap_content instead of fill_parent
Why do you use a LinearLayout at top level at all ?
Choose a RelativeLayout with fill/fill and the following three childern (no further nesting !):
1) TextView with android:layout_alignParentTop="true" and android:layout_centerHorizontal="true"
2) Button with android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
3) ScrollView with android:layout_below=#id/textview_id and android:layout_above="#id/button_id"
I didn't test it though, but give it a try.

Android: Why does my view fill the entire screen and not display the buttons at bottom

How do I stop my view from filling the entire screen and not showing my buttons at the bottom of the screen?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.vig.comix.ImageZoomView
android:id="#+id/zoomview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentTop="true" />
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/zoomview" android:layout_alignParentBottom="true">
<ImageButton android:id="#+id/btnPrev"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#android:drawable/ic_media_rew"
android:background="#null"
android:layout_weight="1"
android:width="0px" />
<ImageButton android:id="#+id/btnNext"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#android:drawable/ic_media_ff"
android:background="#null"
android:layout_weight="1"
android:width="0px" />
<ImageButton android:id="#+id/btnMove"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#android:drawable/btn_star"
android:background="#null"
android:layout_weight="1"
android:width="0px" />
<ImageButton android:id="#+id/btnDelete"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#android:drawable/ic_menu_delete"
android:background="#null"
android:layout_weight="1"
android:width="0px" />
</LinearLayout>
</RelativeLayout>
When I change my code and put the buttons at the top, it works fine. I have tried relative layouts, linear layouts, lauout weights, ...
What am I doing wrong?
RelativeLayout can be tricky to work with. I try to stick with FrameLayout and LinearLayout. Here is a sketch of the layout I would use in your case:
<LinearLayout orientation="vertical">
<ImageZoomView layout_weight="1" layout_height="wrap_content">
<LinearLayout orientation="horizontal" layout_height="wrap_content">
... buttons ...
</LinearLayout>
</LinearLayout>
Heights and widths are fill_parent when not mentioned. The layout_weight attribute on the ImageZoomView will cause it to expand as far as it can without squishing your bottom buttons.
Instead of putting android:layout_below in your LinearLayout. Try removing that and put
android:layout_above="#+id/myLinearLayout"
inside your ImageZoomView. Of course giving your LinearLayout the same id.
Perhaps the layout_weight is causing issues? Also it doesn't seem like you're give the items an object to be positioned relative to?
Change this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
to this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

Nesting Relative layout inside Linear Layout

I have the following code in my layout.xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent">
<EditText android:hint="#string/feed_url"
android:id="#+id/feedUrl" android:textSize="14dp" android:inputType="textUri"
android:layout_marginRight="45dp" android:layout_height="wrap_content" android:layout_width="fill_parent">
</EditText>
<Button android:id="#+id/getGraph"
android:text="#string/get"
android:layout_toRightOf="#id/feedUrl"
android:layout_alignParentRight="true"
android:layout_height="wrap_content" android:width="45dp" android:layout_width="wrap_content">
</Button>
</RelativeLayout>
<WebView android:id="#+id/wv1" android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</LinearLayout>
In the eclipse Plugin layout creator, the EditText and button are shown properly. (see the below screenshot)
But on the device and emulator, the button is not hidden. (see the below screenshot)
Any idea why the button is getting hidden in the device?
Try the following changes to your code. You have to define the button first, since it is of fixed width, and then place the EditText to fill the rest of the space, placed to the left of the button. The button also has to be defined first (prior to Android 2.2, that is).
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<Button
android:id="#+id/getGraph"
android:text="#string/get"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<EditText
android:hint="#string/feed_url"
android:id="#+id/feedUrl"
android:textSize="14dp"
android:inputType="textUri"
android:layout_marginRight="45dp"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/getGraph"
/>
</RelativeLayout>
I cannot see the button in the layout builder... the reason, I think is that the EditText width is fill parent so it fills parent pushing the button out. If you must use RelativeLayout, you need to define width of the EditText explicitly. Otherwise you may want to switch to horizontal LinearLayout and set weight of the edit box to "1".
Also, there are invalid options for RelativeLayout:
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal
You can also use LinearLayout instead of RelativeLayout to archive this. You can use android:layout_weight to make Button not be overlaid by EditText. Following is the sample xml that may work:
<LinearLayout android:orientation="horizontal"
android:layout_height="wrap_content" android:layout_width="fill_parent">
<EditText android:hint="#string/feed_url"
android:id="#+id/feedUrl" android:textSize="14dp"
android:inputType="textUri" android:layout_marginRight="45dp"
android:layout_height="wrap_content" android:layout_width="fill_parent" />
<Button android:id="#+id/getGraph" android:text="#string/get"
android:layout_height="wrap_content" android:width="45dp"
android:layout_width="wrap_content"
android:layout_weight="1" />
</LinearLayout>

Categories

Resources