Share Coding

Tutorials, Problems, Stuffs …

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

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: