Share Coding

Tutorials, Problems, Stuffs …

Tag Archives: selector

Android Custom button with icon, selector, rounded corner, border

In your activity.xml, simply, use the drawable/selector.xml as your Button background
A customize button which can control icon size to prevent ‘icon too big’ on some device.

<LinearLayout
        android:id="@+id/btnConfirm"
        style="@style/customTopBarButton"
        android:layout_width="130dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="3dp"
        android:layout_marginTop="3dp"
        android:background="@drawable/btn_topbar_selector"
        android:clickable="true"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imgIcon"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_action_upload" />

        <TextView
            android:id="@+id/txtDesc"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:autoText="false"
            android:background="@null"
            android:gravity="center"
            android:maxLines="1"
            android:minLines="1"
            android:text="@string/upload"
            android:textColor="@color/primary_text_title"
            android:textSize="@dimen/font_size_title" />
    </LinearLayout>

What is selector?  Custom background with click effect.

Selector help you to make corners, border , for a view.
Also, it provide the different color background when it is ‘pressed’ / ‘focused’.
The selector file, res/drawable/selector.xml, you can remove corners tag if you don’t want rounded corner.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- default, disabled -->
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="20dip" />
            <stroke android:width="1dip" android:color="@color/divider" />
            <gradient android:angle="-90" android:endColor="@color/accent" android:startColor="@color/accent" />
        </shape>
    </item>
    <!-- pressed -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="20dip" />
            <stroke android:width="1dip" android:color="@color/divider" />
            <gradient android:angle="-90" android:endColor="@color/accent_pressed" android:startColor="@color/accent_pressed" />
        </shape>
    </item>
    <!-- focus -->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="20dip" />
            <stroke android:width="1dip" android:color="@color/divider" />
            <solid android:color="@color/accent_pressed" />
        </shape>
    </item>
    <!-- default -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="20dip" />
            <stroke android:width="1dip" android:color="@color/divider" />
            <gradient android:angle="-90" android:endColor="@color/accent" android:startColor="@color/accent" />
        </shape>
    </item>
</selector>

Can I use a drawable for default status?

 <item 
    android:state_enabled="false" 
    android:drawable="@drawable/btn_topbar_pressed />
Advertisements

How to improve your jQuery

1. Use unique ‘id’ when selecting (Fastest)

$('#btnTest'); //Correct
$('input#btnDiv'); //Wrong
$('#btnDiv #btnTest'); //Wrong

 
2. Use ‘tag’ before select ‘class’

$('input.setOfButton');

 
3. One select to do all works

// Correct
$('#btnTest')
	.val('Test')
	.css('color', 'red');
	.show();

// Wrong
$('#btnTest').val('Test');
$('#btnTest').css('color', 'red');
$('#btnTest').show();

 
4. Reduce append times

// Correct
var appendHTML = '';
for(var i=0; i<10; i++) {
	appendHTML += '<p>' + i + '</p>';
}
$('#divTest').append(appendHTML);

// Wrong
var $divTest = $('#divTest');
for(var i=0; i<10; i++) {
	$divTest.append('<p>' + i + '</p>');
}