Dynamic Widgets - Tag Cloud

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

Dynamic Widgets - Tag Cloud

Postby Vyrotek » Thu Feb 28, 2008 5:58 am

I was wondering if someone could push me into the right direction on how to create a Tag Cloud with clickable elements.

Im not sure where to start with creating dynamic Button widgets. I basically need to be able to create a lot of little buttons with dynamically sized text and be able to handle the click event on each.

Great forum btw. Many of the tutorials here have helped a ton! :)
Vyrotek
Freshman
Freshman
 
Posts: 2
Joined: Thu Feb 28, 2008 5:51 am

Top

Postby plusminus » Thu Feb 28, 2008 1:09 pm

Hello Vyrotek,

nice idea.

I gave it a short try but didn't succeed. Maybe my start helps you further.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.                 TagCloud.TagLinkImportancePair[] tlips = new TagCloud.TagLinkImportancePair[]{
  2.  
  3.                                 new TagCloud.TagLinkImportancePair("Google", Uri.parse("http://www.google.com"), 7),
  4.  
  5.                                 new TagCloud.TagLinkImportancePair("anddev", Uri.parse("http://www.anddev.org"), 15),
  6.  
  7.                                 new TagCloud.TagLinkImportancePair("heise", Uri.parse("http://www.heise.de"), 5),
  8.  
  9.                                 new TagCloud.TagLinkImportancePair("Obama", Uri.parse("http://www.barackobama.com"), 12),
  10.  
  11.                                 new TagCloud.TagLinkImportancePair("Clinton", Uri.parse("www.hillaryclinton.com"), <img src="http://www.anddev.org/images/smilies/cool.png" alt="8)" title="Cool" />,
  12.  
  13.                                 new TagCloud.TagLinkImportancePair("Wikipedia", Uri.parse("http://www.wikipedia.org/"), 7)
  14.  
  15.                 };
  16.  
  17.                 setContentView(new TagCloud(this, tlips), new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
Parsed in 0.034 seconds, using GeSHi 1.0.8.4


Unfortunately we cannot yet have a look at the SDK-Source, to see how it is done with i.e. LinearLayout. Then it would be a job of minutes.

Been trying and trying to "onLayout". Don't expect it to be right at all then... ^^
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. //Created by plusminus on 09:50:40 - 28.02.2008
  2.  
  3. package org.anddev.android.customviews;
  4.  
  5.  
  6.  
  7. import android.content.Context;
  8.  
  9. import android.content.Intent;
  10.  
  11. import android.graphics.Color;
  12.  
  13. import android.net.Uri;
  14.  
  15. import android.view.View;
  16.  
  17. import android.widget.Button;
  18.  
  19. import android.widget.LinearLayout;
  20.  
  21.  
  22.  
  23.  
  24.  
  25. public class TagCloud extends LinearLayout{
  26.  
  27.         // ===========================================================
  28.  
  29.         // Final Fields
  30.  
  31.         // ===========================================================
  32.  
  33.  
  34.  
  35.         // ===========================================================
  36.  
  37.         // Fields
  38.  
  39.         // ===========================================================
  40.  
  41.  
  42.  
  43.         Context ctx;
  44.  
  45.         Button[] tagButtons;
  46.  
  47.  
  48.  
  49.         // ===========================================================
  50.  
  51.         // Constructors
  52.  
  53.         // ===========================================================
  54.  
  55.  
  56.  
  57.         public TagCloud(Context ctx, TagLinkImportancePair[] tags) {
  58.  
  59.                 super(ctx);
  60.  
  61.                 this.ctx = ctx;
  62.  
  63.                 this.setOrientation(LinearLayout.VERTICAL);
  64.  
  65.                 this.setBackgroundColor(Color.RED);
  66.  
  67.                
  68.  
  69.                 tagButtons = new TagButton[tags.length];
  70.  
  71.                 for(int i = 0; i < tags.length; i++)
  72.  
  73.                         tagButtons[i]= new TagButton(ctx, tags[i]);
  74.  
  75.                
  76.  
  77.         }
  78.  
  79.  
  80.  
  81.         // ===========================================================
  82.  
  83.         // Getter & Setter
  84.  
  85.         // ===========================================================
  86.  
  87.  
  88.  
  89.         // ===========================================================
  90.  
  91.         // Methods from SuperClass/Interfaces
  92.  
  93.         // ===========================================================
  94.  
  95.  
  96.  
  97.         @Override
  98.  
  99.         protected void onLayout(boolean changed, int l, int t, int r, int b){          
  100.  
  101.                 int w = r - l;
  102.  
  103.                 int h = b - t;
  104.  
  105.                 int summedWidth = 1000000; /* --> Will cause a new row to be created */  
  106.  
  107.                 LinearLayout row = null;
  108.  
  109.  
  110.  
  111.                 for(Button btn : tagButtons){
  112.  
  113.                         btn.measure(w, h);
  114.  
  115.                        
  116.  
  117.                         /* Check if the new Tag-Button is bigger. */
  118.  
  119.                         if (summedWidth + btn.getWidth() > w){
  120.  
  121.                                 summedWidth = btn.getWidth(); /* First TagButton in the new row. */
  122.  
  123.  
  124.  
  125.                                 /* Create a new horizontal row. */
  126.  
  127.                                 row = new LinearLayout(ctx);
  128.  
  129.                                 row.setOrientation(LinearLayout.HORIZONTAL);
  130.  
  131.                                 row.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  132.  
  133.                                 this.addView(row);
  134.  
  135.                                 row.layout(0, 0, w, h);
  136.  
  137.                         }else{
  138.  
  139.                                 summedWidth += btn.getWidth();
  140.  
  141.                         }
  142.  
  143.                         row.addView(btn, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  144.  
  145.                         btn.layout(summedWidth, (int)(Math.random() * 100), btn.getMeasuredWidth(), btn.getMeasuredHeight());
  146.  
  147.                 }
  148.  
  149.  
  150.  
  151. //              super.onLayout(changed, l, t, r, b);
  152.  
  153.         }
  154.  
  155.  
  156.  
  157.         // ===========================================================
  158.  
  159.         // Methods
  160.  
  161.         // ===========================================================
  162.  
  163.  
  164.  
  165.         // ===========================================================
  166.  
  167.         // Inner and Anonymous Classes
  168.  
  169.         // ===========================================================
  170.  
  171.  
  172.  
  173.         static class TagLinkImportancePair{
  174.  
  175.                 public String itsTag;
  176.  
  177.                 public Uri itsLink;
  178.  
  179.                 public int itsImportance;
  180.  
  181.                 public TagLinkImportancePair(String itsTag, Uri itsLink, int itsImportance) {
  182.  
  183.                         this.itsTag = itsTag;
  184.  
  185.                         this.itsLink = itsLink;
  186.  
  187.                         this.itsImportance = itsImportance;
  188.  
  189.                 }
  190.  
  191.         }
  192.  
  193.  
  194.  
  195.         static class TagButtonClickListener implements OnClickListener{
  196.  
  197.                 Uri itsOnClickLink;
  198.  
  199.                 Context ctx;
  200.  
  201.                 TagButtonClickListener(Context context, Uri link){
  202.  
  203.                         this.ctx = context;
  204.  
  205.                         itsOnClickLink = link;
  206.  
  207.                 }
  208.  
  209.                 @Override
  210.  
  211.                 public void onClick(View arg0) {
  212.  
  213.                         Intent i = new Intent(android.content.Intent.VIEW_ACTION, this.itsOnClickLink);
  214.  
  215.                         ctx.broadcastIntent(i);
  216.  
  217.                 }
  218.  
  219.         }
  220.  
  221.  
  222.  
  223.         static class TagButton extends Button{
  224.  
  225.                 public TagButton(Context ctx, TagLinkImportancePair tlip) {
  226.  
  227.                         super(ctx);
  228.  
  229.                         this.setText(tlip.itsTag);
  230.  
  231.                         this.setOnClickListener(new TagButtonClickListener(ctx, tlip.itsLink));
  232.  
  233.                         this.setTextSize(8 + tlip.itsImportance);
  234.  
  235.                 }
  236.  
  237.         }
  238.  
  239. }
Parsed in 0.044 seconds, using GeSHi 1.0.8.4


More info about all the Layouting-Stuff can be found here:
http://code.google.com/android/referenc ... /View.html

Let us know whether you succeeded :)

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

Wow

Postby Vyrotek » Thu Feb 28, 2008 5:18 pm

That has really helped me.

From what I could tell you hit issue I was worried about... how to layout and align all different sized buttons nicely on the page.

Do you think something could be achieved using the RelativeLayout perhaps? Like have the most popular tags start in the middle and other buttons are attached to other buttons and they just expand out..? What do you think?
Vyrotek
Freshman
Freshman
 
Posts: 2
Joined: Thu Feb 28, 2008 5:51 am

Postby plusminus » Thu Feb 28, 2008 7:06 pm

Hello Vyrotek,

LinearLayout is probably the easiest, by far. (Just beacause it is harder to determine the total width using a relative layout, because everything can change, adding one single view.)

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

Re: Dynamic Widgets - Tag Cloud

Postby sweetleon » Mon May 24, 2010 11:51 am

I've built an app that does this, but found that none of Android's built-in layouts worked. Instead, I found an excellent implementation of a wrapping layout at http://www.stackoverflow.com/questions/549451/line-breaking-widget-layout-for-android.

Here's how mine looks:
Image
sweetleon
Freshman
Freshman
 
Posts: 6
Joined: Fri Jan 08, 2010 7:41 am

Re: Dynamic Widgets - Tag Cloud

Postby roye-a » Fri Apr 01, 2011 5:54 am

Do you mind sharing your code with a fellow newbie developer ?
roye-a
Once Poster
Once Poster
 
Posts: 1
Joined: Fri Apr 01, 2011 5:51 am

Top

Return to Other Coding-Problems

Who is online

Users browsing this forum: No registered users and 12 guests