Android Custom button with imageview and textview inside?

Question

I\'m looking to create a custom button. This button ideally would have an image on the left and a textview on the right. How would I accomplish this?

Answer 1

You can do this by using NoboButton

Simple and fast way to create android button with icon, radius, background

Library url https://github.com/alex31n/NoboButton

Screenshot https://raw.githubusercontent.com/alex31n/NoboButton/master/Assets/button_screenshot.jpg

Answer 2

The fastest way

Create clickable View with Button drawable as background that contains ImageView and TextView.

<RelativeLayout
    android:clickable="true"
    android:background="@android:drawable/btn_default"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/image"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@android:drawable/ic_input_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </ImageView>
    <TextView
        android:id="@+id/text"
        android:text="Sample text"
        android:textAppearance="?android:attr/textAppearanceButton"
        android:layout_toRightOf="@id/image"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></TextView>
</RelativeLayout>

Other way

Create your own class, extend RelativeLayout, set content view as above, add custom methods to set text, image etc. and that's all. Use your custom layout.

Answer 3

In Xml layout use this drawable layout options and get simple layouts.The following line gives the image at the left side of the text.

android:drawableLeft="@drawable/image"

Answer 4

you may to use such code for that task:

<Button
 android:layout_width="fill_parent"
 android:layout_height="50dp"
 android:id="@+id/btnLogin"
 android:text="@string/text"
 android:gravity="center"
 android:drawableLeft="@drawable/your_image"
 android:background="@drawable/login"/> // this is for nice background - *.9.png

Answer 5

If you want to write code to do this, use setCompoundDrawables() of the Button class to decide where the drawable should appear relative to text. Look for the API for more details.

Answer 6

Create a xml with the Layout you want, xreate a drawable which look like you want the Button to look, add the drawable as background to Linear Layout and inflate the xml to a custom view.

Example drawable:

  <?xml version="1.0" encoding="utf-8"?> 
  <selector xmlns:android="http://schemas.android.com/apk/res/android">     
<item android:state_pressed="true" >         
    <shape>             
        <solid android:color="#f3ae1b" />             
        <stroke android:width="1dp" android:color="#bb6008" />             
        <corners android:radius="3dp" />             
        <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />         
    </shape>     
</item>     
<item>         
    <shape>             
        <gradient 
            android:startColor="#f3ae1b" 
            android:endColor="#bb6008" 
            android:angle="270" />             
        <stroke 
            android:width="1dp" 
            android:color="#bb6008" />             
        <corners 
            android:radius="4dp" />             
        <padding 
            android:left="10dp" 
            android:top="10dp" 
            android:right="10dp" 
            android:bottom="10dp" />         
    </shape>     
</item> 
  </selector> 

Edit: Code to inflate

private LayoutInflater mInflater;
mInflater = LayoutInflater.from(this);
public LinearLayout yourButton;
yourButton = (LinearLayout)  mInflater.inflate(R.xml.yourButton, null);