Image & Text-Only Buttons

Tutorials with advanced 'difficulty' and more Lines of Code.

Image & Text-Only Buttons

Postby biosopher » Thu May 01, 2008 12:30 am

I just crated this new tutorial. It's very simple but I've seen many screenshots of applications that could use it. So even though the tutorial isn't advanced, I'm adding it here as well as I know many advanced developers might not look under the "novice" tutorials section.

So how will this tutorial help my UI?

Buttons that display as simple text or as images are basic elements of any application. By following the two steps below, these buttons can be easily created with Android by simply extending the current Button and ImageButton classes.

Here are examples of what your new buttons could look like:
Image


You can see the tutorial here: http://blog.pocketjourney.com

Cheers,
Biosopher
biosopher
Developer
Developer
 
Posts: 26
Joined: Sat Mar 15, 2008 8:14 pm
Location: San Francisco, California

Top

Postby cadlg » Fri May 02, 2008 3:47 pm

Hi, acopernicus.
Since in your blog you asked for somebody who knows how to pass & retrieve custom XML attributes, here are my 2 cents.

I have a custom view called ValueButton, which is basically an ImageButton with a value.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class ValueButton extends ImageButton {
  2.  
  3.         private String mValue;
  4.  
  5.        
  6.  
  7.         public ValueButton (Context context, String value)
  8.  
  9.         {
  10.  
  11.                 super(context);
  12.  
  13.                 mValue = value;
  14.  
  15.         }
  16.  
  17.        
  18.  
  19.         public ValueButton (Context context, AttributeSet attrs,Map inflateParams) {
  20.  
  21.                 super(context, attrs, inflateParams);
  22.  
  23.         Resources.StyledAttributes a = context.obtainStyledAttributes(attrs,
  24.  
  25.                 R.styleable.ValueButton);
  26.  
  27.         String s = a.getString(R.styleable.ValueButton_value);
  28.  
  29.         if (s != null)
  30.  
  31.             setValue(s.toString());
  32.  
  33.         }
  34.  
  35.        
  36.  
  37.         public String getValue() {
  38.  
  39.                 return mValue;
  40.  
  41.         }
  42.  
  43.         public void setValue(String value) {
  44.  
  45.                 mValue = value;
  46.  
  47.         }
Parsed in 0.032 seconds, using GeSHi 1.0.8.4


In /res/values I created a file called attrs.xml

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <resources>
  2.  
  3.      <declare-styleable name="ValueButton">
  4.  
  5.         <attr name="value" />
  6.  
  7.     </declare-styleable>
  8.  
  9. </resources>
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


and in layout, I use my ValueButton this way:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.                 <LinearLayout
  2.  
  3.                     xmlns:app="http://schemas.android.com/apk/res/com.cadlg.android.calcdroid"  <!--  Here you tell android where to look for your app xml parameters (i.e. your package) -->  
  4.  
  5.                     android:id="@+id/first"
  6.  
  7.                     android:orientation="horizontal"
  8.  
  9.                     android:layout_width="fill_parent"
  10.  
  11.                     android:layout_height="wrap_content"
  12.  
  13.  
  14.  
  15.                         <com.cadlg.android.calcdroid.ValueButton
  16.  
  17.                                 android:id="@+id/divide"
  18.  
  19.                                 android:layout_width="fill_parent"
  20.  
  21.                                 android:layout_height="wrap_content"
  22.  
  23.                                 android:scaleType="centerCrop"
  24.  
  25.                                 app:value="/"                                                   <!-- and here is where you set the custom parameter -->
  26.  
  27.                                 android:src="@drawable/divide"/>
  28.  
  29.                 ...
  30.  
  31.                 </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


summarizing:

1) In attrs.xml I declare the custom xml parameters for my custom widget,
2) in ValueButton class I implement a constructor which inflate the view based on the xml parameters (the second constructor) and retrieve the custom parameter,
3) and in layout I use the custom parameter as "app:<custom_parameter>="..."

I hope I did not forget anything...

Regards,

cadlg
cadlg
Experienced Developer
Experienced Developer
 
Posts: 84
Joined: Wed Feb 20, 2008 12:33 am
Location: Guatemala

Postby biosopher » Fri May 02, 2008 4:35 pm

This is awesome!

I love the power of community.

Thanks cadlg. I'll add udpate the tutorial with this information. Heck...I may make a quick tutorial on it as it's so useful.

Best,
Anthony
biosopher
Developer
Developer
 
Posts: 26
Joined: Sat Mar 15, 2008 8:14 pm
Location: San Francisco, California

Postby biosopher » Fri May 02, 2008 9:25 pm

The original tutorial (#4) is now updated along with this new tutorial which captures the info cadlg just gave me:

http://blog.pocketjourney.com/2008/05/02/android-tutorial-42-passing-custom-variables-via-xml-resource-files

Thanks again, cadlg.

Anthony
biosopher
Developer
Developer
 
Posts: 26
Joined: Sat Mar 15, 2008 8:14 pm
Location: San Francisco, California

Postby cadlg » Fri May 02, 2008 9:51 pm

Wow Anthony, you did a great job...
You explained it in a much clearer way than I did...

... and, I liked the tutorial's introduction :D

cadlg
cadlg
Experienced Developer
Experienced Developer
 
Posts: 84
Joined: Wed Feb 20, 2008 12:33 am
Location: Guatemala

Top

Return to Advanced Tutorials

Who is online

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