CODEWITHSUNDEEP
javaandroid
Skizit
Skizit

Reputation: 44842

Android Custom button with imageview and textview inside?

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?

Upvotes: 9

Views: 28695

Answers (6)

Alex Beshine
Alex Beshine

Reputation: 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

Upvotes: 0

Ramesh Akula
Ramesh Akula

Reputation: 5750

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"

Upvotes: 1

2ndlife
2ndlife

Reputation: 1376

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.

Upvotes: 0

Anton Derevyanko
Anton Derevyanko

Reputation: 3445

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

Upvotes: 10

pawelzieba
pawelzieba

Reputation: 16082

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.

Upvotes: 22

2red13
2red13

Reputation: 11227

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);

Upvotes: 4

Related Questions