Board index » Android Coding Problems » Other Coding-Problems

Skip to content

Problem with developing custom ComboBox

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

Problem with developing custom ComboBox

Postby sasuke » Sat Jan 12, 2008 3:14 am

Hello all,

Right now i'm developing a custom combobox. The GUI just like the image below
Image

If i clicked at the New Game (pic-1), the lower part of the ComboBox will appear with a downAnimation (pic-2). If i select an item from the ComboBox, the lower part will disapear with an upAnimation (pic-2) and the selected item will appear just like the pic-1.

But i got a problem :
Image
I want the lower part of the CB to disapear like pic-1 when I don't want to select any items from the ComboBox, so i just clicked anywhere outside the ComboBox in the yellow region (pic-3). Right now it's not possible to do it with my implementation of custom ComboBox. What method should i implement or override in order to do that? onFocusChanged? onFocusChangeListener?

Image
also, how to remove the yellow rectangle in pic-4 (appear when i browse the items in ComboBox). It just don't look good with a blue background with a yellow thing when i select the item :wink:



Here is my code :
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class MyComboBox extends AbsoluteLayout {
  2.         private MyImageView img;
  3.         private ImageView img2;
  4.         private ListView list;
  5.         private Context ctx;
  6.         private TextView text;
  7.         private String[] content;
  8.  
  9.         public MyComboBox(Context context,AttributeSet attr, Map inflateParams)
  10.         {
  11.                 super(context,attr,inflateParams);
  12.                 ctx = context;
  13.  
  14.                 //new AbsoluteLayout.LayoutParams(width,height,x,y));
  15.                 img = new MyImageView(ctx);
  16.                 img.setImageResource(R.drawable.up_3);
  17.                 img.setLayoutParams(new AbsoluteLayout.LayoutParams(209,39,0,0));
  18.  
  19.                 img2 = new ImageView(ctx);
  20.                 img2.setImageResource(R.drawable.down_3);
  21.                 img2.setLayoutParams(new AbsoluteLayout.LayoutParams(196,166,10,33));
  22.  
  23.                 list = new ListView(ctx);
  24.                 list.setLayoutParams(new AbsoluteLayout.LayoutParams(130,168,35,33));
  25.                 list.setOnItemClickListener(mItemClickListener);
  26.  
  27.                 text = new TextView(ctx);
  28.                 text.setLayoutParams(new AbsoluteLayout.LayoutParams(200,168,70,6));  
  29.                
  30.                 img2.setVisibility(INVISIBLE);
  31.                 list.setVisibility(INVISIBLE);
  32.                 super.addView(img);
  33.                 super.addView(img2);
  34.                 super.addView(list);
  35.                 super.addView(text);        
  36.         }
  37.  
  38.         private OnItemClickListener mItemClickListener = new OnItemClickListener()
  39.         {
  40.                 @Override
  41.                 public void onItemClick(AdapterView parent, View v, int position, long id) {
  42.                         text.setText((String)parent.getAdapter().getItem(position));
  43.                         upAnimation();
  44.                         img2.setVisibility(INVISIBLE);
  45.                         list.setVisibility(INVISIBLE);
  46.                 }
  47.         };
  48.  
  49.         public void setContent(String[] str)
  50.         {
  51.                 content = str;
  52.                 list.setAdapter(new MyListAdapter(ctx));
  53.         }
  54.  
  55.         private void upAnimation()
  56.         {
  57.                 Animation up = AnimationUtils.loadAnimation(ctx, R.anim.push_up_out);
  58.                 img2.startAnimation(up);        
  59.                 list.startAnimation(up);        
  60.         }      
  61.  
  62.         private void downAnimation()
  63.         {
  64.                 Animation down = AnimationUtils.loadAnimation(ctx, R.anim.push_down_out);
  65.                 img2.startAnimation(down);  
  66.                 list.startAnimation(down);
  67.         }
  68.  
  69.         private class MyImageView extends ImageView {
  70.         }
  71.         private class MyListAdapter extends BaseAdapter {      
  72.         }
  73.         private class MyView extends LinearLayout {
  74.         }
  75. }
  76.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


