Image & Text-Only Buttons

biosopher · by **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:

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

Cheers,
Biosopher

cadlg · by **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

public class ValueButton extends ImageButton {
 
        private String mValue;
 
        public ValueButton (Context context, String value)
 
        {
 
                super(context);
 
                mValue = value;
 
        }
 
        public ValueButton (Context context, AttributeSet attrs,Map inflateParams) {
 
                super(context, attrs, inflateParams);
 
        Resources.StyledAttributes a = context.obtainStyledAttributes(attrs,
 
                R.styleable.ValueButton);
 
        String s = a.getString(R.styleable.ValueButton_value);
 
        if (s != null)
 
            setValue(s.toString());
 
        }
 
        public String getValue() {
 
                return mValue;
 
        }
 
        public void setValue(String value) {
 
                mValue = value;
 
        }
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

<resources>
 
     <declare-styleable name="ValueButton">
 
        <attr name="value" />
 
    </declare-styleable>
 
</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

                <LinearLayout
 
                    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) -->   
 
                    android:id="@+id/first"
 
                    android:orientation="horizontal"
 
                    android:layout_width="fill_parent"
 
                    android:layout_height="wrap_content"
 
                        <com.cadlg.android.calcdroid.ValueButton
 
                                android:id="@+id/divide"
 
                                android:layout_width="fill_parent"
 
                                android:layout_height="wrap_content"
 
                                android:scaleType="centerCrop"
 
                                app:value="/"                                                   <!-- and here is where you set the custom parameter -->
 
                                android:src="@drawable/divide"/>
 
                ...
 
                </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

biosopher · by **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 · by **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

cadlg · by **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

cadlg

Image & Text-Only Buttons

Image & Text-Only Buttons

Who is online