Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontal scrolling grid view

I know it is not possible in Android to scroll grid view horizontally. But what I am doing is adding image buttons dynamically inside horizontal scroll view like this:

public class HorizontalScroller extends Activity {
    static int l=0;
     private Rect mTempRect = new Rect();

    static int r1=0;
    static int t=0;
    static int b=0;
    static int x=0;
    static int y=0;
 //Button[]  b1 = new Button[100];
    ImageButton btn[][] = new ImageButton[10][10];

 //ImageButton b1 = new ImageButton(this);
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        LinearLayout rl = (LinearLayout)findViewById(R.id.widget92);

        LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

        for(int i=0;i<4;i++)
        {
            for(int j=0;j<10;j++)
            {System.out.println("helo");
        /*      l=l+100;
                r1=r1+100;
                t=t+100;
                b=b+100;*/
            //button();
       //ImageButton btn=new ImageButton(this);
   /*    Rect r = mTempRect;
           r.left=10;
           r.top=10;
           r.right=10;
           r.bottom=10;
       btn[i][j].getDrawingRect(r);*/

            //btn[i][j].setId(j);

              Rect r = mTempRect;
              r.set(0,0,0,0);
              Rect r2 = mTempRect;
              r2.set(0,20,0,20);

                btn[i][j]=new ImageButton(this);
                btn[i][j]. setBackgroundResource(R.drawable.icon);
                btn[i][j].setMinimumWidth(20);
                btn[i][j].setMinimumHeight(20);
                params1.setMargins(5, 5, 5,5); 
                rl.addView(btn[i][j],params1); 

               System.out.println("1="+btn[i][j].getTop());
               System.out.println("2="+btn[i][j].getLeft());
               System.out.println("3="+btn[i][j].getRight());
               System.out.println("4="+btn[i][j].getBottom());
            }
        }
    }
}

but I am getting all image buttons in a single line. How can I implement them in a grid like structure?

like image 225
Piyush Avatar asked Apr 20 '11 05:04

Piyush


People also ask

How do I make a horizontal scroll grid?

Therefore, you can scroll the grid horizontally by swiping left or right onto the grid header. Note: The grid element width exceeds its container width only when the width of all individual column is set by using grid's columns property. Refer to the following code example.

How do I turn on horizontal scrolling?

Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.

How do I show the horizontal scroll bar?

Click File > Options. On the Advanced tab, scroll to the Display section. Select Show horizontal scroll bar and Show vertical scroll bar, and then click OK.

How do I enable horizontal scrolling in Chrome?

Try pressing the function key, F11, twice - once to remove the toolbar, and a second time to bring it back on (together with the horizontal scroll bar). I have been having this issue (disappearing horizontal scroll bar) lately. F11 x 2 is indeed the only thing that really helps.


3 Answers

Implementing a horizontally scrolling GridView involves copying a few of the Android source code classes into your codebase (AdapterView, AbsListView, GridView, ScrollBarDrawable) and adding in code to handle the horizontal code. This is mainly copying some of the code and changing top to left, bottom to right, etc. The main reason for having to copy instead of extending is the final nature of those classes.

I implemented a horizontally scrolling GridView a while ago and finally got around to pushing to github: https://github.com/jess-anders/two-way-gridview

like image 106
Jess Anders Avatar answered Nov 17 '22 00:11

Jess Anders


You can

  • use a TableLayout inside a HorizontalScrollView, or
  • stay with your approach with an horizontal LinearLayout but adding vertical LinearLayouts instead of directly the images. E.g., adding three to four images per vertical LinearLayout in portrait, and redrawing to add only two in landscape.

I would try the TableLayout approach first.

PS1: for next time, try to remove all the non-relevant code (the less code is there, the easier is to understand what you did).

PS2: Remember that System.out is usually redirected to /dev/null and thus lost, so I strongly suggest you to use Log.d instead.

Complete example

Adapt this to the onCreate() method or wherever you need it:

public void horizontalScrollGalleryLayout () {
    HorizontalScrollView sv = new HorizontalScrollView(this);
    LinearLayout llh = new LinearLayout(this);
    llh.setOrientation(LinearLayout.HORIZONTAL);
    LinearLayout.LayoutParams layoutParamsTV = new LinearLayout.LayoutParams(40, 40);
    LinearLayout.LayoutParams layoutParamsLL = new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    for (int i=0; i<20; i++) {
        LinearLayout llv = new LinearLayout(this);
        llv.setOrientation(LinearLayout.VERTICAL);
        TestView testView1 = new TestView(this, Color.rgb(i*12, 0, 0));
        TestView testView2 = new TestView(this, true, Color.rgb(i*12, i*12, 0));
        TestView testView3 = new TestView(this, true, Color.rgb(0, i*12, 0));
        llv.addView(testView1, layoutParamsTV);
        llv.addView(testView2, layoutParamsTV);
        llv.addView(testView3, layoutParamsTV);
        llh.addView(llv, layoutParamsLL);
    }
    sv.addView(llh, layoutParamsLL);
    setContentView(sv);
}

I'm using a very simple View as an example:

public class TestView extends View {
Context context;
int color;

public TestView(Context context, int color) {
    super(context);
    this.context = context;
    this.color = color;
}

@Override
public void onDraw (Canvas canvas) {
    super.onDraw(canvas);
    this.setBackgroundColor(Color.LTGRAY);
    Paint paint = new Paint (Paint.ANTI_ALIAS_FLAG);
    paint.setColor(color);
    canvas.drawCircle(20, 20, 20, paint);
}
}
like image 37
Aleadam Avatar answered Nov 16 '22 23:11

Aleadam


There is a very easy trick.

  1. Rotate the grid view by 270 degree and set number of columns as 2.
  2. Rotate each item to 90 degree (so that the items are displayed as original orientation).

This might be useful for some!!

like image 11
abhi Avatar answered Nov 16 '22 22:11

abhi