Board index » Android Coding Problems » Other Coding-Problems

Skip to content

doing something like a FlowLayout

Put your problem here if it does not fit any of the other categories.
Post a reply

doing something like a FlowLayout

Postby mago » Tue Jan 01, 2008 10:09 pm

I completely fail to create something like a FlowLayout. The closest match is the RelativeLayout, I think.
All my objects always stay in the top-left corner. Even the approach described here in the screenshot of DroidDraw has this problem.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <RelativeLayout
  2.  
  3.    xmlns:android="http://schemas.android.com/apk/res/android"
  4.  
  5.    android:layout_width="wrap_content"
  6.  
  7.    android:layout_height="wrap_content"
  8.  
  9.    >
  10.  
  11.  
  12.  
  13. <ImageButton id="@+id/button1"
  14.  
  15.    android:layout_width="wrap_content"
  16.  
  17.    android:layout_height="wrap_content"
  18.  
  19. />
  20.  
  21. <ImageButton id="@+id/button2"
  22.  
  23.    android:layout_width="wrap_content"
  24.  
  25.    android:layout_height="wrap_content"
  26.  
  27.    android:layout_alignParentTop="true"
  28.  
  29.    android:layout_alignParentLeft="true"
  30.  
  31. />
  32.  
  33.  
  34.  
  35. </RelativeLayout>
  36.  
  37.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         ImageButton button = (ImageButton) findViewById(R.id.button1);
  2.  
  3.         button.setImageResource(R.drawable.icon);
  4.  
  5.         button = (ImageButton) findViewById(R.id.button2);
  6.  
  7.         button.setImageResource(R.drawable.icon);
  8.  
  9.  
Parsed in 0.030 seconds, using GeSHi 1.0.8.4


I tried a lot of alternatives like setting up the Layout-content programatically,
The closest match of something that worked, was a TableLayout. But I want a layout, that fills up the width of a display.

What makes my buttons flow?
mago
Freshman
Freshman
 
Posts: 8
Joined: Thu Dec 27, 2007 5:56 pm
Location: Germany
Top
Top

Postby cabernet1976 » Wed Jan 02, 2008 7:01 am

Design the GUI is really a not easy work in Android.
I am not clear your issue very much, but if you want the button fills up the width of a display. the layout_width should be
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. fill_parent
Parsed in 0.000 seconds, using GeSHi 1.0.8.4
Upload2Flickr's blog: http://upload2flickr.blogspot.com
cabernet1976
Senior Developer
Senior Developer
 
Posts: 154
Joined: Fri Nov 16, 2007 2:34 am
Location: China
Top

Postby mago » Wed Jan 02, 2008 9:24 am

I already tried that. If I set layout_width to fill_parent, then the button is expanded to the width of the display. The basic problem remains the same. All buttons are positioned stacked at the same origin.
mago
Freshman
Freshman
 
Posts: 8
Joined: Thu Dec 27, 2007 5:56 pm
Location: Germany
Top

Postby plusminus » Thu Jan 03, 2008 12:57 pm

Hello mago,

you need to define the other Views a View should be relative to as an attribute, like:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <RelativeLayout
  3.  
  4.     xmlns:android="http://schemas.android.com/apk/res/android"
  5.  
  6.    android:orientation="horizontal"
  7.  
  8.    android:layout_width="fill_parent"
  9.  
  10.    android:layout_height="fill_parent"
  11.  
  12.    >
  13.  
  14.     <TextView id="@+id/password_text"
  15.  
  16.     android:text = "password:"  
  17.  
  18.     android:layout_centerHorizontal="true"  
  19.  
  20.     android:layout_width="wrap_content"
  21.  
  22.     android:layout_height="wrap_content" />
  23.  
  24.      <Button id="@+id/login_button"
  25.  
  26.          android:text="Login!"
  27.  
  28.          android:layout_width="wrap_content"
  29.  
  30.          android:layout_height="wrap_content"
  31.  
  32.          android:layout_centerHorizontal="true"
  33.  
  34.          android:layout_below="@+id/txt_password" />
  35.  
  36. </RelativeLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


Example taken from :src: here (click).

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany
Top

Postby mago » Thu Jan 03, 2008 11:38 pm

Great!
This reference to the previous view was missing. For my case it has to be: android:layout_toRight.

But now I am stuck again. I worked on the XML-layout just to prove the feasibility of this layout-strategy.

