0

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

enter image description here

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

code
  • 5,294
  • 16
  • 62
  • 113
  • 2
    First things you have to do is try use Android Studio which is given very good option to layout development instead provided by eclipse. – Haresh Chhelana Apr 16 '15 at 06:23
  • Thank you Haresh. I will try Android Studio. For the white boxes inside the Scroll View, how should I approach this? Should I create a fragment, custom view, or simply create individual .xml files for each of them and use the LayoutInflator class? – code Apr 16 '15 at 06:26
  • Also, do you know of any good tutorial or sample app that is similar to this example? – code Apr 16 '15 at 06:27
  • Use Android studio which is having live layout editor support! – Paresh Mayani Apr 16 '15 at 06:28
  • 1
    I think ur white box might be look like Card layout so have to check out here :https://developer.android.com/training/material/lists-cards.html#CardView – Haresh Chhelana Apr 16 '15 at 06:31
  • Thanks for the suggestion @HareshChhelana . In the LivingSocial app, the background image is actually fixed and the first white box is on top of it. I can't seem to find the correct Layout Hierarchical order to achieve this. Do you recommend a Parent RelativeLayout. Then inside that, a ScrollView + LinearLayout for the button. Then inside the ScrollView, what should be inside? Should I create a .xml for each white box or create fragments/custom views for each white box? Thank you – code Apr 16 '15 at 19:47

1 Answers1

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

Community
  • 1
  • 1
Access Denied
  • 8,723
  • 4
  • 42
  • 72
  • Thanks for the answer @Access Denied. In the LivingSocial app, the background image is actually fixed and the first white box is on top of it. I can't seem to find the correct Layout Hierarchical order to achieve this. Do you recommend a Parent RelativeLayout. Then inside that, a ScrollView + LinearLayout for the button. Then inside the ScrollView, what should be inside? Should I create a .xml for each white box or create fragments/custom views for each white box? Thank you – code Apr 16 '15 at 19:47
  • There is no need to use fragments for this task. Fragments are good in master - detail case and when you need to switch different UI sharing one model. In brief, view hierarchy will be the following: ... – Access Denied Apr 17 '15 at 05:00
  • Thank you so much! Now I understand when its good to use fragments, as you uggested. One last question - when should one use .xml pre made views versus programming Custom Views? – code Apr 17 '15 at 05:07
  • 1
    Actually, both variants are good. You can combine views from code or use xml. xml is more simpler, plus it gives you opportunity to have different layout for example in vertical orientation and horizontal orientation without lots of effort. You can also separate design from code in this case. And plus you have designer for xml and see how it looks without launching your app. As for inherited views it's worth using if you need to expand control behavior and reuse it. – Access Denied Apr 17 '15 at 05:15