How to change the background of GridView elements

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

How to change the background of GridView elements

Postby ftorte » Sun Feb 10, 2008 1:46 pm

Dear All,
I want to develop the same type of view we have in android for the slection of an application by using a gridview of linearlayouts. Each linear layour is composed of an image and a text.

XML code for the GridLayout

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
  4.  
  5.    id="@+id/myGrid"
  6.  
  7.         android:layout_width="fill_parent"
  8.  
  9.         android:layout_height="fill_parent"  
  10.  
  11.    android:numColumns="3"
  12.  
  13.    android:gravity="center"
  14.  
  15. />
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


XML code for the LinearLayout

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.  
  5.         android:orientation="vertical"
  6.  
  7.         android:layout_width="fill_parent"
  8.  
  9.         android:layout_height="fill_parent">
  10.  
  11.        
  12.  
  13.         <ImageView id="@+id/image"
  14.  
  15.                 android:layout_width="fill_parent"
  16.  
  17.        android:layout_height="50px"  
  18.  
  19.        android:layout_marginTop="10px"
  20.  
  21.         android:layout_marginLeft="10px"
  22.  
  23.         android:layout_marginRight="10px"
  24.  
  25.         />
  26.  
  27.    
  28.  
  29.     <TextView id="@+id/imagetext"
  30.  
  31.        android:layout_width="wrap_content"
  32.  
  33.        android:layout_height="wrap_content"
  34.  
  35.        android:textSize="15px"/>    
  36.  
  37. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4



