Setting imageview and text accurately in ObservableScrollView

In my application i need to implement the observableScrollView library. What i need is to have a parallax area with an circular image view and two textviews aligned to the right off that circular imageview(for getting the circular image view i used this library from git hub : https://github.com/hdodenhof/CircleImageView)
But after i implemented this thing i got he parallax scrolling effect accurately but the problem is that am not getting the exact layout that i needed. Please do help me to implement the layout accurately.
This picture shows the layout which i want .
This is the layout i needed (developed using photoshop)

enter image description here

The second picture shows tha layout i got after implementing this xml file ..

<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">

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="@dimen/flexible_space_image_height"
    android:scaleType="centerCrop"
    android:src="@drawable/example" />
<View
    android:id="@+id/overlay"

    android:layout_width="match_parent"
    android:layout_height="@dimen/flexible_space_image_height"
    android:background="?attr/colorPrimary" />


<de.hdodenhof.circleimageview.CircleImageView       xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="35dp"

    android:src="@drawable/example"

    app:border_color="#FFf"
    app:border_width="4dp" />
<View
    android:layout_width="match_parent"

    android:layout_height="@dimen/flexible_space_image_height"
    android:background="@android:color/transparent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/profile_image"
android:gravity="center">
<TextView
    android:id="@+id/txt_Name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"

    android:text="Name"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#fff" />

<View
    android:layout_width="match_parent"

    android:layout_height="@dimen/flexible_space_image_height"
    android:background="@android:color/transparent" />

<TextView
    android:id="@+id/txt_Class"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="Class"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="#fff" />


<View
    android:layout_width="match_parent"

    android:layout_height="@dimen/flexible_space_image_height"
    android:background="@android:color/transparent" />
</RelativeLayout>


<com.suni.floreat.parallaxwithimage.ObservableScrollView
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="never"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/flexible_space_image_height"
            android:background="@android:color/transparent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:text="@string/lipsum"
            android:textColor="#000" />
    </LinearLayout>
</com.suni.floreat.parallaxwithimage.ObservableScrollView>


<LinearLayout
    android:id="@+id/l1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="@dimen/margin_standard">

    <TextView
        android:id="@+id/title"
        android:layout_width="239dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:gravity="fill_vertical"
        android:maxLines="1"
        android:minHeight="?attr/actionBarSize"
        android:textColor="@android:color/white"
        android:textSize="20sp" />


    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/flexible_space_image_height"
        android:background="@android:color/transparent" />
</LinearLayout>


Source: xml

Leave a Reply