nirhart
commented
9 years ago can you please attach the xml and maybe some kind of graphic aid to help me understand the exact effect that you are trying to achive?
Closed szoszig closed 9 years ago
nirhart
commented
9 years ago can you please attach the xml and maybe some kind of graphic aid to help me understand the exact effect that you are trying to achive?
szoszig
commented
9 years ago The main idea is: headerView should smoothly appear on the top of the screen, over the layout as you scroll down, and the text (tvpEventDetailName) should scroll with the content until it reaches the middle of the headerView, and stay there, while everything else scroll toward. Now the headerView parallaxes down all the way with parallax factor, and if it reaches the text, it grabs that, and goes down together.(feature:))
Here is my whole, just a little bit complicated layout:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
<com.nirhart.parallaxscroll.views.ParallaxScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background"
app:parallax_factor="6.6">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.flaviofaria.kenburnsview.KenBurnsView
android:id="@+id/ivEventDetailImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/default_party"
android:scaleType="centerCrop"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignTop="@+id/ivEventDetailImage"
android:layout_alignBottom="@+id/ivEventDetailImage"
android:background="@drawable/detail_image_shadow"/>
</RelativeLayout>
<LinearLayout
android:id="@+id/llEventDetailMainContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:paddingBottom="@dimen/PL_Detail_Margin_Mini">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivEventDetailTicketIcon"
style="@style/PL_IV_Detail_SubTitle_Icon"
android:layout_alignTop="@+id/tvpEventDetailTicketPrice"
android:layout_alignBottom="@+id/tvpEventDetailTicketPrice"
android:layout_centerVertical="true"
android:src="@drawable/detail_icon_ticket_party"/>
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailTicketPrice"
style="@style/PL_TVP_Detail_SubTitle_Text"
android:layout_toRightOf="@+id/ivEventDetailTicketIcon"/>
</RelativeLayout>
</LinearLayout>
<ImageView
android:id="@+id/ivEventDetailImagesBtn"
style="@style/PL_IV_Detail_SubTitle_Images"
android:visibility="invisible"/>
</LinearLayout>
<FrameLayout
android:id="@+id/flEventDetailRibbonContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/PL_Detail_Margin_Big">
<ImageView
android:id="@+id/ivEventDetailRibbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ribbon_featured_party"/>
<com...widget.AutoFitTextView
android:id="@+id/tvpEventDetailRibbon"
style="@style/PL_TVP_Detail_Ribbon_Text"
android:text="@string/DETAIL_FEATURED"/>
</FrameLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="@+id/llEventDetailPoiContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/PL_Detail_Margin_Big"
android:layout_marginRight="@dimen/PL_Detail_Margin_Big"
android:layout_marginTop="@dimen/PL_Detail_Margin_Small"
android:background="@drawable/button"
android:gravity="center_vertical">
<com.meg7.widget.CustomShapeImageView
android:id="@+id/ivEventDetailPoiImage"
style="@style/PL_CSIV_Detail_NextEvent_Image"/>
<LinearLayout
style="@style/PL_LL_Detail_Item"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailPoiName"
style="@style/PL_TVP_ListItem_Name_Text"/>
</LinearLayout>
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailPoiTagList"
style="@style/PL_TVP_ListItem_Address_Text"
android:layout_weight="1"
android:textColor="@color/pl_white"/>
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailPoiAddress"
style="@style/PL_TVP_ListItem_Open_Text"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/llEventDetailBaseInfoContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/PL_Detail_Margin_Big"
android:layout_marginRight="@dimen/PL_Detail_Margin_Big"
android:orientation="vertical">
<com...widget.TextViewPlus
android:id="@+id/llEventDetailBaseInfoProperty"
style="@style/PL_TVP_Detail_Property_Title_Text"
android:text="@string/POIDETAIL_BASEINFO"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="@dimen/PL_Detail_Margin_Extra_Mini">
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailOpenText"
style="@style/PL_TVP_Detail_Default_Text"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/PL_Detail_Margin_Small"
android:orientation="horizontal">
<ImageView
android:id="@+id/ivEventDetailBaseInfoMapButton"
style="@style/PL_IV_Detail_Button"/>
<ImageView
android:id="@+id/ivEventDetailBaseInfoPhoneButton"
style="@style/PL_IV_Detail_Button"/>
<ImageView
android:id="@+id/ivEventDetailBaseInfoMapFavourite"
style="@style/PL_IV_Detail_Button"/>
</LinearLayout>
</LinearLayout>
<View
style="@style/PL_V_Detail_Separator"/>
<LinearLayout
android:id="@+id/llEventDetailServicesContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
style="@style/PL_LL_Detail_ContainerItem">
<com...widget.TextViewPlus
android:id="@+id/llEventDetailServicesProperty"
style="@style/PL_TVP_Detail_Property_Title_Text"
android:text="@string/POIDETAIL_SERVICES"/>
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailServices"
style="@style/PL_TVP_Detail_Default_Text"/>
</LinearLayout>
<View style="@style/PL_V_Detail_Separator"/>
</LinearLayout>
<LinearLayout
android:id="@+id/llEventDetailProgramContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/PL_Detail_Margin_Big"
android:layout_marginRight="@dimen/PL_Detail_Margin_Big"
android:orientation="vertical">
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailProgramProperty"
style="@style/PL_TVP_Detail_Property_Title_Text"
android:text="@string/POIDETAIL_PROGRAM"/>
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailProgramText"
style="@style/PL_TVP_Detail_Default_Text"/>
</LinearLayout>
<View style="@style/PL_V_Detail_Separator"/>
</LinearLayout>
<LinearLayout
android:id="@+id/llEventDetailContactContainer"
style="@style/PL_LL_Detail_ContainerItem">
<com...widget.TextViewPlus
android:id="@+id/llEventDetailContactProperty"
style="@style/PL_TVP_Detail_Property_Title_Text"
android:text="@string/POIDETAIL_CONTACT"/>
<TableLayout android:id="@+id/tlEventDetailContainerTable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1"/>
</LinearLayout>
</LinearLayout>
</com.nirhart.parallaxscroll.views.ParallaxScrollView>
<FrameLayout android:id="@+id/headerView"
android:layout_width="match_parent"
android:layout_height="@dimen/PL_ActionBar_Height_Size"
android:alpha="0"/>
<FrameLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/PL_EventDetailTitle_Distance"
android:id="@+id/flEventDetailNameContainer">
<com...widget.TextViewPlus
android:id="@+id/tvpEventDetailName"
style="@style/PL_TVP_Detail_Title_Text"
android:textAllCaps="true"/>
</FrameLayout>In the first try, the main layout was the scrollview, and the relative layout was in that. It worked correctly, text parallaxed upward in the headerView(i didn't want it, but it was funny, so i liked it). This way i couldn't scroll to the real bottom of the scrollview.
nirhart
commented
9 years ago If I understand correctly you are looking for some kind of effect that usually used in material design apps, that one scroll grab the other scroll and continue with it. I'm afraid that this kind of implementation is not supported out of the box in this library and needed to be implemented by the programmer itself, though it is a really nice idea for a future feature.
szoszig
commented
9 years ago You got it.:) I could achive this, with your scrollview, but the scroll area wasn't precise because of relative layout. My question is: Why do my headerview get the parallax effect, if that is out of the scrollview? Or is it possible to change parallaxed view, or the layout order defines it? This effect is quite cool, and when my relativelayout was in the scrollview, then the last framelayout with the textview got the parallax, and it was strange but cool.
szoszig
commented
9 years ago Sorry, my fault. The layouts outside scrollview not parallaxed, just scrolled, like before, but now they shouldn't. Thx a lot!
DevikaSrinivasan
commented
8 years ago zoom factor is available in this dependency?
Hi I have a problem. I implemented your parallaxsrollview, and it worked fine (big thx). Later there was an idea to put a view over the srollview like a header, and it is changing its alpha as you scroll. To achive this, i had to change my scroll container linearlayout to relative. This way it worked, but the srcollview didn't contain all of the views it should. I searched for a solution, and i found, if i put the whole layout in a relativelayout, and in that the original parallaxscrollview with linearlayout, and later in the xml i added the framelayout. It almost worked, but this framelayout got the parallax effect. It is a little bit strange for me. Any idea? thx