Those XML are use by an activity that create a set of view and use an adapter to populate the gridview

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class SetupContent extends Activity {
  2.  
  3.        
  4.  
  5.         @Override    
  6.  
  7.         public void onCreate(Bundle icicle){
  8.  
  9.                 super.onCreate(icicle);        
  10.  
  11.                 setContentView(R.layout.imagegrid);        
  12.  
  13.                 GridView g = (GridView) findViewById(R.id.myGrid);
  14.  
  15.                 g.setAdapter(new ImageAdapter(this));
  16.  
  17.         }    
  18.  
  19.        
  20.  
  21.         public class CustomImageView extends LinearLayout
  22.  
  23.                 implements android.view.View.OnClickListener,android.view.View.OnFocusChangeListener{
  24.  
  25.                
  26.  
  27.                 public void onFocusChanged(View v, boolean focused) {
  28.  
  29.                         // TODO Auto-generated method stub
  30.  
  31.                         if(focused)
  32.  
  33.                                 this.setBackground(R.drawable.shape_1);
  34.  
  35.                         else
  36.  
  37.                                 this.setBackground(0x000000);
  38.  
  39.                 }
  40.  
  41.                 ImageView       image   =null;
  42.  
  43.                 TextView        label   =null;
  44.  
  45.                 View            theView =null;
  46.  
  47.                 int                     ID              =0;
  48.  
  49.                 public CustomImageView(Context context) {
  50.  
  51.                         super(context);
  52.  
  53.                         // TODO Auto-generated constructor stub
  54.  
  55.                        
  56.  
  57.                         ViewInflate inf =(ViewInflate)getSystemService(INFLATE_SERVICE);
  58.  
  59.                         theView = inf.inflate(R.layout.imageview, null, false, null);
  60.  
  61.                         image = (ImageView) theView.findViewById(R.id.image);    
  62.  
  63.                         label = (TextView) theView.findViewById(R.id.imagetext);    
  64.  
  65.  
  66.  
  67.                         label.setTypeface(Typeface.create("Tahoma", Typeface.BOLD));
  68.  
  69.  
  70.  
  71.                         addView(theView, new LinearLayout.LayoutParams(
  72.  
  73.                     LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  74.  
  75.                        
  76.  
  77.                         setOnClickListener(this);
  78.  
  79.                         this.setOnFocusChangeListener(this);
  80.  
  81.                 }
  82.  
  83.                 @Override
  84.  
  85.                 public boolean onMotionEvent(MotionEvent event) {
  86.  
  87.                         performClick();
  88.  
  89.                         requestFocus();
  90.  
  91.                         return super.onMotionEvent(event);
  92.  
  93.                 }
  94.  
  95.                 public void onClick(View arg0) {
  96.  
  97.                         // TODO Auto-generated method stub
  98.  
  99.                         Log.i("IconTextMenuClicked", "clicked");
  100.  
  101.                         label.setText("xxx");
  102.  
  103.                         SetupContent(ID);
  104.  
  105.                         arg0.requestFocus();
  106.  
  107.                 }
  108.  
  109.                 public void setImageResource(int drawable)
  110.  
  111.                 {
  112.  
  113.                         image.setImageResource(drawable);
  114.  
  115.                 }
  116.  
  117.                 public void setImageLabel(String strLabel)
  118.  
  119.                 {
  120.  
  121.                         label.setText(strLabel);
  122.  
  123.                 }
  124.  
  125.                 public void setID(int nID)
  126.  
  127.                 {
  128.  
  129.                         ID=nID;
  130.  
  131.                 }
  132.  
  133.  
  134.  
  135.         }
  136.  
  137.        
  138.  
  139.         public class ImageAdapter extends BaseAdapter {        
  140.  
  141.                 private Integer[] mThumbIds = {                
  142.  
  143.                                 R.drawable.people_add32x32,
  144.  
  145.                                 R.drawable.appointmentnew32x32,                
  146.  
  147.                                 R.drawable.people32x32,
  148.  
  149.                                 R.drawable.people_add32x32,
  150.  
  151.                                 R.drawable.appointmentnew32x32,                
  152.  
  153.                                 R.drawable.people32x32,
  154.  
  155.                                 R.drawable.people_add32x32,
  156.  
  157.                                 R.drawable.appointmentnew32x32,                
  158.  
  159.                                 R.drawable.people32x32,
  160.  
  161.                                 R.drawable.people_add32x32,
  162.  
  163.                                 R.drawable.appointmentnew32x32,                
  164.  
  165.                                 R.drawable.people32x32,
  166.  
  167.                                 R.drawable.people_add32x32,
  168.  
  169.                                 R.drawable.appointmentnew32x32,                
  170.  
  171.                                 R.drawable.people32x32,
  172.  
  173.                                 R.drawable.people_add32x32,
  174.  
  175.                                 R.drawable.appointmentnew32x32,                
  176.  
  177.                                 R.drawable.people32x32,
  178.  
  179.                                 R.drawable.people_add32x32,
  180.  
  181.                                 R.drawable.appointmentnew32x32,                
  182.  
  183.                                 R.drawable.people32x32,
  184.  
  185.                                 R.drawable.people_add32x32,
  186.  
  187.                                 R.drawable.appointmentnew32x32,                
  188.  
  189.                                 R.drawable.people32x32,
  190.  
  191.                                 R.drawable.people_add32x32,
  192.  
  193.                                 R.drawable.appointmentnew32x32,                
  194.  
  195.                                 R.drawable.people32x32
  196.  
  197.                                
  198.  
  199.                 };
  200.  
  201.                 private String[] labels = {                
  202.  
  203.                                 "Contacts",
  204.  
  205.                                 "none...",
  206.  
  207.                                 "none...",             
  208.  
  209.                                 "Contacts",
  210.  
  211.                                 "none...",
  212.  
  213.                                 "none...",             
  214.  
  215.                                 "Contacts",
  216.  
  217.                                 "none...",
  218.  
  219.                                 "none...",             
  220.  
  221.                                 "Contacts",
  222.  
  223.                                 "none...",
  224.  
  225.                                 "none...",             
  226.  
  227.                                 "Contacts",
  228.  
  229.                                 "none...",
  230.  
  231.                                 "none...",             
  232.  
  233.                                 "Contacts",
  234.  
  235.                                 "none...",
  236.  
  237.                                 "none...",             
  238.  
  239.                                 "Contacts",
  240.  
  241.                                 "none...",
  242.  
  243.                                 "none...",             
  244.  
  245.                                 "Contacts",
  246.  
  247.                                 "none...",
  248.  
  249.                                 "none...",             
  250.  
  251.                                 "Contacts",
  252.  
  253.                                 "none...",
  254.  
  255.                                 "none..."              
  256.  
  257.        
  258.  
  259.                 };
  260.  
  261.                
  262.  
  263.                 public ImageAdapter(Context c) {            
  264.  
  265.                         mContext = c;        
  266.  
  267.                 }        
  268.  
  269.                 public int getCount(){            
  270.  
  271.                         return mThumbIds.length;        
  272.  
  273.                 }        
  274.  
  275.                 public Object getItem(int position){            
  276.  
  277.                         return position;        
  278.  
  279.                 }        
  280.  
  281.                 public long getItemId(int position){            
  282.  
  283.                         return position;        
  284.  
  285.                 }        
  286.  
  287.                 public View getView(int position, View convertView, ViewGroup parent) {
  288.  
  289.                         CustomImageView i = new CustomImageView(mContext);            
  290.  
  291.                         i.setImageResource(mThumbIds[position]);  
  292.  
  293.                         i.setID(position);
  294.  
  295.                         String label = "img" + position;
  296.  
  297.                         i.setImageLabel(label);
  298.  
  299.                         return i;      
  300.  
  301.                 }        
  302.  
  303.                 private Context mContext;    
  304.  
  305.         }
  306.  
  307.  
  308.  
  309.         void SetupContent(int ID)
  310.  
  311.         {
  312.  
  313.                 switch(ID){
  314.  
  315.                 case 0:
  316.  
  317.                         SetupContactContent();
  318.  
  319.                         break;
  320.  
  321.                 }
  322.  
  323.         }
  324.  
  325.        
  326.  
  327.         void SetupContactContent()
  328.  
  329.         {
  330.  
  331.        
  332.  
  333.         }
  334.  
  335.  
  336.  
  337. }
Parsed in 0.049 seconds, using GeSHi 1.0.8.4


I want that when I move the cursor arrow... or when I click on a icon the background change from black to a countour of type shape and the focus move to this cell. Instead of this i get:

If a move with the arrow keys the background remain the standard one (blu and big sqare).
If I clik the background dont change and the focus remain on the current cell, only the label is changed to xxx

here is the shape I want to use as background.

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <shape
  4.  
  5.         xmlns:android="http://schemas.android.com/apk/res/android">
  6.  
  7.     <solid android:color="#00000000"/>
  8.  
  9.     <stroke android:width="4dp" android:color="@color/butter_dark"/>
  10.  
  11.     <gradient
  12.  
  13.         android:startColor="#9297e9"
  14.  
  15.         android:endColor="#3742e9"
  16.  
  17.        android:angle="270"/>
  18.  
  19.         <padding android:left="1dp" android:top="1dp"
  20.  
  21.            android:right="1dp" android:bottom="1dp" />
  22.  
  23.         <corners android:radius="3dp" />  
  24.  
  25. </shape
Parsed in 0.002 seconds, using GeSHi 1.0.8.4
ftorte
Freshman
Freshman
 
Posts: 9
Joined: Thu Dec 27, 2007 4:15 pm
Location: Grenoble, France

Top

Return to Other Coding-Problems

Who is online

Users browsing this forum: Google [Bot] and 18 guests