Share Coding

Tutorials, Problems, Stuffs …

Tag Archives: border

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 />

Android How to disable action bar shadow?

Google Material design showing demonstration that an ActionBar always have no shadow.

未命名 Read more of this post

Android Split line or one side border

When using add border to a view, the divider between two ListView  is not always display correctly. After the list item onDraw(), divider will overlapped by the list item.

So the better way is insert a view between two view and have only 1 or 2 dp width / heigh, using drawable/mydivder.xml or @color/XXX to change the color. Read more of this post

Set Border to Android ImageView

Create a layout xml file in res/drawable:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /></shape>

 
Add the background to imageview:

android:background="@drawable/xmlFileName"

 
By programmatically:

imageview.setBackgroundResource(R.drawable.xmlFileName);