I need to set up some content programmatic. Now I fail to define this reference.

Here is what I did so far:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package mago.android.flickr;
  2.  
  3.  
  4.  
  5. import java.io.IOException;
  6.  
  7. import java.net.HttpURLConnection;
  8.  
  9. import java.net.MalformedURLException;
  10.  
  11. import java.net.URL;
  12.  
  13.  
  14.  
  15. import android.app.Activity;
  16.  
  17. import android.graphics.Bitmap;
  18.  
  19. import android.graphics.BitmapFactory;
  20.  
  21. import android.os.Bundle;
  22.  
  23. import android.util.Log;
  24.  
  25. import android.widget.ImageButton;
  26.  
  27. import android.widget.RelativeLayout.LayoutParams;
  28.  
  29.  
  30.  
  31. public class LayoutDemo extends Activity {
  32.  
  33.     String[] urlList = {
  34.  
  35.         "http://farm1.static.flickr.com/23/24760921_bb7d2887d4_s.jpg",
  36.  
  37.         "http://farm1.static.flickr.com/9/13482809_ff6b656dda_s.jpg",
  38.  
  39.         "http://farm1.static.flickr.com/72/214374494_d34d1ab77c_s.jpg",
  40.  
  41.         "http://farm1.static.flickr.com/120/281432030_ec8185d2f4_s.jpg",
  42.  
  43.         "http://farm1.static.flickr.com/23/29766757_6417c1c308_s.jpg",
  44.  
  45.         "http://farm1.static.flickr.com/10/13340408_9c3c2a7891_s.jpg",
  46.  
  47.         "http://farm1.static.flickr.com/12/17668936_203a8690f7_s.jpg",
  48.  
  49.         "http://farm1.static.flickr.com/90/276238092_56a09356ee_s.jpg"
  50.  
  51.     };
  52.  
  53.    
  54.  
  55.     public void onCreate(Bundle icicle) {
  56.  
  57.         super.onCreate(icicle);
  58.  
  59.                 setContentView(R.layout.layout_demo);
  60.  
  61.                 for (int i = 0; i < urlList.length; i++) {
  62.  
  63.             addImageButton(urlList[i],(i+1));
  64.  
  65.                 }
  66.  
  67.         }
  68.  
  69.  
  70.  
  71.     private void addImageButton(String urlStr, int buttonId) {
  72.  
  73.         ImageButton imgButton = new ImageButton(this);
  74.  
  75.         imgButton.setId(buttonId);
  76.  
  77.         LayoutParams lp = new LayoutParams(
  78.  
  79.             LayoutParams.WRAP_CONTENT,
  80.  
  81.             LayoutParams.WRAP_CONTENT
  82.  
  83.         );
  84.  
  85.         if (buttonId > 0) {
  86.  
  87.             lp.addRule(
  88.  
  89.                 android.widget.RelativeLayout.ALIGN_WITH_PARENT_RIGHT,
  90.  
  91.                 (buttonId - 1)
  92.  
  93.             );
  94.  
  95.         }
  96.  
  97.         try {
  98.  
  99.             URL url = new URL(urlStr);
  100.  
  101.             HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
  102.  
  103.             Bitmap image = BitmapFactory.decodeStream(urlConnection.getInputStream());
  104.  
  105.             imgButton.setImageBitmap(image);
  106.  
  107.             addContentView(imgButton, lp);
  108.  
  109.             Log.e(LayoutDemo.class.getName(), "add "+ urlStr);
  110.  
  111.         } catch (MalformedURLException e) {
  112.  
  113.                 showAlert("MalformedURLException", e.getMessage() , "Ok", true);
  114.  
  115.         } catch (IOException e) {
  116.  
  117.                 showAlert("IOException", e.getMessage() , "Ok", true);
  118.  
  119.         }
  120.  
  121.     }  
  122.  
  123. }
  124.  
  125.  
Parsed in 0.040 seconds, using GeSHi 1.0.8.4


Is it addRule() on LayoutParams to set this attribute?

I tried several variants, which has mostly no effect. But it could also be an AttributeSet, given to the Constructor of LayoutParams(). They have to be pulled from XML? I don't get this. Or do I have to extend a class from AttributeSet?
mago
Freshman
Freshman
 
Posts: 8
Joined: Thu Dec 27, 2007 5:56 pm
Location: Germany
Top

