CODEWITHSUNDEEP
androidandroid-viewandroid-xmlandroid-button
bibi_bryan
bibi_bryan

Reputation: 371

button looks different on different android devices or versions

I have two simple buttons and wanted to give them a custom look, so i just gave the button a background color. This looked fine on my Htc One which runs on 4.2, but when i tested it on an old Lg P925, the buttons height just wrapped its content (just as if the default padding was gone).

Like this:

enter image description here

So i did some further research and found out that i had to use a state list draw able to add features to the button.

So i did that like this:

Button.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

 </selector>

Button focused

    <shape xmlns:android="http://schemas.android.com/apk/res/android"   
    android:shape="rectangle">
    <solid android:color="@color/greybutton"/>
    <corners android:radius="0dp" />
    <stroke android:color="@color/greybutton" android:width="2dp" />
    <padding android:top="5dp" android:bottom="5dp"             
    android:left="10dp"android:right="10dp" />
    </shape>

Button pressed

    <shape xmlns:android="http://schemas.android.com/apk/res/android"      
    android:shape="rectangle">
    <solid android:color="@color/greybutton"/>
    <corners android:radius="0dp" />
    <stroke android:color="@color/greybutton" android:width="2dp" />
    <padding android:top="5dp" android:bottom="5dp" android:left="10dp"     
    android:right="10dp" />
    </shape>

Button normal

    <shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">
    <gradient android:startColor="#FFFFFFFF" android:endColor="#A4A4A4"  
    android:angle="270" />
    <solid android:color="@color/darkerGrey"/>
    <corners android:radius="0dp" />
    <padding android:top="5dp" android:bottom="5dp" android:left="10dp"   
    android:right="10dp"/>
    </shape>

Style

  <style name="button" parent="@android:style/Widget.Button">
  <item name="android:background">@drawable/button</item>
  </style>

Then i added the style to the button: 

           <Button
            android:id="@+id/SignUpBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="@string/CreateAcct"
            android:textColor="@color/white"
            style="@style/button"
            android:textSize="17sp"
             />

This is what i got:

On my HTC(Running 4.2)

Here the buttons are bigger because it adds the 5dp top and bottom padding(from my state drawables xml) to the default system padding of the button.

On my Lg P925 running on 2.3 i get this:

enter image description here

The buttons are smaller than those on my htc. It seems that when i add a background to the button it gets rid of the default padding. I just don't know.

How can i create a button that would look the same all devices?

Upvotes: 1

Views: 849

Answers (2)

lalit vasan
lalit vasan

Reputation: 440

*Text font varies from device to device so use typeface class to set font typeface of button *

like this

create a folder font in assets folder and paste abc.ttf file . basically .ttf file is a file that contains font style u cant download it free .

Button txt = (Button) findViewById(R.id.custom_font);  
Typeface font = Typeface.createFromAsset(getAssets(), "abc.TTF");  
txt.setTypeface(font);

or u can use use predefined fonts of android like this 

<Button 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:typeface="sans"/>

sans,monospace,serif are predefined fonts

enjoy coding

it will work

Upvotes: 1

PearsonArtPhoto
PearsonArtPhoto

Reputation: 39748

I believe the key is this statement:

<style name="button" parent="@android:style/Widget.Button">
<item name="android:background">@drawable/button</item>

</style>

Note that you are extending the parent style, which might vary depending on the Android version, etc. Try it without the parent bit.

Upvotes: 0

Related Questions