CODEWITHSUNDEEP
androidxmlbutton
Adnan Quraishi
Adnan Quraishi

Reputation: 533

Android Button with two images and Text

I am trying to build the android app and need to build a button with two images and some text .

here is the example image :

enter image description here

how can i build this button in android ? any help would be appreciated .

Upvotes: 1

Views: 4010

Answers (5)

Azamat_229
Azamat_229

Reputation: 1

I face to same problem in my case below code worked ;)

            android:layout_width="370dp"
            android:layout_height="62dp"
            android:layout_marginTop="100dp"
            android:drawableLeft="@drawable/flag_us_little"
            android:drawableRight="@drawable/ic_arrow"
            android:text="English language"
            android:textAllCaps="true"
            android:textColor="@color/black"/>

Cheers!

Upvotes: 0

java_doctor_101
java_doctor_101

Reputation: 3357

Three steps:

  1. Took a screenshot of the image you provided.
  2. Places the screenshot in the drawable project of my folder and named it "background"

  3. in my layout xml file. set the image as the button background:

    <Button
android:layout_width="165dp"
android:layout_height="35dp"
android:background="@drawable/background"
android:textColor="#FFFFFF"
android:id="@+id/button"
android:paddingTop="2sp"
android:drawablePadding="-1sp"
 ></Button>

Final result:

enter image description here

Upvotes: -1

portfoliobuilder
portfoliobuilder

Reputation: 7856

Here is some code to get you started. Lets begin with the background. If that background is not provided to you and you have to create it yourself, lets create a custom_button_bg.xml file and add to your drawable folder.

custom_button_bg.xml Note: that I am just doing the basic shape for you. Adjust shadow and corner radius as you wish

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="@color/teal"
        android:startColor="@color/teal"/>
    <corners android:radius="4dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/shadow"/>
</shape>

Now simply create your layout, something like below. Just replace the src and labels.

<RelativeLayout
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:gravity="center_vertical"
    android:background="@drawable/custom_rounded_white_button">

    <ImageView
        android:id="@+id/iv_video_cam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/video_cam"/>

    <TextView
        android:id="@+id/tv_desc"
        android:layout_toRightOf="@+id/iv_video_cam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="See a Medical \nDoctor Now"/>

    <ImageView
        android:layout_toRightOf="@+id/tv_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrow"/>

</RelativeLayout>

Cheers!

Upvotes: 5

Shams Shafiq
Shams Shafiq

Reputation: 4008

You can use something like this:

     <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:drawableLeft="@drawable/video_camera"
        android:drawableRight="@drawable/right_arrow"
        android:text="See a Medical\nDoctor Now"/>

Upvotes: 1

NSTuttle
NSTuttle

Reputation: 3345

Two Options:

You can utilize setBackgroundDrawable() on your Button to set the background of the button to an image with the icons you want, then your text will appear above the background.

Or you could try and utilize android:drawableLeft="@drawable/yourimage" and/or android:drawableRight="@drawable/yourimage" in your XML file nested in your Button.

HERE you can find more information on drawableRight/Left

Upvotes: 0

Related Questions