How to create Android UI mimicking the Living Social UI?

Question

I am fairly new to Android UI design. I'm attempting to mimic the UI design of the following Living Social screen shot:

What is the best way to structure the UI elements here? How can this be implemented in XML? I'm trying to use the Android Eclipse UI editor to drag and drop UI elements, but it seems that I'll need to dynamically program the UI. What is the recommended way to approaching a problem like this?

So far, I have the following:

<LinearLayout 
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin">

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" 
            >
            <ImageView
                android:id="@+id/imageViewBackground"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_gravity="fill"
                android:scaleType="fitXY"
                android:src="@android:drawable/dialog_holo_dark_frame" />
            <View
                android:id="@+id/view1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <View
                android:id="@+id/view2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <View
                android:id="@+id/view3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/abc_search_url_text_normal"
        android:gravity="bottom|end"
        android:orientation="vertical" >

        <Button
            android:id="@+id/buttonBUY"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="BUY!" />
    </LinearLayout>
</LinearLayout>

Questions:

1. I'm using a parent LinearLayout. Inside this, I have a ScrollView for the top and a LinearLayout on the bottom. The LinearLayout on the bottom has a child button for the BUY NOW button. Is this the correct parent layout scheme?
2. Inside the ScrollView is an ImageView which is aligned to the top of the ScrollView. Then, inside the scrollview are X number of white boxes. How can I place the inner white box view slightly on top of the ImageView? Will I need to do this programatically?
3. What is the recommended way to create the inner white box views? Do I need to create a separate .xml view file for each of these? Or would you recommend to use a Fragment for each of the white boxes? Or, do I need to implement a custom view class for each of the white boxes?

Thank you

Answer 1

Probably, you need Parallax effect and CardView controls inside linear layout control. In order to add bottom button you can use Relative layout. As for parallax, please, take a look at the following thread : How to do the new PlayStore parallax effect