CODEWITHSUNDEEP
javaandroidbutton
John Joe
John Joe

Reputation: 12803

Button size looked different

I want to place a button below another. But why does the size of the button look different after I add red color for the submit button ?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="2dp"
        android:orientation="horizontal"
        android:weightSum="3" >

        <Button
            android:id="@+id/addClaims1"
            android:layout_width="334dp"
            android:layout_height="61dp"
            android:drawableRight="@mipmap/claims"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="10dp"
            android:text="add claims" />

    </LinearLayout>

    <Button
        android:id="@+id/submit"
        android:background="@color/indian_red"
        android:layout_width="334dp"
        android:layout_marginLeft="15dp"
        android:layout_height="61dp"
        android:layout_below="@+id/linearLayout2"
        android:textColor="@color/white"
        android:drawableRight="@mipmap/done"
        android:text="submit" />

</RelativeLayout>

enter image description here

Between, is there a way to make the icon display near to the text ?

Upvotes: 2

Views: 78

Answers (4)

ʍѳђઽ૯ท
ʍѳђઽ૯ท

Reputation: 16976

The problem was in the android:layout_marginLeft="2dp" and also android:background="@color/indian_red".

Solution:

Give those buttons the same style like @Kartik Sharma said and then this is what that should look like after changing and setting it:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:id="@+id/addClaims1"
            android:layout_width="334dp"
            android:layout_height="61dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="10dp"
            android:text="add claims" />

    </LinearLayout>

    <Button
        android:id="@+id/submit"
        android:layout_width="334dp"
        android:layout_height="61dp"
        android:layout_below="@+id/linearLayout2"
        android:layout_marginStart="15dp"
        android:text="submit"
        android:textColor="@color/white" />

</RelativeLayout>

is there a way to make the icon display near to the text ?

Yes.check this:

<Button
        android:id="@+id/btncat"
        android:layout_width="300dp"
        android:layout_height="55dp"
        android:layout_below="@+id/slider"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:drawableStart="@drawable/ic_category"
        android:gravity="center"
        android:paddingEnd="40dp"
        android:paddingStart="20sp"
        android:text="@string/category"
        android:textColor="#FFFFFF" />

Result:

enter image description here

Just play with these two:

android:paddingEnd="40dp"
android:paddingStart="20sp"

Upvotes: 1

geNia
geNia

Reputation: 1025

That is because the original button by default uses a background image that has transparent space near the border. You can also notice that the corners are rounded.

The buttons themselves are the same size actually.

In your case you should set a background to both images. You can also create images for that.

You can also notice that your "drawableRight" has margins on the first button and doesn't have them on the second. It is a thing called "Nine-path drawable" in Android.

Upvotes: 3

Kartik Sharma
Kartik Sharma

Reputation: 142

Instead of setting background color of the button, you must assign a style to it. Make sure the resolution of both of the drawables are same to get similar sized buttons.

Xml Code for button:

<Button
    android:id="@+id/button_custom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Custom Button"
    android:drawableRight="@mipmap/done"
    android:theme="@style/ButtonTheme" />

And create this style:

<style name="ButtonTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorButtonNormal">@color/indian_red</item>
    <item name="android:textColor">@color/white</item>
</style>

Upvotes: 3

Anthony
Anthony

Reputation: 3074

Remove

android:layout_marginLeft="2dp"

from your LinearLayout.

Or add it into your second button if required

Upvotes: 1

Related Questions