Custom View/Layout Problem

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

Custom View/Layout Problem

Postby HBarker » Mon Dec 07, 2009 4:46 pm

Hi i started to post this under tutorials and I realized this morning that really it belonged over here.
This is what it looks like except my drawable sets the shape of the button. I want to turn this into a component that can be added to a standard either linear or relative layout. But I'm not quite sure how to get there from here. Can someone point me in the right direction to do that? I know I can make a custom relative view for it but I need multiples of this on the layout thats where I'm getting stuck.



Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <RelativeLayout
  4.  
  5.         xmlns:android="http://schemas.android.com/apk/res/android"
  6.  
  7.    android:layout_width="wrap_content"
  8.  
  9.    android:layout_height="wrap_content"
  10.  
  11.    >
  12.  
  13.         <Button
  14.  
  15.                 android:text="1"  
  16.  
  17.                 android:id="@+id/Button01"
  18.  
  19.                 android:layout_width="20dip"
  20.  
  21.                 android:layout_height="20dip"
  22.  
  23.                 android:background="@drawable/bitbutton"
  24.  
  25.                 android:layout_alignParentLeft="true"
  26.  
  27.                 />
  28.  
  29.         <Button  
  30.  
  31.                 android:text="2"
  32.  
  33.                 android:id="@+id/Button02"
  34.  
  35.                 android:layout_width="20dip"
  36.  
  37.                 android:layout_height="20dip"
  38.  
  39.                 android:background="@drawable/bitbutton"
  40.  
  41.                 android:layout_toRightOf="@+id/Button01"  
  42.  
  43.                 />
  44.  
  45.         <Button  
  46.  
  47.                 android:text="4"
  48.  
  49.                 android:id="@+id/Button03"
  50.  
  51.                 android:layout_width="20dip"
  52.  
  53.                 android:layout_height="20dip"
  54.  
  55.                 android:background="@drawable/bitbutton"
  56.  
  57.                 android:layout_toRightOf="@+id/Button02"  
  58.  
  59.                 />
  60.  
  61.         <Button  
  62.  
  63.                 android:text="8"
  64.  
  65.                 android:id="@+id/Button04"
  66.  
  67.                 android:layout_width="20dip"
  68.  
  69.                 android:layout_height="20dip"
  70.  
  71.                 android:background="@drawable/bitbutton"
  72.  
  73.                 android:layout_toRightOf="@+id/Button03"  
  74.  
  75.                 />
  76.  
  77.         <Button  
  78.  
  79.                 android:text="16"
  80.  
  81.                 android:id="@+id/Button05"
  82.  
  83.                 android:layout_width="20dip"
  84.  
  85.                 android:layout_height="20dip"
  86.  
  87.                 android:background="@drawable/bitbutton"
  88.  
  89.                 android:layout_toRightOf="@+id/Button04"  
  90.  
  91.                 />
  92.  
  93.         <TextView android:text="A"
  94.  
  95.                 android:id="@+id/TextView01"
  96.  
  97.                 android:layout_width="20dip"
  98.  
  99.                 android:layout_height="30dip"
  100.  
  101.                 android:typeface="serif"
  102.  
  103.                 android:textSize="30dip"
  104.  
  105.                 android:layout_centerHorizontal="true"
  106.  
  107.                 android:layout_below="@+id/Button03"
  108.  
  109.                 />     
  110.  
  111. </RelativeLayout>
Parsed in 0.006 seconds, using GeSHi 1.0.8.4
HBarker
Junior Developer
Junior Developer
 
Posts: 11
Joined: Fri Dec 04, 2009 5:54 pm

Top

Postby Droid123 » Mon Dec 07, 2009 5:23 pm

You could define your own Layout class by extending either RelativeLayout or LinearLayout or another one.

When that's done you can use that component in the XML layout builder like this:

<com.name.project.yourLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
etc.
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Postby HBarker » Mon Dec 07, 2009 5:48 pm

Oh wow I didn't realize you could bring in a Layout into another layout like that thanks I'll give that a shot!
HBarker
Junior Developer
Junior Developer
 
Posts: 11
Joined: Fri Dec 04, 2009 5:54 pm

Postby HBarker » Mon Dec 07, 2009 5:54 pm

To be sure I would take my layout and do something like this.
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <net.merxionslair.views.BitBucket
  2.  
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.  
  5.         class="net.merxionslair.views.BitBucket"
  6.  
  7.    android:layout_width="wrap_content"
  8.  
  9.    android:layout_height="wrap_content"
  10.  
  11.    >...
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


