I have a really annoying problem with fitting two custom views to work together. I'm trying to display these two views in an android activity, but one of them takes the whole viewable space of the activity and the other is placed under it. The first view only uses a small part of the space and the rest is trasparent, but it only works when its width and height is at match_parent so the other view is displayed under it, but it is being blocked from receiving any touch events. here is how they looks like:
the xml code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_app" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.fortysevendeg.android.swipelistview.SwipeListView
xmlns:swipe="http://schemas.android.com/apk/res-auto"
android:id="#+id/example_lv_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#00000000"
swipe:swipeActionLeft="dismiss"
swipe:swipeBackView="#+id/back"
swipe:swipeCloseAllItemsWhenMoveList="true"
swipe:swipeFrontView="#+id/front"
swipe:swipeMode="both"
android:focusableInTouchMode="true"/>
</LinearLayout>
<com.touchmenotapps.widget.radialmenu.semicircularmenu.SemiCircularRadialMenu
android:id="#+id/radial_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:padding="1dip" />
</FrameLayout>
What I'm trying to do is to be able to touch the bottom where the top view is transparent, and be able to touch the top view where it's not transparent. I tried arranging the xml in a different way but it keeps crashing, this is the only way it worked, but this problem appeared.
Links to the custom Views:
Radial-Menu-Widget: github.com/strider2023/Radial-Menu-Widget-Android
SwipeListView library: github.com/47deg/android-swipelistview
SwipeListView sample: github.com/47deg/android-swipelistview-sample
What I'm trying to accomplish here is something similar to Catch Notes app. If there are other ways, or other libraries you can suggest, it would be much appreciated.
Ok try this: copy the source code of SemiCircularRadialMenu.class in your project and modify
public boolean onTouchEvent(MotionEvent event)
Because this method always returns true and captures all touch events, so also the touch event for SwipeListView listener. I solved it in this way.
An old question, but others may find this answer helpful. Without modifying the source of your custom views, I don't think you can get the behavior you want. But getting the two custom views to work onto the same screen might be as simple as changing your root layout to a LinearLayout, adding weight to the inner layout, and setting the height of the second custom view to wrap_content. By having only one widget with a weight, it will get all the space left after the others are laid out. Here's your layout with the changes applied:
<?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/background_app"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="100" >
<com.fortysevendeg.android.swipelistview.SwipeListView
xmlns:swipe="http://schemas.android.com/apk/res-auto"
android:id="#+id/example_lv_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusableInTouchMode="true"
android:listSelector="#00000000"
swipe:swipeActionLeft="dismiss"
swipe:swipeBackView="#+id/back"
swipe:swipeCloseAllItemsWhenMoveList="true"
swipe:swipeFrontView="#+id/front"
swipe:swipeMode="both" />
</LinearLayout>
<com.touchmenotapps.widget.radialmenu.semicircularmenu.SemiCircularRadialMenu
android:id="#+id/radial_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="1dip" />
</LinearLayout>
If you need to height of the second view to be more expandable, you can wrap it in another LinearLayout with a weight and adjust the two weights to apportion the screen height between them. The individual weight values aren't special; it's their value relative to the sum of all the weights that determines how much height each one gets. I like to make my total values add up to 100 so I can think of the weights as percentages.
Related
I have this layout:
All views fill the entire space horizontally, and they're inside a LinearLayout oriented vertically. The blue parts have a fixed height (they have the wrap_content property).
The red part is a ListView. How can I make it fill that center space if there are not enough elements in the list and at the same time preventing it to push the last two elements down if it has more elements?
So far it doesn't push down the two views under it (with the layout_weight="1" property), but if it doesn't have enough elements, it shrinks and makes those two elements go up, leaving an ugly white space under them.
This is what happens:
This is what I expect:
Notice that even though the ListView is smaller, the two last views don't go up.
So far I've tried:
Giving all views a weight (ugly display but sort of works).
Giving each view a size (different results on different devices).
Giving the last view the android:gravity="bottom" property, but the view still goes up.
What may work
I've been messing around and I think a RelativeLayout may work, with a property like layout_alignBottom that instead of aligning to the end of the given view, it aligned to the start of it.
SOLUTION
The solution was to use a RelativeLayout and set the list's layout_above and layout_below properties to that of the elements I want to align it to.
<LinearLayout 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:orientation="vertical"
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.stackoverflow.app.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="48dp"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="48dp"
android:text="#string/hello_world" />
</LinearLayout>
Here's a couple of options that may work for you. Let me know how it goes.
Option 1:
Set the containing vertical orientated linear layout to fill_parent / match_parent (they are the same). Then set the gravity or layout gravity of the bottom 2 views to bottom.
Option 2:
Contain the list view in a linear layout with a fixed height. Set the list view to wrap_content.
EDIT
You could use relative layouts for this, this link here seems to do what you need
http://www.javacodegeeks.com/2013/10/android-fixed-header-and-footer-with-scrollable-content-layout-example.html
How about wrapping your list view inside the a layout and give the layout the fixed height.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="300dp" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
I have a ScrollView on one of my screens. I want the right edge to have a shadow. I decided the easiest way to do this was to make the child of the ScrollView a RelativeLayout, and have two children of the RelativeLayout -- one being a LinearLayout that will house the layout of the screen, and the second View being the shadow.
Like so...
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/shadow"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</ScrollView>
Unfortunately, this doesn't quite work. The ImageView is forcing its dimensions to be the size of the image file. It will not stretch vertically to be the height of the RelativeLayout. I've also tried "match_parent" to no avail. The image is a 9-patch.
Ideas?
Applying drawable content as the source of an ImageView somewhat carries with it an inherent requirement that you want the view to do what it can to accomodate the content without modifying the content itself very much. Typically, this is the behavior you would want out of an ImageView.
What you really want is the behavior you get by setting drawable content as the background of a view, for which you don't really need ImageView at all. A background is designed to simply stretch, fill, etc. to whatever size the view is. Also, since you are using RelativeLayout you can tell the view to match the bound of the view you are shadowing by adding an id and some extra layout_alignparameters.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/content_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<View
android:layout_width="11dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/content_layout"
android:layout_alignBottom="#id/content_layout"
android:background="#drawable/shadow"
/>
</RelativeLayout>
try this
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:layout_alignParentRight="true"
/>
here is what I get
and code id
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY" />
</RelativeLayout>
</ScrollView>
Your problem has nothing to do with the ImageView or 9-patch itself, but rather with the fact that you're wrapping everything in a ScrollView. A ScrollView will automatically force its children direct child to wrap its content, no matter whether you tell it to FILL_PARENT or MATCH_PARENT - both do exactly the same thing by the way; the only difference is the name, which reflects better the actual behaviour of the flag.
Fortunately ScrollView provides a way to force it to fill the viewport with a flag, which will make the behaviour pretty similar to setting FILL_PARENT to a regular view. Either add the attribute android:fillViewport or use setFillViewport() from code.
Edit: Just to be clear, you need to set that flag on the ScrollView. Also, if it's the ScrollView that should have the shadow, can you not send your 9-patch as background to it? I suppose it does depend on what your actual image looks like. Regarding you comment: yes, the RelativeLayout is flexible in terms of positioning and sizing children, but any child will still be bound to the size of its parent.
I do have the feeling that some of us may be working towards something different than what you have in mind. It would definitely help to clarify things with a simple drawing.
You wanted a Shadow towards the right of your image, Then use single layout with Horizontal Orientation, It's good that you have decide to use Relative Layout. Use
android:orientation="vertical"
inside this layout, add those two images. If you still have a doubt, give me those two images or sample images, i will give you the code
I keep browsing different posts and they all have the footer try to stay on the screen.
But I want the footer to appear on every page. Some of my pages do not have a scroll, but some do. Whenever there is a scroll, I would like the footer to appear below the scroll. How can that be done?
For example, if I have this page:
<?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"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/page_exlain"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Some text that either extends far down or is pretty short."
android:layout_marginTop ="20dp"
/>
</LinearLayout>
</ScrollView>
</LinearLayout>
What is a good way to add a footer to this that does not necessarily appear above the fold?
Thanks!
My way of doing this is by having two linear layouts inside the parent layout. The first one is what I call the content area and will have a weight of 1, meaning it will try to take as much space it can from the parent view. The footer layout on the other hand will have no weight and will therefor remain with a height matching the content inside even if the other view (the content area) is empty.
You can add a scrollview or any other type of layout inside the content part of this layout without breaking the disposition of the two elements and without needing to worry about the position of the footer since it will always be at the bottom of the screen.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</LinearLayout>
With a little content added to the prior code, you end with something like this, note that it's extremely simplified. You'll have no issues modifying it to your needs as long as you understand the weight property in place.
You just need to treat the "content" LinearLayout as if it was the parent one, inserting scrollviews or whatever your needing and forgetting about the footer. Note that if the footer is recursive, meaning you are going to be using it multiple times, you could load it in the xml directly without copying it in to all your layouts
<include layout="#layout/footer" />
Where #layout/footer is an xml file in your layouts folder with the content of the footer that you want to reuse. This is virtually the same as adding it manually but with the convenience of not having to maintain it across several files.
Hope I was of help.
I just know this is simple and in about 30 minutes time, I'll hate myself...
I have a splashscreen which consists of a static image which fills the screen. So I simply set the background attribute of whatever root view I use in my layout.
The image has a blank area over which I need to place an "I accept" button. To deal with different resolutions, I must position it using a percentage of the display height - 58% is the spot.
I can't use layout_weight because that sizes the button and absolutelayout (setting the y position in code) is deprecated.
How can I achieve this? I don't care what viewgroup is the parent and I'm fine with having "blank" views filling up space.
I am aiming to do this entirely in layout XML to keep my code clean...
Thanks!
You say you can't use layout_weight, but that's your only option if you want to do it purely in XML. I don't understand why you think you can't use it anyway. Here's an example of how you might do it:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/splash"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="58" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="42" >
<!-- Place buttons here -->
</LinearLayout>
</LinearLayout>
I don't see any other way that to use a layout_weight... Also the whole class AbsoluteLayout is deprecated, so try to avoid using it. I suggest to use an LinearLayout as your rootView with a given weight_sum of 1. add another Space-filling LinearLayout width a weight of 0.58 and below your Button with wrap_content attributes. Unfortunately I cannot tell you more unless you post your xml, so that I can see, what you try to achieve.
Kind of this should work:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/your_desired_background"
android:orientation="vertical"
android:weight_sum="1">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".58" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
So I'm trying to create a screen which has a ListView and over that I need to be able to float another custom horizontal ListView, right at the bottom edge of the screen. When the user scrolls on the vertical listview, the horizontal one would go invisible and reappear when the scrolling stops. I figured FrameLayout would be my best bet for overlapping views. But I can't seem to make this work. The Horizontal listview seems to occupy the whole screen space. Any ideas? Is this even the right approach? I wish to have something similar to a fixed div in HTML.
Here's my XML:
UPDATE-1: Used RelativeLayout as suggested, but still a no-go. The HorizontalListView still seems to be occupying the whole screen. I'm using the HorizintalListView from here
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:id="#+id/messages"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dip" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<test.ui.app.HorizontalListView
android:id="#+id/folders"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF" />
</RelativeLayout>
</RelativeLayout>
I got it to work by setting the height of the inner Relative Layout myself instead of using 'wrap_content'.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:id="#+id/messages"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="80dip"
android:layout_alignParentBottom="true" >
<test.ui.app.HorizontalListView
android:id="#+id/folders"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF" />
</RelativeLayout>
</RelativeLayout>
You cannot adjust the views inaide FrameLayout.So it will be better for you to go for RelativeLayout.
Or you can put your listviews inside RelativeLayout or linearlayout and then you can adjust.
Hope this will help you. :)
Like the other answerer said, you could use a RelativeLayout:
set android:layout_alignParentLeft|Right|Top|Bottom="true" for the vertical list view
set android:layout_alignParentLeft|Right|Bottom="true" for the horizontal list view (and height to "wrap_content" or fixed size)
Or if you reeeeaaaally want to stick with FrameLayout (maybe for performance reasons...), you could somply add a huge android:layout_marginTop to the horizontal list view. But this solution is uglier, since you need to set exact values. For example if the whole screen is 320dp height, and you want the horizontal list view to be 80dp height, you need to set the top margin to 240dp. However if you run this on a screen with different aspect ratio, the horizontal list view will be ugly.