Android horizontal categories view with images

Question

I am implementing a horizontal scrollview, the items of which contain an ImageView and a Textview

This is my Main activity:

    public class MainActivity extends Activity implements OnClickListener{
    List elementlist;
    LinearLayout layout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        elementlist=new ArrayList<Element>();

        elementlist.add(new Element("Item 1", "p1"));
        elementlist.add(new Element("Item 2", "p2"));
        elementlist.add(new Element("Item 3", "p3"));
        elementlist.add(new Element("Item 4", "p4"));
        elementlist.add(new Element("Item 5", "p5"));

        layout=(LinearLayout)findViewById(R.id.lay);


        populate_list();

    }

    private void populate_list()
    {

        Iterator<Element> i=elementlist.iterator();
        while(i.hasNext())
        {
            Element e= (Element)i.next();

            LayoutInflater inflater=(LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE);
            View v=inflater.inflate(R.layout.list_element, null);

            ImageView iw=(ImageView)v.findViewById(R.id.imageView1);
            TextView tw=(TextView)v.findViewById(R.id.textView1);
            iw.setImageDrawable(getResources().getDrawable(getResources().getIdentifier(e.getImagename(), "drawable", this.getPackageName())));
            tw.setText(e.getDisplayname());

            layout.addView(v);
        }



    }   
}

Element Class:

public class Element {
private String displayname;
private String imagename;
public Element(String displayname, String imagename) {
    this.displayname = displayname;
    this.imagename = imagename;
}

public String getDisplayname() {
    return displayname;
}

public String getImagename() {
    return imagename;
}}

activity_main.xml:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

        <LinearLayout
            android:id="@+id/lay"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" >
        </LinearLayout>
    </HorizontalScrollView>

</RelativeLayout>

And listelement.xml:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_centerHorizontal="true"
        android:background="#000000"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"
        android:orientation="vertical" >


        <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#ffffff" />


    </LinearLayout>

</RelativeLayout>

Now, My scenario is that i have two requirements:

While scrolling the size of the list should reduce (as in the case of gallery of nokia N72, N95 etc)
After the scrolling is finished, the list should automatically jump to the nearest item and size again increases, i.e the width of that item fits in the screen width or atleast comes in center.

How can i meet my requirements ?

I want to exactly do like this

While the layout is static

While the user is scrolling, it should look like this:

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

From your question, I assumed Reduction in size need not be proportional to the displacement i.e. you have 1 bigger size and 1 smaller size

Moving ahead with my assumption, I suggest you to go through the question- Complete Working Sample of the Gmail Three-Fragment Animation Scenario? which will show you four implementations dealing with the resizing animation you require

edited May 23 '17 at 11:56

Community

1
1

answered Dec 19 '13 at 18:43

raghavsood33

749
7
17

Actually yeah, It need not to be exactly proportional, but I require a gradual scaling. – gaurav414u Dec 22 '13 at 07:59
I have implemented this in a vertical Custom ListView by using some matrix transformation and mathematics. In that case scaling and rotation is proportional to the distance of a child from the list Center, and it looks quite cool. – gaurav414u Dec 22 '13 at 08:01

Android horizontal categories view with images

1 Answers1