CODEWITHSUNDEEP
androidandroid-buttonmaterial-components-android
Ola Ekstrand
Ola Ekstrand

Reputation: 13

Creating a button with icon in android

I am trying to create a button with centered icon and text as the example: Button with icon above text

I've tried using a Button with drawableTop, but the centering of the icon and text doesn't scale well on different device screens. Is it better to use a constraintlayout as button? Seems like there should be a better way. Any ideas?

Upvotes: 1

Views: 850

Answers (3)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363815

You can use a MaterialButton.

Only icon:

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.App.Button.OutlinedButton.IconOnly"
        app:icon="@drawable/..."/>

with:

<style name="Widget.App.Button.OutlinedButton.IconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">48dp</item>
    <item name="android:minHeight">48dp</item>
</style>

enter image description here

or icon + text:

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:iconGravity="top"
        android:text="BUTTON"
        app:icon="@drawable/..."/>

enter image description here

Upvotes: 3

Darshan
Darshan

Reputation: 38

There are lots of way you can use it, here I am attaching you code and image please check it.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#10273c"
    android:gravity="center"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/round_corner_purple"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="20dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:src="@drawable/ic_call" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Contact"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/round_corner_purple"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="20dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@null"
            android:src="@drawable/ic_dialpad" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Code"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

Drawable file : round_corner_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="15sp">

    <stroke android:width="1dp" android:color="#53545b"/>
    <solid android:color="#10273c"/>

    <corners
        android:radius="10dp"/>


</shape>

enter image description here

Notes Please add text in string.xml for good practise.

Upvotes: 0

shafayat hossain
shafayat hossain

Reputation: 1129

There are lots of way to design this. I prefer using MaterialCardView. Following xml can be helpful to you.

<com.google.android.material.card.MaterialCardView
    android:id="@+id/btnCantacts"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:cardCornerRadius="7dp"
    app:strokeWidth="1dp"
    app:strokeColor="#DD7B3B"
    app:cardBackgroundColor="#1E1E1E">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_phone"/>

        <com.google.android.material.textview.MaterialTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Contacts"
            android:textColor="#FFFFFF"
            android:layout_gravity="center"/>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

Upvotes: 0

Related Questions