EDIT
I originally thought this issue was related to the search widget and keyboard.
Original Question
I added the search widget to my app recently. Now when I land on MainActivity, the view is cut right where the keyboard would pop up. The content scrolls within that smaller box. When I hit the search widget in the action bar, the keyboard pops up and fills the blank space. When I collapse the keyboard, my view is complete and there is no blank space. Check this photo to see what I mean.
Here are my layouts
activity_main.xml
<?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" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null" />
</LinearLayout>
feed_item.xml (inflates listview)
<?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:background="#color/feed_bg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="#dimen/feed_item_margin"
android:layout_marginRight="#dimen/feed_item_margin"
android:layout_marginTop="#dimen/feed_item_margin"
android:background="#drawable/bg_parent_rounded_corner"
android:orientation="vertical"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingTop="#dimen/feed_item_padding_top_bottom" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/vendorPic"
android:layout_width="#dimen/feed_item_vendor_pic_width"
android:layout_height="#dimen/feed_item_vendor_pic_height"
android:scaleType="fitCenter" >
</com.android.volley.toolbox.NetworkImageView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/feed_item_profile_info_padd" >
<TextView
android:id="#+id/timestamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/timestamp"
android:textSize="#dimen/feed_item_timestamp" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/txtHeadlineMsg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="#dimen/feed_item_status_pad_left_right"
android:paddingRight="#dimen/feed_item_status_pad_left_right"
android:paddingTop="#dimen/feed_item_status_pad_top" />
<com.example.myapp.FeedImageView
android:id="#+id/feedImage1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:scaleType="fitXY"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
Here's my searchable config xml.
<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
android:label="#string/app_name"
android:hint="#string/search_hint" >
</searchable>
Let me know if you need more to go on, thanks!!
P.S. min sdk is 12.
UPDATE
The problem ended up being that the content didn't really fill the whole screen until the images were loaded from the Volley request. The text content was loaded and set the height of the listview, and subsequently loaded content did not dynamically change the listiview height. In production this won't be a problem probably, but is there a way to make sure that the ListView height can change dynamically?
It sounds like the keyboard is trying to expand when you open the activity. It is strange that it stays blank and doesn't show the actual keyboard, but maybe preventing the keyboard from opening in the beginning will help. Try setting
android:windowSoftInputMode="stateHidden"
in your <activity> tag for this Activity in AndroidManfest.xml.
try this in the manifest.
android:windowSoftInputMode="adjustResize"
and to your list view("id"),try adding
android:alignParentBottom:"true"
This ended up having nothing to do with the search widget or keyboard. the sizing was coincidental.
The problem lies in the fact that each item in the ListView had an image that was being loaded from the API via volley. the height of the ListView was being set by the content that was loaded first (i.e. text). Once the image loaded, it expanded each item in the list, but did not change the height of the parent ListView. This left the ugly gap at the bottom of the view.
On advice from #mattgmg1990, I changed the height of the ListView to match_parent in order to allow for late loading images.
Related
I've got a layout that looks like first image and when I open the softkeyboard looks like the second image, but I want it how it seems on third image:
I read a lot about adjustpan and adjustresize on the manifest but nothing works, the xml structure is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blanco"
android:gravity="top"
android:orientation="vertical"
android:weightSum="10" >
<!-- LOGO -->
<LinearLayout
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3.7"
android:background="#color/green_logo"
android:orientation="vertical"
android:gravity="center"
android:paddingTop="65dp" >
<ImageView
android:id="#+id/logo_registro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/logo_registro" />
</LinearLayout>
<FrameLayout
android:id="#+id/contentFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6.3" >
</FrameLayout>
</LinearLayout>
First part is the green part with the app logo and inside the FrameLayout I put Fragments that contains simple LinearLayouts or RelativeLayouts with parts of my Login forms.
Put this on your Manifest, inside the activity
<activity android:name=".YourActivity"
android:configChanges="keyboard|keyboardHidden"></activity>
Set your windowSoftInputMode in your manifest for this activity to be adjustResize. THere are 3 possible settings for this- nothing, resize (shrinks your app to fit the remaining space), and pan (scrolls your app so the focused field remains on screen).
Just Add the empty scrollview and it will work
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
</ScrollView>
I am interested in creating a screen composed of a transparent header and a listview that scrolls behind the header. I have this working with one flaw; the FAST scroll bar also draws underneath header.
For some reason, the fastscrollbar doesn't seem to respect the scrollbarStyle applied to the list view. You'll notice in the image below that the normal scroll bar works fine, but the powerscroll bar is behind the transparent header.
Unfortunately the listviews I am using will often have hundreds of items, so the fastscrollbar is a necessity. Is there some way to set the "fastscrollStyle" that is not documented? I am open to any suggestions! Thank you.
Here is the layout XML for reference:
<?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">
<ListView
android:id="#+id/myListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipToPadding="false"
android:fastScrollEnabled="true"
android:scrollbars="vertical"
android:scrollbarStyle="insideOverlay"
android:paddingTop="50dp"/>
<TextView android:text="My Header"
android:gravity="center"
android:background="#8fff0000"
android:layout_width="fill_parent"
android:layout_height="50dp"/>
</RelativeLayout>
This was fixed in KitKat for ListView, however GridView still appears to exhibit this problem. Google?
The best solution is to separate your listview from the other layouts, where the main relativelayout view is the parent and other layouts are the children.
EX.
<?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">
<RelativeLayout
android:id"#+id/layoutHeader"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true">
<TextView android:text="My Header"
android:gravity="center"
android:background="#8fff0000"
android:layout_width="fill_parent"
android:layout_height="50dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="+id/layoutHeader">
<ListView
android:id="#+id/myListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipToPadding="false"
android:fastScrollEnabled="true"
android:scrollbars="vertical"
android:scrollbarStyle="insideOverlay"
android:paddingTop="50dp"/>
</RelativeLayout>
</RelativeLayout>
This bug appears to be fixed in 4.4. In older versions however, there appears to be no known workaround other than leaving padding at 0.
My Android app's main activity looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:orientation="vertical"
android:paddingLeft="60dp"
android:paddingTop="53dp" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/billAmountText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/billAmount_string"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/billAmount"
android:layout_width="173dp"
android:layout_height="wrap_content"
android:layout_below="#id/billAmountText"
android:layout_marginTop="3dp"
android:inputType="numberDecimal" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
In order to make sure the background image (defined in the first RelativeLayout) does not get squeezed when the keyboard pops up, I have set android:windowSoftInputMode="stateVisible|adjustPan in the manifest file for my activity. All good with the background and layout now, nothing gets resized.
But the problem is that my ScrollView doesn't work now because I suppose the system thinks the window doesn't need resizing due to my above modification to the manifest - so the ScrollView is not activated. The opposite happens when I take android:windowSoftInputMode="stateVisible|adjustPan out, the scrolling works, but the background gets squeezed when the keyboard pops out.
Is there any way to code it so that my background doesn't get squeezed, and my ScrollView still works? Thanks!
Try to use in your activity the property windowSoftInputMode with the following values:
android:windowSoftInputMode="stateAlwaysHidden|adjustResize"
I don't know if it's necessary but you can try to add to your layout's ScrollView tag the fillViewPort to true.
So it should look like something I show you below:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<!-- Other Views -->
</ScrollView>
Let me know about your progress.
In your scrollview put a relative layout, child 0 is an imageview, and child 1 is your content. Use the imageview for your background image (src) rather than the background of the scrollview. The imageview will respect scaleTypes, whereas the background of a layout will not.
I must make a layout with 2 overlapping ScrollViews. One is an article with a "see comments" button. The other view is transparent and contains the comments, and is shown on top of the article when the "see comments" button is clicked. The problem is that when the comments are shown and do not fill the screen, touching the screen out of the screen (eg. below the button "Retour" on the image shown below. This is an iphone screenshot, the design on android is different) scrolls the article.
Also, the "Voir les Commentaires" button can be clicked, even with another layout on top of it.
Why is the view below not disabled (button, scroll...) when there's another one on top of it? How can it be done?
Anybody can help?
<?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"
android:background="#FFFFFF">
<RelativeLayout android:id="#+id/header"
android:layout_width="fill_parent" android:layout_height="49dp"
android:background="#e7e7e8">
<!-- header -->
</RelativeLayout>
<ScrollView android:id="#+id/article_scroll"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_below="#id/header">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<!-- article -->
</LinearLayout>
</ScrollView>
<LinearLayout android:layout_width="fill_parent"
android:layout_below="#id/header" android:layout_height="fill_parent"
android:orientation="vertical" android:background="#50000000" android:visibility="gone">
<ScrollView android:id="#+id/comment_scroll"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<!-- comments -->
</ScrollView>
</LinearLayout>
</RelativeLayout>
You should definitely use a new Activity for your comment and use Transucent theme:
<activity android:theme="#android:style/Theme.Translucent">
http://developer.android.com/guide/topics/ui/themes.html
Some alternatives Themes should fit your needs (Dialog for instance)
or a blurried background: http://www.stealthcopter.com/blog/2010/01/android-blurring-and-dimming-background-windows-from-dialogs/
As for the button "Voir les Commentaires", you could set it to enabled = false when the second layer is visible. And I'm not quite sure atm, but I think you can do the same for the bottom ScrollView.
I have listview that contain checkbox and an image when the checkbox is clikced I show a button at bottom of the screen that perform deletion, but when listview height more ,then the listview some portion move under the button ,so I need an alternative option for delete can anyone help me, I except something like menu?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:layout_centerHorizontal="true"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:id="#+id/DelPhto"
android:text="Delete" android:layout_alignParentBottom="true" />
<ListView
android:layout_width="280dp"
android:layout_height="fill_parent"
android:id="#+id/list_pictures"
android:layout_alignParentTop="true"
android:layout_above="#+id/DelPhto" />
</RelativeLayout>
Do you mean you wish for the delete button to be always visible even when the list contents are larger than the list control?
If that's the case try setting the layout_weight of your ListView to 1 and see if that solves your problem.
Put ListView in ScrollView (so one will be able to scroll entire list), like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainView"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/listView"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:choiceMode="singleChoice"
android:headerDividersEnabled="true">
</ListView>
</ScrollView>
</LinearLayout>
I have had a similar issue in the past. I found that using a relative layout and defining the button before the list solved my issues. Lets consider the following.
<?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"
>
<Button
android:id="#+id/someButtonId"
android:background="#drawable/gray_button"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:text="#string/some_button_value"
android:textColor="#color/button_text"
/>
<ListView
android:id="#+id/someList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/someButtonId"
/>
</RelativeLayout>
Here I have defined a Relative layout, the layout will occupy the full screen's width and height. I then place the button on the bottom of the RelativeLayout. My expectation is that the list will be placed above the defined button, and fill the remainder of the screen with list contents. Because we are telling the list View to be placed above the button, it will never grow large enough to cover the button causing the list view to mask the button clicks from the user.
hope this helps.