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!
Related
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
I want to achieve this (ribbon over a CardView):
And here's the snippet of my solution:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testId"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/ribbonParentId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|top"
android:layout_marginBottom="15dp"
android:background="#drawable/green_ribbon" >
<android.support.v7.widget.AppCompatTextView
android:id="#+id/ribbonId"
style="#style/RibbonStyle"
android:text="#string/ribbon_text" />
</LinearLayout>
<android.support.v7.widget.CardView
android:id="#+id/historicalWeightCardViewId"
style="#style/MyCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="18dp" >
... Other elements
</android.support.v7.widget.CardView>
And in the RecycleView adapter I bring the ribbon to front by calling.
itemView.findViewById(R.id.ribbonParent2Id).bringToFront();
My solution is working in most devices I tested except Nexus 5 (Android 5.1.1), where ribbon is still (partially) behind the cardview. I'm using AppCompat and targeting >v4.0.
What is the proper way of putting a view over a cardview? Is there another way of achieving the same thing? Why my solution doesn't work for some cases?
How can I make green ribbon to start from the left edge of the screen? Currently there still is a space between screed edge and start of the ribbon.
It is caused by elevation, because CardView on android 21 use true elevation and your LinearLayout has 0 elevation so it is behind the CardView.
To solve this problem, you have 2 options
set android:elevation to your LinearLayout, e.g. android:elevation="10px"
wrap your CardView with a FrameLayout like below
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/historicalWeightCardViewId"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="18dp" >
</android.support.v7.widget.CardView>
</FrameLayout>
<LinearLayout
android:id="#+id/ribbonParentId"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="left|top"
android:layout_marginBottom="15dp"
android:background="#android:color/holo_red_dark">
<android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ribbonId"
android:text="abc" />
</LinearLayout>
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.
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!
I have a small animation in my app, that in the end of it changes the location parameters of a ListView i.e. it comes a bit lower than when it started (It starts as full screen and after a button press, its sliding down a little to reveal something beneath it, on the top of the screen). By pressing on the list I can see that its parameters realy changed and its location really changed. Now, if the SlidingDrawer is getting opened at that point, the layout gets rearranged and the list is back to full screen. Why is that?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.softtechnics.mobuynet"
android:id="#+id/coupon_list_layout"
style="#style/FillParent"
android:orientation="vertical" >
<include
android:id="#+id/filter_tab"
android:layout_width="match_parent"
android:layout_height="34dp"
android:layout_below="#+id/action_bar"
layout="#layout/filter" />
<com.softtechnics.mobuynet.gui.components.ListArr
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/footer"
android:layout_below="#+id/action_bar">
</com.softtechnics.mobuynet.gui.components.ListArr>
<com.softtechnics.mobuynet.gui.components.ActionBar
android:id="#+id/action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<ProgressBar
android:id="#+id/progress"
style="#style/WrapContent"
android:layout_centerInParent="true"
android:visibility="gone" />
<com.softtechnics.mobuynet.gui.components.Footer
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="113dp"
android:layout_alignParentBottom="true"
android:visibility="invisible" />
Footer is my SlidingDrawer.
Thanks!
You have to change listview properties when the animation ends. Also you should remember actual state of this view and update it in onResume method.