Overlay an element of view - android

I have this layout for a fragment:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="#layout/header" />
</FrameLayout>
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
</ListView>
</LinearLayout>
</FrameLayout>
and this is header:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone" />
</LinearLayout >
Now when button is pressed, "box" should be populated and become visible, and box overlay the rest of views (in my case listview). Now when i press button ox does not overlay listview, but take a portion of screen (and listview moves down).
How can i do? thanks


Just use a RelativeLayout instead of LinearLayout, and put the FrameLayout after the ListView in xml ( to place the header over the list):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
</ListView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="#layout/header" />
</FrameLayout>
</RelativeLayout>

Related

android: fix blank scrollview layout?

My goal is to show a toolbar at the top of the view, then a TextView, then a ScrollView section and then a footer that always shows at the bottom of the view. The below only shows the toolbar and the TextView header. Nothing is showing for the ScrollView section or for the footer at the bottom. What am I missing here?
EditActivity.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:focusableInTouchMode="true"
tools:context=".EditActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" >
</include>
<RelativeLayout android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_below="#+id/toolbar" >
<TextView
android:id="#+id/create_skycard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#color/colorFlLabelFinal"
android:textAppearance="?android:attr/textAppearanceLarge"
android:clickable="false" />
</RelativeLayout>
<RelativeLayout android:id="#+id/myFooter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ViewFlipper
android:id="#+id/viewFlipper1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp" >
<include layout="#layout/cardview_nobuttons"
android:id="#+id/cardviewNobuttons" />
<include layout="#layout/cardview_previewbuttons"
android:id="#+id/cardviewPreviewbuttons" />
</ViewFlipper>
</RelativeLayout>
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header"
android:layout_above="#+id/myFooter"
android:fillViewport="true" >
<LinearLayout
android:id="#+id/LinearLayout1"
style="#style/scrollbar_shape_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<com.wimso.v108.widget.EditText
... />
</LinearLayout>
</ScrollView>
</RelativeLayout>

First of all, you should limit height of footer view. I set the ViewFlipper's height to 128dp for test, so you can calculate your own based on its content.
Second: You should set android:layout_alignParentTop="true" for the include which its id is toolbar. To do this you should set height and weight for it as I did.
Third: The height of the ScrollView should be wrap_content instead of match_parent to be sure it stretches between header and footer views.
Here is your layout source code after applying the above corrections:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#FFFFFF"
android:focusableInTouchMode="true"
tools:context=".EditActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:gravity="center_horizontal">
<TextView
android:id="#+id/create_skycard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/colorFlLabelFinal"
android:textStyle="bold" />
</RelativeLayout>
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/myFooter"
android:layout_below="#+id/header"
android:fillViewport="true">
<LinearLayout
android:id="#+id/LinearLayout1"
style="#style/scrollbar_shape_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.wimso.v108.widget.EditText
... />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/myFooter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ViewFlipper
android:id="#+id/viewFlipper1"
android:layout_width="match_parent"
android:layout_height="128dp"
android:layout_marginBottom="5dp">
<include
android:id="#+id/cardviewNobuttons"
layout="#layout/cardview_nobuttons" />
<include
android:id="#+id/cardviewPreviewbuttons"
layout="#layout/cardview_previewbuttons" />
</ViewFlipper>
</RelativeLayout>
</RelativeLayout>

android: design an activity with an scrollable part

my activity contains 4 section as follow:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></LinearLayout>
<ScrollView>
<LinearLayout></LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"></LinearLayout>
</RelativeLayout>
what is the correct layout properties for scrollview?

Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"></LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!-- put your scrolling stuff here it needs
to exceed the height of the view to scroll -->
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"></LinearLayout>
</LinearLayout>

I believe this should work..
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- your layouts.. -->
<!-- layouts in here will be in the scrollview -->
</LinearLayout>
</ScrollView>
</LinearLayout>

Add a linear layout to the view after a ExpandableListView without being covered by the ExpandableListView when populated?

What happens is when I populate my list view the linear layout below the ExpandableListView will disappear. I want the "#+id/bottomActionBarAppointments" layout to be visible always on the screen. I do not want to set a static height to the ExpandableListView.
Thanks in advance for any help.Following is my layout xml:
<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"
tools:context=".AppointmentsActivity" >
<LinearLayout
android:id="#+id/calendar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
<ExpandableListView
android:id="#+id/expandableListViewAppointments"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:groupIndicator="#null" >
</ExpandableListView>
<LinearLayout
android:id="#+id/bottomActionBarAppointments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>

Found the answer after trying few changes.
I used layout_weight property to allow each linear layout to share a specific portion of the screen.
Following is my layout XML:
<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"
tools:context=".AppointmentsActivity" >
<LinearLayout
android:id="#+id/calendar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/green"
android:layout_weight="0.1" >
</LinearLayout>
<LinearLayout
android:id="#+id/listViewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8">
<ExpandableListView
android:id="#+id/expandableListViewAppointments"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:groupIndicator="#null" >
</ExpandableListView>
</LinearLayout>
<LinearLayout
android:id="#+id/bottomActionBarAppointments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/green"
android:layout_weight="0.1">
</LinearLayout>
</LinearLayout>

View doesn't match it's parent

I am really struggling with my xml layout, even though I have over a year of experience working on android :). Anyway I need to create an xml layout as following:
I tried with this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50" >
</RelativeLayout>
</LinearLayout>
And everything looks alright till moment i want to add child to some inner layout.
So when i add listView to RelativeLayout, marked with number 3, it doesn't match it's
parent but takes whole screen. How can i add listview to inner layouts 2 and 3 so they
match their boundaries?

Look at this demo code,may be you can do some changes in this and apply it for your use.
directly put this code in your 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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/com_facebook_button_grey_focused" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"
android:layout_margin="10dp"
>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="10dp"
>
<ListView
android:id="#+id/listView2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
</LinearLayout>

slidingdrawer contents overlapped with the view

when i tap the handler the slidingdrawer is brought up but its contents are transparent i can see both the content and the listview.the listview is not hidden.
here is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/lvq"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
<SlidingDrawer
android:id="#+id/slidingDrawer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/lvq"
android:layout_alignTop="#+id/lvq"
android:content="#+id/content"
android:handle="#+id/handle" >
<Button
android:id="#+id/handle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="History" />
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</SlidingDrawer>
</RelativeLayout>
thanks in advance!

Put your SlidingDrawer below your ListView.
android:layout_below="#id/lvq"

Categories

Resources