the MyImageView class :
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         private class MyImageView extends ImageView {
  2.                 public MyImageView(Context context) {
  3.                         super(context);
  4.                 }
  5.                 @Override
  6.                 public boolean onMotionEvent(MotionEvent event) {
  7.                         int action = event.getAction();
  8.                         boolean mCurDown = action == MotionEvent.ACTION_DOWN;
  9.                         if (mCurDown) {                
  10.                                 if (img2.getVisibility() == VISIBLE) {                         
  11.                                         img2.setVisibility(INVISIBLE);
  12.                                         list.setVisibility(INVISIBLE);
  13.                                         upAnimation();
  14.                                 } else {                               
  15.                                         img2.setVisibility(VISIBLE);
  16.                                         list.setVisibility(VISIBLE);
  17.                                         downAnimation();
  18.                                         list.requestFocus();
  19.                                 }
  20.                         }
  21.                         return true;
  22.                 }
  23.         }
  24.  
Parsed in 0.032 seconds, using GeSHi 1.0.8.4


the MyListAdapter class :
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         private class MyListAdapter extends BaseAdapter {
  2.                 public MyListAdapter(Context context) {
  3.                         mContext = context;
  4.                 }
  5.                 public int getCount() {
  6.                         return content.length;
  7.                 }
  8.                 public Object getItem(int position) {
  9.                         return content[position];
  10.                 }
  11.                 public long getItemId(int position) {
  12.                         return position;
  13.                 }
  14.                 public View getView(int position, View convertView, ViewGroup parent) {
  15.                         MyView sv;
  16.                         if (convertView == null) {
  17.                                 sv = new MyView(mContext, content[position]);
  18.                         } else {
  19.                                 sv = (MyView) convertView;
  20.                                 sv.setText(content[position]);
  21.                         }
  22.                         return sv;
  23.                 }
  24.                 private Context mContext;              
  25.         }
  26.  
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


and the MyView class :
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         private class MyView extends LinearLayout {
  2.                 private TextView text;
  3.                 public MyView(Context context, String str) {
  4.                         super(context);
  5.                         this.setOrientation(VERTICAL);
  6.                         text = new TextView(context);
  7.                         text.setHeight(20);
  8.                         text.setAlignment(Alignment.ALIGN_CENTER);
  9.                         text.setText(str);
  10.                         addView(text, new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  11.                 }
  12.                 public void setText(String title) {
  13.                         text.setText(title);
  14.                 }
  15.         }
  16.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4



Thank you :) :)
sasuke
Experienced Developer
Experienced Developer
 
Posts: 57
Joined: Fri Nov 30, 2007 1:25 pm
Top
Top

Postby plusminus » Tue Jan 15, 2008 12:09 am

Hello sasuke,

I would choose OnFocusChanged, because of less overhead.

With the lack of API-Documentation I only can assume this is what solves your second request:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. myListView.setDrawSelectorOnTop(false);
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


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 sasuke » Tue Jan 15, 2008 2:50 am

Hello plusminus,

the method: myListView.setDrawSelectorOnTop(false);
it's not working.. so i use this method and it's works :D
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. list.setSelector(getResources().getDrawable(R.drawable.button));
  2.  
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


the onFocusChanged doesn't work , maybe i missplaced it ?? How to detect if a component get a focus :?:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class MyComboBox extends AbsoluteLayout {
  2.      public MyComboBox(Context context,AttributeSet attr, Map inflateParams)
  3.      {
  4.           ....
  5.           list = new ListView(ctx);
  6.           list.setLayoutParams(new AbsoluteLayout.LayoutParams(130,168,35,33));
  7.           list.setOnItemClickListener(mItemClickListener);
  8.           list.setSelector(getResources().getDrawable(R.drawable.selector));
  9.           ....
  10.      }
  11.      @Override
  12.      protected void onFocusChanged(boolean focused, int direction) {
  13.                 upAnimation();
  14.                 img2.setVisibility(INVISIBLE);
  15.                 list.setVisibility(INVISIBLE);
  16.      }
  17.      private OnItemClickListener mItemClickListener = new OnItemClickListener()   {   };
  18.      public void setContent(String[] str) {   }
  19.      private void upAnimation()  {   }    
  20.      private void downAnimation()  {  }
  21.      private class MyImageView extends ImageView {  }
  22.      private class MyListAdapter extends BaseAdapter {  }
  23.      private class MyView extends LinearLayout {  }
  24. }
  25.  
