Change RelativeLayout height as user scrolls in scrollview - android

I'm trying to change the height of RelativeLayout as user scrolls, so it smoothly moves up. It's kinda working but its all flickering and glitching.
I tried to use setTranslationY, but that doesn't move the scrollview with the RelativeLayout.
int top = mScrollView.getScrollY();
int maxRelative = formulas.dpToPx(250);
int actualRelative = (int)((1.0-((float)top)/300.0)*((float)maxRelative));
RelativeLayout.LayoutParams layout_description = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
actualRelative);
mCollapsingLayout.setLayoutParams(layout_description);
mCollapsingLayout.requestLayout();
This is how it looks
http://imgur.com/7PL6Yt5
If you have any better idea how to shrink the RelativeLayout as you scroll, its appreciated.
Edit: here's my xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:id="#+id/collapsing.view">
<ImageView
android:id="#+id/collapsing.view.image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/theflash"
android:tint="#7F000000"
android:scaleType="centerCrop"/>
<ImageButton
android:id="#+id/favorite.button"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:src="#drawable/favorite_button"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:paddingBottom="30px">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The Flash"
android:textColor="#fff"
android:textSize="25sp"
android:layout_centerInParent="true"
/>
</FrameLayout>
</RelativeLayout>
<ScrollView
android:id="#+id/detail.scrollview"
android:layout_below="#+id/collapsing.view"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>

There are several approaches to this, including readily available classes such as this one which basically does what you want. You may need to remove the parts for the shrinking text and so forth, but it's right where you need it

You need to place your RelativeLayout inside the ScrollView and try setTranslationY again - it should work

Related

when adding views they go one below another even if width is wrap content

I have a Linear layout then programatically I'm adding some spinners and buttons and so on, but I have xml button Wrap content (width) and then on java I add spinner (or anything else) and it goes below this view even if both views are wrap content:
progBar = new ProgressBar(this);
pBarToca = new ProgressBar(this);
pBarToca.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
linToca = (LinearLayout) findViewById(R.id.tetoca);
linToca.addView(pBarToca);
and it's placed under the button of xml:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
edit!!!!!!
I want textview on first line then on next line button + progressbar (for example)
You have android:orientation=vertical so the Views will be laid out starting at the top and going down.
If you want them to all be next to each other, remove that from your xml since the default orientation for a LinearLayout is horizontal. If you do this, you will obviously need to change the android:width to wrap_content for your TextView or else it will take up the entire screen.
After your comment, a RelativeLayout would work best here.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar"
android:id="#+id/tvID" /> // give it an id
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca"
android:layout_below="#/id=tvID"> // place it below the TV
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
</RelativeLayout>
Note the changes in the comments. Now when you add your progressbar to the LL, it should be next to the Button. You may need some changes but this should give you approximately what you want.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/te_toca_jugar"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
In your textView you are matching the parent
android:layout_width="match_parent"
This will cause the textview to take up the entire width of the parent view.
android:layout_width="wrap_content"
and
android:orientation="horizontal"
android:orientation="vertical" will cause the elements to be stacked.
If you are using "horizontal" it's important not to have a child element with width matching parent.
EDIT:
After OPs change to question:
I have used a textview, two buttons and listview to give you an idea of how you can format it. There are many ways to achieve the same thing, this is one suggestion.
The internal linearlayout has a horizontal orientation (by default).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="te_toca_jugar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar2"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lv">
</ListView>
</LinearLayout>
</LinearLayout>

Make view fixed to top when it passes the top

Sorry if the title isn't really clear but I don't know what the effect is called. It will get clear with some screenshots..
I have a homescreen with a search container on the top and a list of houses at the bottom.
The whole homescreen is a scrollview and when the 'Panden in uw buurt' textview passes the top off the screen I want it to be fixed.
start screen:
what I want to achieve if user scrolls down:
This is my xml layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/quick_search_view"
layout="#layout/view_quick_search"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/quick_search_view"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/house1" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/house2" />
</LinearLayout>
<View
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_below="#+id/quick_search_view"
android:layout_marginLeft="7dp"
android:background="#drawable/triangle_indicator"
android:rotation="180" />
</RelativeLayout>
follow the steps-
Exclude 'Panden in uw buurt' from your "#layout/view_quick_search".[Header also if its not actionBar]
Put it below "#+id/quick_search_view".
set/add Listeners for Scrolling.
OnScroll set visibility of "#+id/quick_search_view" gone/visible OR set
translate animation.
I found the solution : here
The stickyfragment and observableScrollView did the job!

