Develop Reference

The bottom view is getting blocked by the top view

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.

2 RelativeLayouts in one layout

I've decided to use 2 RelativeLayouts for my app, one Layout for one portion of child Views on the screen to the left, the other for child Views to go to the right.
The problem is I don't know how to lay them out in XML so that the middle white space isn't included when I inflate my Layout.
This is what I want.
When I use 1 RelativeLayout, the middle white space is filled with the RelativeLayout, and I can't touch anything behind it.
Thank you very much for reading.

Do something similar to the following example.
This will create a LinearLayout with 2 RelativeLayouts using layout_weight to space the RelativeLayouts and then you can populate the RelativeLayouts with whatever you want.
The Buttons are just place holders for the example.
<?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="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST2" />
</RelativeLayout>
</LinearLayout>

Android - how to add a simple footer?

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.

Android Layout - Weighting

I have spent hours trying to work this out, and spent a long time looking through other answers.
I'm evidently missing something simple, but really have been trying.
I cut my code down to the very basics to find the problem.
A layout has a backround, the top half of which is nice graphics, below the top half I am hoping to have the buttons.
The background is on the top, first linearlayout ( vertical ).
Then, inside this, are two vertical linear layouts.
The top vertical layout, has a weight of 1.
The bottom vertical layout, has a weight of 1.
This means to me, that the top layout should take up HALF of the screen. The buttons then going in the second layout should be ok to take up the rest of the screen.
However, when I start adding to the second layout, it no longer takes up half of the screen, but starts taking up space on the top half.
All I want to do, is to add four imagebuttons to the bottom half of the screen, centralised horizontally.
here is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/menubackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!-- Layout 1, the top half -->
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<!-- Layout 2, the bottom half, containing buttons -->
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:src="#drawable/playbtnimg" android:layout_weight="1"/>
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:src="#drawable/achievementsbtnimg" android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
Those two buttons, are now starting to take up around 2/3rd of the vertical space. They should not be going into the top half of the screen.
I'm trying to use layouts in this way so it will work on different screen sizes.
I would like the images to scale to fit within their linear layout cell, and not be cut off at the top of sides.
Any help is much appreciated.

Add a weightsum attribute to your root element ie the parent LinearLayout
here is what it would look like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/menubackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
same would be for the LinearLayout having buttons
This would help further you can read more in android documentation

Try adding this code where you are using ImageButtons as backgrounds.
android:adjustViewBounds="true"
Fixed a similar issue I was having.
Hope it works and happy coding.

On an Android app layout how would I position a view so that it always appears half the distance below the middle?

I'm using a Relative layout as the root or parent container and I have two buttons to place inside this Layout. The buttons need to be placed one on top of the other. The problem is that I want to position these buttons so that they appear below the center of the view but not directly below. That is within the bottom half of the view I want the buttons to appear halfway along that half portion. I tried adding a the buttons as children of a RelativeLayout (that was centered in the middle) inside the parent RelativeLayout and that sort of achieves what I'm trying to but then the Eclipse complains with a warning stating that one set of Relative Layout tags is useless and that I should consider getting rid of it.
Then I tried giving a one of the buttons a top margin with respect to its parent and then placing the other button under the this button with the top margin. This seems to work until I try it out in other virtual devices and I find out that depending on the screen sizes and dimensions it might or might not appear where I want it to (especially not the case with tablet devices).
Ok, so then I'm not sure how to achieve what I want the right way (without warnings or errors). Here's my current code
<?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="#drawable/default_real" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="300sp"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sm_panel_email_button"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>

How about using two layouts and the android:layout_weight attribute
<?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:background="#drawable/default_real"
android:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/ >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sm_panel_email_button"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>
</LinearLayout>