Postby plusminus » Fri Jan 04, 2008 12:25 pm

Hello mago,

almost right, but i think you should the loop is "wrong".
The first time addImageButton(...,...) gets called with buttonId == 1

This condition gets true and you align to the View with ID == 0 which does not exists :!:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         if (buttonId > 0) {
  2.  
  3.             lp.addRule(
  4.  
  5.                 android.widget.RelativeLayout.ALIGN_WITH_PARENT_RIGHT,
  6.  
  7.                 (buttonId - 1)
  8.  
  9.             );
  10.  
  11.         }
Parsed in 0.033 seconds, using GeSHi 1.0.8.4

Do you have to set the ID :?:, isn't the ID valid after creation of the Button :?: I would use the generated one to prevent problems.

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany
Top
Top

Postby mago » Sun Jan 06, 2008 1:18 am

Hi plusminus!

The default buttonId is -1! The loop is not the problem. Even a higher starting-Id don't does it.

I will switch to the TableLayout. Because the RelativeLayout has a serious limitation. Although it is possible to realize the flowing behavior in an XML-based layout, the definitions have to care about the width of the widget to realize a newline. I had awt.FlowLayout in mind, as that would be able to scale itself on portrait or landscape orientation.

TableLayout has the same limitation, but it can be coded dynamically.

But maybe eventually the trick can be revealed, or the bug fixed...
mago
Freshman
Freshman
 
Posts: 8
Joined: Thu Dec 27, 2007 5:56 pm
Location: Germany
Top

Postby mago » Wed Jan 16, 2008 9:35 pm