Android - Background reset after show/hide views with animation

I am showing and hiding views on a particular actions using some animation, I used LayoutTransition and it seems to work fine except one thing, while the animation is going, the background of some TextViews changes and reset to the default white background!!
Following is the code I am using to apply animation after hide/show.
mRightTransitioner = new LayoutTransition();
mRightTransitioner.setDuration(1000);
vg_rightContainer.setLayoutTransition(mRightTransitioner);
Edited: even without animation i tried, same problem, the background resets once view's position changes
Edited: here how i declared the views in the XML
<LinearLayout
android:id="#+id/ll_req_reasonwrapper"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:baselineAligned="false"
android:gravity="right"
android:orientation="horizontal"
android:visibility="gone" >
<EditText
android:id="#+id/et_req_reasons"
android:layout_width="400dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:gravity="right|center_vertical"
android:inputType="text"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_preasons" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_req_timewrapper"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:baselineAligned="false"
android:gravity="right"
android:orientation="horizontal"
android:visibility="gone" >
<LinearLayout
android:id="#+id/ll_req_endtimewrapper"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/ftv_req_endtime"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:freezesText="true"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_endtime" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_req_starttimewrapper"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="50dp" >
<TextView
android:id="#+id/ftv_req_starttime"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:freezesText="true"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_starttime" />
</LinearLayout>
</LinearLayout>
for instance: if i hide 'll_req_reasonwrapper', then the LinearLayout 'll_req_timewrapper' moves up, then the backgrounds of the textViews like 'ftv_req_starttime' becomes white!!
Please help.
Edited Answer:
if your are using linear layout then if the child is not being displayed, it is not going to be laid out and not going to be the part of the measurements ( as it looks like ). I recommend to use the RelativeLayout.
You can try
android:background="#null"
for your buttons. if your are using some custom class for button then add
.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
for this specific views.
Need more code. The fact that disabling the LayoutTransition does not solve your issue, means that the animation is not the issue.
How do you reinstantiate child views or populate your view. Are you removing views with setVisibility(View.GONE) and then setting them back with setVisibility(View.VISIBLE)
OR
Are you removing childAt(i) and then dynamically adding custom views
I'm sorry I couldnt add a comment since I dont have the reputation for that but I think I am able to answer your question if you post more code.

Android scrollable results view with scrollable header section

I have an activity where the bottom half of the page is a scrollable results view. At the top of the results view, is a relativelayout with some text and a button. This button will make new items appear in this relative layout to refine the search. This part is all working. However, below this relative layout, I need to add a list of search results. I had this working with a listview, but since I need the entire bottom of the portion of the page (including that header relative layout) scrollable and since you cant have a listview in a scrollview, this wont work.
So, I was hoping I could do something like make another view, populate it with the result data for each result item, and programatically add them below the relative layout. Perhaps just having a linearlayout beneath that header relative layout.
Am I on the right track with this thinking? What is the right way to do this?
If it matters, my app has a min sdk version of 8. I am using the support libraries.
EDIT: here is my current code:
<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"
tools:context=".DealerFragment"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:background="#drawable/background">
<ImageView
android:id="#+id/topBar"
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="45dp"
/>
<ImageView
android:id="#+id/logoImageView"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/CD_logo"
android:src="#drawable/logo" />
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
class="com.google.android.gms.maps.SupportMapFragment" />
<ScrollView
android:id="#+id/scrollBox"
android:layout_width="match_parent"
android:layout_height="220dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="#00000000" >
<RelativeLayout
android:id="#+id/scrollViewRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000">
<RelativeLayout
android:id="#+id/searchHeaderBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#c0000000">
<TextView
android:id="#+id/near"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/near"
android:textColor="#ffffff" />
<TextView
android:id="#+id/nearZip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/near"
android:layout_marginLeft="4dp"
android:layout_centerVertical="true"
android:text="78749"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/narrowSearchImage"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/filter"
android:contentDescription="#string/CD_Narrow_Results"/>
<TextView
android:id="#+id/narrowSearchText"
android:layout_toLeftOf="#+id/narrowSearchImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/narrow_results"
android:textColor="#ffffff"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/resultsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/searchHeaderBox"
android:layout_marginTop="1dp"
android:orientation="vertical"
android:background="#00000000">
</LinearLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Basically, I want to know if I should just try to add my result items (which I currently have as a seperate .XML file) and if so how I do that. Or if there is some other device I should be using to accomplish this. My goal, is to have everything in that scrollview to scroll. I don't know how many result items I will have until the page is loaded.
How about, we actually put the ListView in a ScrollView!
I know people say you can't, but I found a way.
1. Wrap the layout that contains your ListView, with a ScrollView.
2. Add this to the class with the layout containing your ListView. Make sure to place it after you set your adapter. The only thing you need to change is dp to the height of your ListView row layout.
int listViewAdapterSize = yourListView.getAdapter().getCount();
LayoutParams listViewParams = yourListView.getLayoutParams();
final float scale = getContext().getResources().getDisplayMetrics().density;
int pixels = (int) ((listViewAdapterSize * dp) * scale + 0.5f);
params.height = pixels;
Let me know if you have any problems!

