i want to create an ap that it has a list in the bottom of the page and when i scroll over the screen down, the top of screen disappear and show only the list of elements (and when i scroll up again it show me the top of page again)- the same as in the facebook app..
i tried to implement it and this is my xml with a listview and scrollview, however it doesnt work as expected..
when i scroll page the page stay as is, and only when i scroll the list view , the list view goes down, however the top of the page remain and the list view remain in the same size)
how can i do the same list as in the facebook android app?
thanks alot
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff" >
<!-- Header Starts -->
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#layout/header_gradient"
android:paddingBottom="5dip"
android:paddingTop="5dip" >
<!-- Logo Start -->
<!-- Logo Ends -->
<com.facebook.widget.ProfilePictureView
android:id="#+id/profilePictureView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_weight="1" >
</com.facebook.widget.ProfilePictureView>
<TextView
android:id="#+id/profileNameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName" />
</LinearLayout>
<!-- Header Ends -->
<ImageView
android:id="#+id/freinds"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_below="#+id/detailsText"
android:layout_marginRight="40dp"
android:layout_marginTop="17dp"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/LikeImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignTop="#+id/freinds"
android:layout_marginRight="27dp"
android:layout_toLeftOf="#+id/freinds"
android:src="#drawable/logo" />
<TextView
android:id="#+id/detailsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_marginTop="16dp"
android:layout_toLeftOf="#+id/freinds"
android:ems="10"
android:inputType="textMultiLine" >
<requestFocus />
</TextView>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/freinds" >
<Button
android:id="#+id/registerTwitter"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Sale" />
<Button
android:id="#+id/registerFB"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Deliver" />
<Button
android:id="#+id/clearCredentials"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Group" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/linearLayout1"
android:orientation="vertical" >
<EditText android:id="#+id/EditText01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:hint="Search">
</EditText>
<ListView android:id="#+id/ListView01"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>
</RelativeLayout>
</ScrollView>
I think what you want is a little more complex than just xml layout, but maybe I miss understood, try playing a little with the scroll view events.
you want to display the top of page instantly, when user scroll up, so you need to register to the onscroll event of the scroll view, and check for the scroll direction, to display the top section of the page. is that more clear?
Related
I'm having an awkward error, and do not have any clue about what's the cause.
I'm working on a maintenance of an android map application, it was using GoogleMap API, but now I've changed it to MapLink API. One of the view is this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<EditText
android:id="#+id/searchText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="3dip"
android:ems="10"
android:hint="Busca"
android:maxLines="1"
android:layout_weight="0.85" />
<Button
android:id="#+id/searchBtn"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/magnifier13"
android:onClick="search" />
</LinearLayout>
<View
android:id="#+id/separator1"
android:layout_width="fill_parent"
android:layout_height="2dip"
android:background="#color/red" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<br.com.maplink.map.MapTemplate
android:id="#+id/mapview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</br.com.maplink.map.MapTemplate>
<ImageView
android:id="#+id/drag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/androidpin64"
android:visibility="gone" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="100dip"
android:orientation="vertical" >
<View
android:id="#+id/separator2"
android:layout_width="fill_parent"
android:layout_height="2dip"
android:background="#color/red" />
<EditText
android:id="#+id/txtEtiqueta"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="3dip"
android:ems="10"
android:hint="Etiqueta"
android:maxLines="1" >
<requestFocus />
</EditText>
<Button
android:onClick="create"
android:id="#+id/btnCadastrarPOI"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:paddingRight="10dip"
android:text="Concluído" />
</LinearLayout>
When I click on the top textbox the keyboard just appear and when it's dismissed everything is normal, but when I click on the bottom textbox, the keyboard scroll the content page up and the content above the map goes off the view, when the keyboard is dismissed the content page scrolls back to it's original, but the content above the map is covered by a black frame, if I rotate the device or try to click on the top text box the black frame disappear.
I've already tried to recreate the view on other file but it keep this problem, I've tried the same thing on other project and everything is working fine.
Also, this problem only happen on landscape orientation;
Thanks.
I have a lot of info to put on one xml page. Now i got what I want in the positions i want. However instead of fitting all my data on 3 key parts without running into each other, It keeps running into the next TextView. I was wondering how to have it auto adjust.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/back" />
<TextView
android:id="#+id/makeup_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginTop="97dp"
android:text="#string/part_section_2" />
<TextView
android:id="#+id/part_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginLeft="19dp"
android:layout_marginTop="38dp"
android:text="put text here for info" />
<TextView
android:id="#+id/part_safety"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_makeup"
android:layout_below="#+id/safety_title"
android:layout_marginTop="28dp"
android:text="put text here for safety" />
<TextView
android:id="#+id/info_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="42dp"
android:text="#string/part_section_1" />
<TextView
android:id="#+id/part_makeup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_info"
android:layout_below="#+id/makeup_title"
android:layout_marginTop="33dp"
android:text="put text here for makeup" />
<TextView
android:id="#+id/safety_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/part_makeup"
android:layout_marginTop="48dp"
android:text="#string/part_section_3" />
<TextView
android:id="#+id/part_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:textColor="#b70000"
android:textSize="16sp"
android:text="put text here for part title" />
</RelativeLayout>
would ScrollView work better? and how would switch this from this to ScrollView.
skin is 480x800
density is high(240)
Strings file - http://pastie.org/8534713
Changing to ScrollView (source):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="match_parent" >
<!-- your Button and TextView widgets -->
</RelativeLayout>
</ScrollView>
Edit:
As well as that, try changing your back button XML to this:
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/part_safety"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/back" />
The problem was android:layout_alignParentBottom="true". The bottom ended up not going to the bottom of the page like you had before. The ScrollView cut back on the bottom of the layout.
I'm developing android app as per the following design.
I want to set the height of the scroll view to the remaining screen size (after occupied by header,footer and other texts) although there are no any contents in the list view. When the items added to the list view (dynamically) I want to scroll it withing the same. But now I'm unable to set initial height when there are no items in the list view.
bellow is my layout file.
<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="#color/background_color"
tools:context=".HomeActivity"
android:weightSum="1.0" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#color/header_color"
android:paddingBottom="#dimen/header_vertical_margin"
android:paddingLeft="#dimen/header_horizontal_margin"
android:paddingRight="#dimen/header_horizontal_margin"
android:paddingTop="#dimen/header_vertical_margin" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:weightSum="1.0" >
<ImageButton
android:id="#+id/ImageButton03"
android:layout_width="62dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_weight="0.2"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:gravity="left"
android:scaleType="centerInside"
android:src="#drawable/title_left_img" />
<ImageView
android:id="#+id/headerImg"
android:layout_width="139dp"
android:layout_height="match_parent"
android:layout_weight="0.7"
android:scaleType="centerInside"
android:src="#drawable/header_img"
android:layout_margin="5dp" />
<ImageButton
android:id="#+id/ImageButton04"
android:layout_width="38dp"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="centerInside"
android:src="#drawable/title_right_img" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1"
android:paddingBottom="#dimen/body_vertical_margin"
android:paddingLeft="#dimen/body_horizontal_margin"
android:paddingRight="#dimen/body_horizontal_margin"
android:paddingTop="#dimen/body_vertical_margin" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<TextView
android:id="#+id/dayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TextView"
android:textColor="#color/day_color"
android:textSize="#dimen/day_size"
android:textStyle="bold" />
<TextView
android:id="#+id/dateTimeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TextView | TextView"
android:textColor="#color/time_date_color"
android:textSize="#dimen/date_time_size"
android:textStyle="normal" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="0px"
android:background="#drawable/rounced_rect"
android:layout_weight="1"
android:fillViewport="true" >
<ListView
android:id="#+id/list_tracking"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dividerHeight="1dp"
android:scrollingCache="true" >
</ListView>
</ScrollView>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="1dp"
android:paddingBottom="#dimen/footer_vertical_margin"
android:paddingLeft="#dimen/footer_horizontal_margin"
android:paddingRight="#dimen/footer_horizontal_margin"
android:paddingTop="#dimen/footer_vertical_margin" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/track_button"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="centerInside" />
</RelativeLayout>
I'm new to android app and any guidance is really appreciated.
You can't use a ListView inside a ScrollView.
You could either use a ScrollView or ListView, but not both together or one inside the other.
To summarize my comment:
Remove the unnecessary relativeLayout1, 2, and 3 and scrollView. Then move the bottom image button above the linear layout, so you can make the linear layout position itself with layout_above the image button and give it a height of match_parent. This makes it fill the space between the top linear layout and the bottom image button. And finally make the scroll view's height match_parent so it will also fill the space remaining below the text views.
I have created a widget. I intentionally used layout_weight
so it would fit any screen size.
The widget is always spanned to 1X4.
I now look at different devices in the graphic editor and I see the weight doesn't help.
should I move to dip size?
The linear-layouts are spanned differently in relation to the background image.
My XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_widget_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/widget_bg_main"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="0dp" >
<RelativeLayout
android:id="#+id/layout_status_image"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:layout_weight="0.21"
>
<ImageView
android:id="#+id/image_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/widget_icon_no_data"
android:visibility="invisible" />
<!--
Layout is necessary because the setVisibility of ProgressBar is not working
through remote views in 2.1. So wrapped by this layout
-->
<FrameLayout
android:id="#+android:id/widget_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp" >
<ProgressBar
style="?android:attr/progressBarStyle"
android:layout_width="39dp"
android:layout_height="39dp"
android:indeterminateOnly="true"
android:orientation="vertical" />
</FrameLayout>
</RelativeLayout> <!-- Status image layout -->
<!--
========================================================================
* Information layout - contains all the texts
========================================================================
-->
<LinearLayout
android:id="#+id/layout_information"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="20dp"
android:layout_weight="0.56"
>
<TextView
android:id="#+id/text_view_destination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="\# Home in"
android:textColor="#color/solid_white"
android:textSize="19sp"
android:textStyle="bold"
android:layout_gravity="left"
/>
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:textColor="#color/solid_white"
android:textSize="25sp"
android:textStyle="normal"
android:layout_gravity="left"
/>
</LinearLayout> <!-- Information layout -->
<!--
========================================================================
* Action layout - action buttons container
========================================================================
-->
<LinearLayout
android:id="#+id/layout_action"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:layout_weight="0.23"
>
<ImageView
android:id="#+id/image_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/widget_bt_drive_disabled" />
<TextView
android:id="#+id/text_view_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="Drive!"
android:textColor="#color/disabled_white"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
/>
</LinearLayout> <!-- Action layout -->
It is obvious because single layout working perfectly on a normal screen sized device doesn't mean that it'll work the same way on large/xlarge sized screens. So create a folder inside res "layout-large" or "layout-xlarge" (depending on device screen size). Copy same layout into newly created folder and then make some changes to it, so it'll fit for large/xlarge screens as per your requirement. Also you may copy images into ldpi, mdpi, hdpi and xhdpi to support multiple densities.
For more info: http://developer.android.com/guide/practices/screens_support.html
Hope this helps.
I have a HorizontalScrollView with some buttons, I am trying to stretch these buttons to fill the whole width of the HorizontalScrollView so that they can appear organized and equally spaced between each others. Here is the Image which I have.
I want these 4 buttons to be stretched over the whole width! here is my code
<HorizontalScrollView
android:id="#+id/items_HorizontalBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/vf"
android:background="#80000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Light"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Door"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Alarms"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Window"
android:textColor="#color/green_color"
android:textSize="20sp" />
</LinearLayout>
</HorizontalScrollView>
Instead of messing with LinearLayout you should follow the correct solution that is setting the HorizontalScrollView (or Vertical) to FillViewPort.
XML:
android:fillViewport="true"
Programmatically:
hsv.setFillViewport(true);
For equal distributions, set the weightSum value of the parent, and assign layout_weight to its children.
For 4 equal sized buttons, add android:weightSum="1" to the LinearLayout. For each of the buttons set android:layout_width="0dp", then add android:layout_weight="0.25".
This is what occurs in the code but depending on the View, the "Distribute Weights Evenly" button in the Eclipse GUI can also help.
However, HorizontalScrollView can only host one direct child, I wonder about the structure of this layout...
try making the container a horizontal scroll view. After that add in a table layout, and in each row of the table add in a horizontal linear layer. what will now happen instead, is that the scroll view will be stretched to fit the button size you set, and should scroll w/o you having to program a thing, and you should have effectively created a grid.
try something similar to this:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="233dp"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
Also perhaps you could wrap the horizontal scroll view in a vertical scroll view then you can scroll up/down, left/right and do as you need.