Adding an Image to Button without draw able left /right/Image View
Hi Folks, In this blog i am going to take you to the interesting way of adding an image right next to the button text without any draw able right/left/Image view and it was completely customized and fits to all screen. It will be useful for designing the pages Sign-in,Sign-up,proceed button…etc.
Let’s take a quick look…
Source Code:
- Create an xml file in drawable/activity_customborder.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”rectangle” >
<gradient android:angle=”270″ />
<stroke
android:width=”2px”
android:color=”#000000″ />
</shape>
- Create a main layout in res/activity_mainactivity.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayoutxmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”#ffffff”
android:focusable=”true”
android:focusableInTouchMode=”true”
android:gravity=”center”
android:orientation=”vertical” >
<RelativeLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” >
<EditText
android:id=”@+id/et_text”
android:layout_width=”fill_parent”
android:layout_height=”50dp”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginLeft=”30dp”
android:layout_marginRight=”30dp”
android:layout_marginTop=”20dp”
android:background=”@drawable/activity_customborder”
android:editable=”false”
android:ems=”10″
android:focusable=”true”
android:focusableInTouchMode=”false” />
<TextView
android:id=”@+id/txt_view”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignBaseline=”@+id/et_text”
android:layout_alignBottom=”@+id/et_text”
android:layout_centerHorizontal=”true”
android:text=”Button1″
android:textColor=”#000000″ />
<RelativeLayout
android:id=”@+id/rl_Layout_user”
android:layout_width=”50dp”
android:layout_height=”50dp”
android:layout_alignRight=”@+id/txt_view”
android:layout_centerInParent=”true”
android:layout_marginRight=”45dp” >
<Button
android:id=”@+id/img_btn_one”
android:layout_width=”30dp”
android:layout_height=”30dp”
android:layout_alignParentRight=”true”
android:layout_marginRight=”14dp”
android:layout_marginTop=”20dp”
android:background=”@drawable/your_image” />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” >
<EditText
android:id=”@+id/et_Userfield”
android:layout_width=”fill_parent”
android:layout_height=”50dp”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:layout_marginLeft=”30dp”
android:layout_marginRight=”30dp”
android:layout_marginTop=”20dp”
android:background=”@drawable/activity_customborder”
android:editable=”false”
android:ems=”10″
android:focusable=”true”
android:focusableInTouchMode=”false” />
<TextView
android:id=”@+id/tv_view”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignBaseline=”@+id/et_Userfield”
android:layout_alignBottom=”@+id/et_Userfield”
android:layout_centerHorizontal=”true”
android:text=”Button2″
android:textColor=”#000000″ />
<RelativeLayout
android:id=”@+id/rl_Layout_field”
android:layout_width=”50dp”
android:layout_height=”50dp”
android:layout_alignRight=”@+id/tv_view”
android:layout_centerInParent=”true”
android:layout_marginRight=”48dp” >
<Button
android:id=”@+id/img_btn_two”
android:layout_width=”30dp”
android:layout_height=”30dp”
android:layout_alignParentRight=”true”
android:layout_marginRight=”14dp”
android:layout_marginTop=”20dp”
android:background=”@drawable/your_image” />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Thats it folks…..