Margin on ListView items in android

I'm trying (in vain) to add margins to my ListView items. I have tried adding margin values to my RelativeLayout below but no matter what I do all I seem to get is a 1px line between each item.
What I really would like is to have rounded corners on each item, a 1px black border and a 3-5px margin left, top, and right but right now I'll settle for just a margin around each item :-)
How do I achieve my goals? Just the margin for now... ;-)
Here's what I have:
UPDATE: I have updated the xml below removing main layout and fragment layout. I have also updated the ListView item layout to what I have now which is closer to what I want but still not perfect. Screenshot added as well
listview item layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/matchMargin"
android:paddingRight="#dimen/matchMargin"
android:paddingTop="#dimen/matchMargin" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cfcfcfcf" >
<include
android:id="#+id/matchKampstart"
layout="#layout/kampstart_layout" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tournamentImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/tournamentImageViewContentDescription"
android:gravity="left"
android:src="#drawable/sofabold_launcher" />
<ImageView
android:id="#+id/homeTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/homeTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/homeTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:text="#string/home"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/dash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/dash"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/awayTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/awayTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/awayTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/away"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tvChannelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:contentDescription="#string/tvChannelImageViewContentDescription"
android:gravity="right"
android:src="#drawable/sofabold_launcher" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This gives me the following where you'll notice a very small line to the right and left for each item. That I would also like to get rid of.
I'm not great with layouts, but I have noticed in the past that ListView rows often ignore LayoutParams. I have no idea where this happens or if it's possible to override, I do know you can easily work around it by adding another layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#990000ff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#9900ff00"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ff0000" />
</LinearLayout>
</LinearLayout>
Typically layouts that only have one child can be removed, but as you can see this one serves a purpose:
The outer-most layout is blue, the TextView is red, and the green is the extra layout that allows you to add some extra spacing. Notice the difference between padding (the green on the left) and margin (no green on the right). You have clearly stated that you want to use margins (android:layout_margin) but your code clearly uses padding (android:padding) so I included both.
A little late seeing this, but just add the following lines to your ListView xml element
android:divider="#00000000"
android:dividerHeight="10dp"
See the answer here for why. In short the child asks the parent, and the list view row uses AbsListView.LayoutParams, which doesn't include margins.
Why LinearLayout's margin is being ignored if used as ListView row view
In your adapter, catch your relative layout in getView(), then give a layout params ,
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
params.setMargins(80, 0, 0, 0); //substitute parameters for left, top, right, bottom
YourRelativeLayoutInAdapter.setLayoutParams(params);
I suppose you have a ListView defined in an XML file somewhere, if so, you could add some padding to it, so that there will be some space between the edge of the screen and the ListView.
Example:
<ListView
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:padding="15dp"/>

Categories

Resources