2

I've to design a UI for an Android app where i've 10 vertical tiles containing image and text(the 2 big boxes in the picture) and on clicking a tile, it disappears and is replaced by scrollable gridview containing 6 elements(shown in the centre of figure below) on the same page. (shown by an animation)

Here is a snapshot of the view I'm trying to explain. This images shows only 2 out of 10 tiles and a gridview which appears on click Each of the white box contains image and text. I'm not good at designing, so a detailed answer of implementing this would be appreciated. Thanks. enter image description here

Gaurav Arora
  • 17,124
  • 5
  • 33
  • 44
  • 1
    Did you at least tried to do something? The UI looks pretty simple, a `ViewPager`/`GridView` in the center with two identical layouts on the sides. – user Aug 16 '12 at 12:02
  • Please read the question again. There are 10 tiles, two of which are shown in the figure. On clicking them, they expand further into a scrollable grid view as shown in the figure. Can you give me detailed approach of achieving this layout. Thanks ! – Gaurav Arora Aug 17 '12 at 05:25
  • I've read the question again and I was wrong with my first assumption. I think you'll have a hard time making that layout, first because you'll most likely end up with scrollable widgets in other scrollable widgets and second because you'll have many items to show running in potentially memory issues. – user Aug 17 '12 at 07:16
  • This are the common layouts http://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts and better stick with this, if you really can't there is the *Relative Layout* where you basically have to set everything by hand, all the property and the positions. Eclipse also has a built in basic designer for the Android UI. – user827992 Aug 17 '12 at 09:40

1 Answers1

2

There is not much details in your question, even the picture does not clarify everything, but here is a stab at it.

Not sure what you mean when you say the tiles "expand" further, do you expect to see the six tiles in the middle to appear at that time or are they always there? if they appear, would that be animated?

To achieve the picture you have, you should probably get a RelativeLayout at the top level. That's just because you have this date TextView on the top right and the handle to a SlidingDrawer at the bottom. You can set the background of that RelativeLayout with your wallpaper theme and I guess the blue bar on top if that's static.

Then inside this top-leve RelativeLayout you have a LinearLayout with an horizontal orientation. This one will contain the three "windows" on your picture.

In that horizontal LinearLayout, first you have another LinearLayout with a vertical orientation, then a ViewPager and then another vertical LinearLayout similar to the first one (not sure how the right part is different from the left one or that is supposed to be a complete mirror... ?).

So in summary:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/top_level"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent">

    <TextView
        android:id="@+id/date_text"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:paddingTop="..." // fill in some space to offset from the top of the screen
        android:paddingRight="..." // same thing to keep it off the right edge
        />
    <LinearLayout
        android:layout_height="..." // set the height of your content in the center of your screen
        android:layout_width="fill_parent"
        android:layout_below="@+id/date_text"
        android:orientation="horizontal" >

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

            < add here some of the stuff you have above your tile like that RSS icon and so on />
            <ListView
                android:id="@+id/tile_list"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"/>
        </LinearLayout>

        <ViewPager
            android:id="@+id/pager"
            android:layout_height="fill_parent"
            android:layout_width="0dp"
            android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
            />

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

            < add here some of the stuff you have above your tile like that RSS icon and so on />
            <ListView
                android:id="@+id/tile_list"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"/>
        </LinearLayout>

    </LinearLayout>

    <SlidingDrawer
        android:id="@+id/drawer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:handle="@+id/drawer_handle"
        android:content="@+id/drawer_contents">

        <ImageView
            android:id="@+id/drawer_handle"
            android:src="@drawable/image for the tab..."
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
        </ImageView>

        <Another Layout for the content of the drawer
            android:id="@+id/drawer_contents"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        >
            ....
        </Close that layout>

    </SlidingDrawer>

</RelativeLayout>

From there, there is still quite a few things to fill up and some code to write to fill the lists of tiles (on the left and right), handle when the user click on an item, and then also display the content of the ViewPager in the middle of the screen. You'll probably want to use a GridLayout in each page there.

If you need to hide that ViewPager until the user click on some tile, you can set the visibility to hidden and change it in your code.

UPDATE Now there is more information on how this moves......

OK, so keep the top level RelativeLayout with the date and the SlidingDrawer at the bottom.

In the middle part, you can use the HorizontalListView that was put together by this person: How can I make a horizontal ListView in Android?, the code and instructions and example can be found here: http://www.dev-smart.com/archives/34

Then you need to create your own Adapter to populate that List. You can base it off the BaseAdapter (that decision is more dependent on how your images / information is stored).

In the getView function of that Adapter, can have a layout where both the collapsed and expanded views are combined into one FrameLayout, but only one is visible at a time. It will look like something like this:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" // assuming the HorizontalListView is set with the right height
    >

    <LinearLayout
        android:id="@+id/collapsed_view"
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:orientation="vertical" >

        < add here some of the stuff you have above your tile like that RSS icon and so on />
     </LinearLayout>

    <ViewPager
        android:id="@+id/expanded_view"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
        android:visibility="gone"
        />

</FrameLayout>

In the list adapter, you will need to set proper tags to the different views, so when a user clicks on one image, you know which one was clicked. To expand one view, you change the visibility of the LinearLayout to gone and the one of the ViewPager to visible.

If there should only be only one expanded at a time, you can have a state variable in your Adapter to say which one it is and set the visibility properties correctly for all the views in the list. Then you call invalidate on the ListView to have it refreshed.

There is quite a bit of code to write to do all this, but if you keep it organized, it should not be too bad....

Community
  • 1
  • 1
Matthieu
  • 16,103
  • 10
  • 59
  • 86
  • When you say "10 vertical tiles", you actually mean the tiles like on the left and right and you can scroll with them horizontally? – Matthieu Aug 23 '12 at 11:13
  • exactly. Now you are on the track ! :) – Gaurav Arora Aug 23 '12 at 11:57
  • Its still not the entire thing !! – Gaurav Arora Aug 27 '12 at 06:41
  • There is no way to do the entire thing when there is no information as to how those images are stored in your system, detail information on how you want things to move and so on. If you have a specific problem, then ask, if you did not know how to get started, I think that's already quite a bit of work here. If you need somebody else to do the work for you, there are other websites to do this (check odesk.com and the like), but you will need to provide more information too... based on the information you gave, I don't think there is much more that can be done... – Matthieu Aug 27 '12 at 07:22