Then create my Java class of BitBucket in a package called net.merxionslair.views it would extend RelativeLayout. Then I would include it into my main layout like this.
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. <net.merxionslair.views.BitBucket
  14.  
  15.         android:id="@+id/bb01"
  16.  
  17.         android:layout_width="125px"
  18.  
  19.         android:layout_height="50px"/>
  20.  
  21. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


Does that sound right? My only concern is I dont see the contents of the orignal bitbucket.xml in layout form in the eclipse layout tab.
HBarker
Junior Developer
Junior Developer
 
Posts: 11
Joined: Fri Dec 04, 2009 5:54 pm

Postby HBarker » Mon Dec 07, 2009 6:07 pm

Ok for some reason that didn't work. I'm sure its nothing in my BitBucket Java its pretty much a skeleton class at the moment.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class BitBucket extends RelativeLayout {
  2.  
  3.  
  4.  
  5.         /**
  6.  
  7.          * @param context
  8.  
  9.          */
  10.  
  11.         public BitBucket(Context context) {
  12.  
  13.                 super(context);
  14.  
  15.                 // TODO Auto-generated constructor stub
  16.  
  17.         }
  18.  
  19.  
  20.  
  21.         /**
  22.  
  23.          * @param context
  24.  
  25.          * @param attrs
  26.  
  27.          */
  28.  
  29.         public BitBucket(Context context, AttributeSet attrs) {
  30.  
  31.                 super(context, attrs);
  32.  
  33.                 // TODO Auto-generated constructor stub
  34.  
  35.         }
  36.  
  37.  
  38.  
  39.         /**
  40.  
  41.          * @param context
  42.  
  43.          * @param attrs
  44.  
  45.          * @param defStyle
  46.  
  47.          */
  48.  
  49.         public BitBucket(Context context, AttributeSet attrs, int defStyle) {
  50.  
  51.                 super(context, attrs, defStyle);
  52.  
  53.                 // TODO Auto-generated constructor stub
  54.  
  55.         }
  56.  
  57.  
  58.  
  59.         /**
  60.  
  61.          * @param args
  62.  
  63.          */
  64.  
  65.         public static void main(String[] args) {
  66.  
  67.                 // TODO Auto-generated method stub
  68.  
  69.  
  70.  
  71.         }
  72.  
  73.  
  74.  
  75.         @Override
  76.  
  77.         protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
  78.  
  79.                 // TODO Auto-generated method stub
  80.  
  81.                
  82.  
  83.         }
  84.  
  85.  
  86.  
  87. }
Parsed in 0.033 seconds, using GeSHi 1.0.8.4


What I found is as soon as I add the fully qualified name to the XML's name everything stops displaying. If I leave it at RelativeLayout it displays in the layout window but I still dont have any way to call it into the project.
HBarker
Junior Developer
Junior Developer
 
Posts: 11
Joined: Fri Dec 04, 2009 5:54 pm

Postby Droid123 » Tue Dec 08, 2009 9:27 am

HBarker wrote:To be sure I would take my layout and do something like this.
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <net.merxionslair.views.BitBucket
  2.         xmlns:android="http://schemas.android.com/apk/res/android"
  3.         class="net.merxionslair.views.BitBucket"
  4.    android:layout_width="wrap_content"
  5.    android:layout_height="wrap_content"
  6.    >...
Parsed in 0.001 seconds, using GeSHi 1.0.8.4




I'm not sure what "class=..." does, I left it out and it works properly.

So basically it seems your approach is fine, you defined your class in code and you called it in your layout properly (with net.merxionslair.views.BitBucket instead of RelativeLayout).

Could you describe whats going wrong VS what you want to accomplish?

When you've got your layout defined in XML you could set the entire XML as base layout to an Activity with .setContentView(R.layout.yourXML). And you could get a handle to your specific component with findViewById(), exactly like you would with any other native layout/widget.

My Implementation:
My Layout:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package com.x.y.z;
  2.  
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.widget.RelativeLayout;
  6.  
  7. public class myLayout extends RelativeLayout {
  8.  
  9.         public myLayout(Context context) {
  10.                 super(context);
  11.                 // TODO Auto-generated constructor stub
  12.         }
  13.        
  14.         public myLayout(Context context, AttributeSet attrs) {
  15.                 super(context, attrs);
  16.                 // TODO Auto-generated constructor stub
  17.         }
  18.  
  19. }
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