Now I've found a solution using the TableLayout. This code trys to fill up any available width.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.  
  3.    android:orientation="vertical"
  4.  
  5.    android:layout_width="fill_parent"
  6.  
  7.    android:layout_height="fill_parent"
  8.  
  9. >
  10.  
  11.     <ScrollView
  12.  
  13.        android:layout_width="fill_parent"
  14.  
  15.        android:layout_height="fill_parent"
  16.  
  17.    >
  18.  
  19.         <TableLayout id="@+id/imageGrid"
  20.  
  21.            android:layout_width="wrap_content"
  22.  
  23.            android:layout_height="wrap_content"
  24.  
  25.        >
  26.  
  27.         </TableLayout>
  28.  
  29.     </ScrollView>
  30.  
  31. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. import java.io.IOException;
  2.  
  3. import java.net.HttpURLConnection;
  4.  
  5. import java.net.MalformedURLException;
  6.  
  7. import java.net.URL;
  8.  
  9.  
  10.  
  11. import android.app.Activity;
  12.  
  13. import android.graphics.BitmapFactory;
  14.  
  15. import android.os.Bundle;
  16.  
  17. import android.os.Handler;
  18.  
  19. import android.util.Log;
  20.  
  21. import android.widget.ImageButton;
  22.  
  23. import android.widget.TableLayout;
  24.  
  25. import android.widget.TableRow;
  26.  
  27.  
  28.  
  29. public class LayoutDemo extends Activity {
  30.  
  31.     private int viewWidth = 0;
  32.  
  33.     private int viewHeight = 0;
  34.  
  35.     private int buttonImageWidth = 75;
  36.  
  37.     private Handler mHandler = new Handler();
  38.  
  39.     String[] urlList = {
  40.  
  41.         "http://farm1.static.flickr.com/23/24760921_bb7d2887d4_s.jpg",
  42.  
  43.         "http://farm1.static.flickr.com/9/13482809_ff6b656dda_s.jpg",
  44.  
  45.         "http://farm1.static.flickr.com/72/214374494_d34d1ab77c_s.jpg",
  46.  
  47.         "http://farm1.static.flickr.com/120/281432030_ec8185d2f4_s.jpg",
  48.  
  49.         "http://farm1.static.flickr.com/23/29766757_6417c1c308_s.jpg",
  50.  
  51.         "http://farm1.static.flickr.com/10/13340408_9c3c2a7891_s.jpg",
  52.  
  53.         "http://farm1.static.flickr.com/9/13465185_051396223a_s.jpg",
  54.  
  55.         "http://farm1.static.flickr.com/21/25276474_1d7193486e_s.jpg",
  56.  
  57.         "http://farm1.static.flickr.com/12/17668936_203a8690f7_s.jpg",
  58.  
  59.         "http://farm1.static.flickr.com/46/193667084_0a152b5843_s.jpg",
  60.  
  61.         "http://farm1.static.flickr.com/109/276274827_7e8e4f096b_s.jpg",
  62.  
  63.         "http://farm1.static.flickr.com/10/13482804_6aac7b029b_s.jpg"
  64.  
  65.     };
  66.  
  67.  
  68.  
  69.     public void onCreate(Bundle icicle) {
  70.  
  71.         super.onCreate(icicle);
  72.  
  73.         viewWidth = this.getResources().getDisplayMetrics().widthPixels;
  74.  
  75.         viewHeight = this.getResources().getDisplayMetrics().heightPixels;
  76.  
  77.         setContentView(R.layout.layout_demo);
  78.  
  79.         mHandler.postDelayed(createImageGridTask, 100);
  80.  
  81.     }
  82.  
  83.  
  84.  
  85.     private Runnable createImageGridTask = new Runnable() {
  86.  
  87.         public void run() {
  88.  
  89.             createButtonGrid();
  90.  
  91.         }
  92.  
  93.     };
  94.  
  95.  
  96.  
  97.     private void createButtonGrid() {
  98.  
  99.         TableLayout grid = (TableLayout) findViewById(R.id.imageGrid);
  100.  
  101.         int buttonId = 120;
  102.  
  103.         int numColumns = (viewWidth / buttonImageWidth);
  104.  
  105.         int colNum = 0;
  106.  
  107.         TableRow row = new TableRow(this);
  108.  
  109.         for (int i = 0; i < urlList.length; i++) {
  110.  
  111.             try {
  112.  
  113.                 if (colNum == 0) {
  114.  
  115.                     row = new TableRow(this);
  116.  
  117.                 }
  118.  
  119.                 row.addView(
  120.  
  121.                     getImageButton(urlList[i], buttonId++),
  122.  
  123.                     new TableRow.LayoutParams()
  124.  
  125.                 );
  126.  
  127.                 Log.e(LayoutDemo.class.getName(), "add " + urlList[i]);
  128.  
  129.                 if (++colNum == numColumns || i == urlList.length - 1) {
  130.  
  131.                     Log.e(LayoutDemo.class.getName(), "add row");
  132.  
  133.                     grid.addView(row, new TableLayout.LayoutParams());
  134.  
  135.                     grid.postInvalidate();
  136.  
  137.                     grid.forceLayout();
  138.  
  139.                     colNum = 0;
  140.  
  141.                 }
  142.  
  143.             } catch (MalformedURLException e) {
  144.  
  145.                 showAlert("MalformedURLException", e.getMessage() , "Ok", true);
  146.  
  147.             } catch (IOException e) {
  148.  
  149.                 showAlert("IOException", e.getMessage() , "Ok", true);
  150.  
  151.             }
  152.  
  153.         }
  154.  
  155.     }
  156.  
  157.  
  158.  
  159.     private ImageButton getImageButton(String urlStr, int buttonId)
  160.  
  161.       throws MalformedURLException, IOException {
  162.  
  163.         ImageButton imgButton = new ImageButton(this);
  164.  
  165.         imgButton.setId(buttonId);
  166.  
  167.  
  168.  
  169.         URL url = new URL(urlStr);
  170.  
  171.         HttpURLConnection urlConnection =
  172.  
  173.             (HttpURLConnection) url.openConnection();
  174.  
  175.         imgButton.setImageBitmap(
  176.  
  177.             BitmapFactory.decodeStream(
  178.  
  179.                 urlConnection.getInputStream()
  180.  
  181.             )
  182.  
  183.         );
  184.  
  185.         return imgButton;
  186.  
  187.     }
  188.  
  189. }
  190.  
  191.  
Parsed in 0.050 seconds, using GeSHi 1.0.8.4
Attachments
Bildschirmfoto2.png
Bildschirmfoto2.png (105.84 KiB) Viewed 6972 times
Bildschirmfoto1.png
Bildschirmfoto1.png (114.04 KiB) Viewed 6972 times
mago
Freshman
Freshman
 
Posts: 8
Joined: Thu Dec 27, 2007 5:56 pm
Location: Germany
Top
Top
Post a reply

Return to Other Coding-Problems

Who is online

Users browsing this forum: No registered users and 10 guests

Board index The team • Delete all board cookies • All times are UTC + 1 hour