CODEWITHSUNDEEP
androiduser-interfaceandroid-layout
michael
michael

Reputation: 110520

How can I create a 'Pulse' like UI for an android application

I would like to know how can I create a Pulse like app on android Here is a screenshot: http://www.firstdroid.com/2010/11/17/top-android-app-pulse-news-reader/

A number of things:

  1. It has a number of 'row's of horizontal content.
  2. Each 'row' has 'cell's of content.
  3. I can 'fling' left and right to see the horizontal content.
  4. As it reaches the end of the horizontal content, it will automatically load more content.

Thank you.

Upvotes: 5

Views: 4763

Answers (3)

ariefbayu
ariefbayu

Reputation: 21979

I just throw some quick and dirty example:

Here is your xml layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <TextView android:text="News One" android:id="@+id/textView1" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
    <HorizontalScrollView android:id="@+id/horizontalScrollView1"
        android:layout_width="wrap_content" android:layout_height="wrap_content">
        <LinearLayout android:id="@+id/linearLayout1"
            android:orientation="horizontal" android:layout_height="wrap_content"
            android:layout_width="wrap_content">
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView1"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView2"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView3"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView4"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView5"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView6"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:src="@drawable/image"
                android:layout_width="wrap_content" android:id="@+id/imageView7"
                android:layout_height="wrap_content"></ImageView>
        </LinearLayout>
    </HorizontalScrollView>

    <TextView android:text="News Two" android:id="@+id/textView2" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
    <HorizontalScrollView android:id="@+id/horizontalScrollView2"
        android:layout_width="wrap_content" android:layout_height="wrap_content">
        <LinearLayout android:id="@+id/linearLayout2"
            android:orientation="horizontal" android:layout_height="wrap_content"
            android:layout_width="wrap_content">
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView21"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView22"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView23"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView24"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView25"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:layout_width="wrap_content" android:id="@+id/imageView26"
                android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
            <ImageView android:src="@drawable/image"
                android:layout_width="wrap_content" android:id="@+id/imageView27"
                android:layout_height="wrap_content"></ImageView>
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

To make it perfect, you can add border to each image, etc,etc. But, you should get the idea from this layout.

Upvotes: 1

Yoni Samlan
Yoni Samlan

Reputation: 38065

Conceptually this is just a ScrollView containing a bunch of Gallery layouts using an infinite scrolling adapter like cwac-endless. I think with a bit of work you can probably get them all to play nicely together.

Upvotes: 2

Aaron Decker
Aaron Decker

Reputation: 558

Maybe you could use like a horizontal scrolling view with a custom layout for each element and then like load what you want in there? I dont really know just brainstorming. Sounds like it would work with that type of layout.

Upvotes: 0

Related Questions