My XML:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <com.x.y.z.myLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:layout_width="wrap_content"
  5.         android:layout_height="wrap_content">
  6.         <TextView
  7.                 android:text="TEXT"
  8.                 android:layout_width="wrap_content"
  9.                 android:layout_height="wrap_content"></TextView>
  10. </com.x.y.z.myLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


My Calling Class:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package com.x.y.z;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5.  
  6. public class myClass extends Activity {
  7.        
  8.         @Override
  9.         public void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.myXML);
  12.            
  13.         }
  14. }
  15.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


This is a very basic example but it works properly, and it shows how to use a custom Layout in your XML
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Top

Postby Droid123 » Tue Dec 08, 2009 9:36 am

This works too;

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <LinearLayout
  4.  
  5.         xmlns:android="http://schemas.android.com/apk/res/android"
  6.  
  7.         android:layout_width="wrap_content"
  8.  
  9.         android:layout_height="wrap_content">
  10.  
  11.         <TextView
  12.  
  13.                 android:text="TEXT"
  14.  
  15.                 android:layout_width="wrap_content"
  16.  
  17.                 android:layout_height="wrap_content">
  18.  
  19.         </TextView>
  20.  
  21.         <com.x.y.z.myLayout
  22.  
  23.                 android:layout_width="wrap_content"
  24.  
  25.                 android:layout_height="wrap_content">
  26.  
  27.                 <TextView
  28.  
  29.                         android:text="OTHER TEXT"
  30.  
  31.                         android:layout_width="wrap_content"
  32.  
  33.                         android:layout_height="wrap_content">
  34.  
  35.                 </TextView>
  36.  
  37.         </com.x.y.z.myLayout>
  38.  
  39. </LinearLayout>
Parsed in 0.003 seconds, using GeSHi 1.0.8.4
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Postby HBarker » Tue Dec 08, 2009 5:48 pm

Could you describe whats going wrong VS what you want to accomplish?

The screen was blank even though there were no errors. What I am trying to accomplish is a reusable component that basically works like this. It has 5 binary bits 1 2 4 8 16 that look like small radio buttons (they are for display only and will be changed at the end of each session) and a Text Field that will have a character or series of characters. What I want to be able to do is add them visually through the xml editor then initialize variables in my java class that will manipulate my bitbucket class to turn on or off bits. example... calling a method from the bit bucket class and passing in a string that represents what the binary switches should be for this bit bucket.

My options were to draw the whole thing out and assign the variables or create a reusable component. I thought that creating the reusable component would be better because I'd learn something as well as make more efficient code.

Also if I add everything to the layout manually I then have to address each of the "bits" and manipulate them individually basically at that point whats the purpose of the custom control if its not reusable.

I'll wrap back around and start it from scratch again and try the changes you indicated.
Last edited by HBarker on Tue Dec 08, 2009 6:58 pm, edited 1 time in total.
HBarker
Junior Developer
Junior Developer
 
Posts: 11
Joined: Fri Dec 04, 2009 5:54 pm

Postby HBarker » Tue Dec 08, 2009 6:11 pm

So the problem specifically comes when I create the custom component and try to include it into another view.

for instance.
This is the Custom Component XML.
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <net.merxionslair.views.Bitbucket
  4.  
  5.         xmlns:android="http://schemas.android.com/apk/res/android"
  6.  
  7.         android:layout_width="wrap_content"
  8.  
  9.         android:layout_height="wrap_content">
  10.  
  11.  
  12.  
  13.         <Button
  14.  
  15.                 android:id="@+id/Button01"
  16.  
  17.                 android:text="1"
  18.  
  19.                 android:layout_height="30dip"
  20.  
  21.                 android:layout_width="30dip"/>
  22.  
  23.         <Button
  24.  
  25.                 android:id="@+id/Button02"
  26.  
  27.                 android:text="2"
  28.  
  29.                 android:layout_height="30dip"
  30.  
  31.                 android:layout_width="30dip"
  32.  
  33.                 android:layout_toRightOf="@+id/Button01"/>
  34.  
  35.         <Button
  36.  
  37.                 android:id="@+id/Button03"
  38.  
  39.                 android:text="4"
  40.  
  41.                 android:layout_height="30dip"
  42.  
  43.                 android:layout_width="30dip"
  44.  
  45.                 android:layout_toRightOf="@+id/Button02"/>
  46.  
  47.         <Button
  48.  
  49.                 android:id="@+id/Button04"
  50.  
  51.                 android:text="8"
  52.  
  53.                 android:layout_height="30dip"
  54.  
  55.                 android:layout_width="30dip"
  56.  
  57.                 android:layout_toRightOf="@+id/Button03"/>
  58.  
  59.         <Button
  60.  
  61.                 android:id="@+id/Button05"
  62.  
  63.                 android:text="16"
  64.  
  65.                 android:layout_height="30dip"
  66.  
  67.                 android:layout_width="30dip"
  68.  
  69.                 android:layout_toRightOf="@+id/Button04"/>
  70.  
  71. </net.merxionslair.views.Bitbucket>