Parsed in 0.039 seconds, using GeSHi 1.0.8.4


also when i using the table layout, the result is like this
Image

there's some gap between the combobox.. what i want is the 2nd combobox is placed directly below the 1st combobox.. maybe it's because the MyImageView component :?: (that i used for the lower part of the combobox)..
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:layout_width="fill_parent"
  4.    android:layout_height="fill_parent">
  5.     <TableRow>
  6.         <TextView
  7.            android:text="@string/autosave"
  8.            android:padding="3dip" />
  9.         <hnd.android.customComponent.MyComboBox id="@+id/spinnerAutosave"
  10.                 android:layout_width="fill_parent"
  11.                 android:layout_height="wrap_content"
  12.        />      
  13.     </TableRow>
  14.     <TableRow>
  15.         <TextView
  16.            android:text="@string/sound"
  17.            android:padding="3dip" />
  18.         <hnd.android.customComponent.MyComboBox id="@+id/spinnerSound"
  19.                 android:layout_width="fill_parent"
  20.                 android:layout_height="wrap_content"
  21.        />
  22.        .....
  23. </TableLayout>
  24.  
Parsed in 0.004 seconds, using GeSHi 1.0.8.4


Regards,
sasuke
sasuke
Experienced Developer
Experienced Developer
 
Posts: 57
Joined: Fri Nov 30, 2007 1:25 pm
Top

Postby snowtiger » Tue Jan 15, 2008 10:23 am

Change it from View.INVISIBLE to View.GONE, like in the ApiDemo Visibility, should help for the gap.

I use this code to check, if my buttons have focus (or not) and its working fine:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. anyView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
  2.  
  3.  
  4.  
  5.         public void onFocusChanged(View button, boolean currentFocus) {
  6.  
  7.  
  8.  
  9.                 // do something, if focus changed. Check i focus is now true or false.
  10.  
  11.  
  12.  
  13.         }
  14.  
  15. });
Parsed in 0.036 seconds, using GeSHi 1.0.8.4
snowtiger
Developer
Developer
 
Posts: 34
Joined: Fri Dec 21, 2007 10:44 am
Top

Postby sasuke » Tue Jan 15, 2008 12:39 pm

Hello snowtiger,

hm.. the View.GONE didn't work.. :cry: :cry:
*trying to add the onfocuschangelistener*

Regards,
sasuke
sasuke
Experienced Developer
Experienced Developer
 
Posts: 57
Joined: Fri Nov 30, 2007 1:25 pm
Top

Postby snowtiger » Tue Jan 15, 2008 2:26 pm

hmm, very strange. I just tried it with one of my ImageButtons and its working pretty fine. Button is gone and it reserves no space.
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. button.setVisibility(View.GONE);
Parsed in 0.035 seconds, using GeSHi 1.0.8.4

If I try your version [font=Courier New]button.setVisibility(INVISIBLE);[/font] Eclipse is giving an error.

Just try it with any other visible component, maybe any view in ur xml with this line, just for testing purpose:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. android:visibility="gone"
Parsed in 0.000 seconds, using GeSHi 1.0.8.4
snowtiger
Developer
Developer
 
Posts: 34
Joined: Fri Dec 21, 2007 10:44 am
Top
Top

Postby sasuke » Tue Jan 15, 2008 3:03 pm

Hello snowtiger,

Yeah it's works now.. my text is to large :lol: :lol:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. text.setLayoutParams(new AbsoluteLayout.LayoutParams(200,168,70,6));
  2.  
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


But i got the other problem :
Image

when i clicked the combobox, the lower combobox also moved down... :roll: how to handle it?

Regards,
sasuke
sasuke
Experienced Developer
Experienced Developer
 
Posts: 57
Joined: Fri Nov 30, 2007 1:25 pm
Top
Top
Post a reply

Return to Other Coding-Problems

Who is online

Users browsing this forum: No registered users and 6 guests

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