Parsed in 0.005 seconds, using GeSHi 1.0.8.4


When I try to call this custom component into the main.xml like this.
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. <net.merxionslair.views.Bitbucket  
  14.  
  15.    android:layout_width="fill_parent"
  16.  
  17.    android:layout_height="wrap_content"
  18.  
  19.    />
  20.  
  21. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


I get a blank screen. But if I call it directly it displays. The java class I created for this is just an empty class plus the appropriate constructors.

I'm getting the feeling that I just might be trying to do something that shouldn't be done or something. But it just makes sense that I should be able to make custom controls and distribute them. for instance if I want to make a custom spinner and market it as a replacement for the current built in one it seems like the sdk allows for that. I am just trying to accomplish a similar thing.
HBarker
Junior Developer
Junior Developer
 
Posts: 11
Joined: Fri Dec 04, 2009 5:54 pm

Postby Droid123 » Tue Dec 08, 2009 7:20 pm

Hehehe I know what went wrong, it's kinda silly though and i had to read it a few times before i noticed it.
You're including your custom empty relative layout to your main.xml.
Your layout with buttons is not called, right now its just a seperate xml file that uses the same custom relative layout.
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Postby HBarker » Tue Dec 08, 2009 7:50 pm

If I add an existing component it works by adding it like this.
SDK built in component.
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <EditText
  2.  
  3.    android:text="W"  
  4.  
  5.    android:layout_width="fill_parent"
  6.  
  7.    android:layout_height="wrap_content"
  8.  
  9.    />
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


Custom ones dont work the same way?
Custom Component
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <net.merxionslair.views.Bitbucket  
  2.  
  3.    android:layout_width="fill_parent"
  4.  
  5.    android:layout_height="wrap_content"
  6.  
  7.    />  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


Or is Component the wrong terminology?
HBarker
Junior Developer
Junior Developer
 
Posts: 11
Joined: Fri Dec 04, 2009 5:54 pm

Postby Droid123 » Tue Dec 08, 2009 10:42 pm

Concerning terminology:
Layouts are a "ViewGroup" and all other views are a "View", buttons and stuff are a "Widget". Someone plz correct me if I'm wrond here.

Concerning your code:
Your code works exactly like you've written it.

You've created a custom layout called "BitBucket", it is a completely empty RelativeLayout.
In the first XML you use your BitBucket layout as a parent Viewgroup to your buttons
and in your main.XML you use your BitBucket layout as a "component" in a normal LinearLayout.

Do you see what went wrong? You've used BitBucket twice, but these two files have nothing to do with one another.

So it makes sense that your code displays an empty screen, thats because you've included an emtpy BitBucket-layout.


Possible Solutions:
- Get a handle to the LinearLayout in main.xml in your activity (with FindViewById()).
- Use the LayoutInflator to inflate the first xml file (BitBucket with buttons)
- Call .addView on your handle
like this:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. LinearLayout parent = (LinearLayout)FindViewById(R.id.yourLinearLayout);
  3.  
  4. LayoutInflater inflater = getLayoutInflater();
  5.  
  6. myView = inflater.inflate(R.layout.yourXML, null);
  7.  
  8. parent.addView(myView);
  9.  
  10.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


that should work, but it could be something different than what you want to achieve.
You could also try to edit your BitBucket-class definition to include the buttons. I haven't tried that before but it should work in theory, could be interesting to give it a try, if you succeed plz let me know :)
Droid123
Experienced Developer
Experienced Developer
 
Posts: 77
Joined: Sat Nov 21, 2009 1:21 pm

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: Exabot [Bot] and 1 guest