Button displaying incorrectly on multiple displays

Question

I have a sign in window that has a register button on but for some reason, on smaller displays this button seems to do its own thing.

1) I dont want the button to stretch like it does when its rotated but also on the other hand i dont want the button to have the text display "Regi..." because the button is too small to fit the text?

Ive tried adding padding, Margins etc. Not sure how to get it to "dynamically" size if the screen is too small.

Please see below XML Code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/bg"
            android:orientation="vertical"
            tools:context="com.myapp.app.ui.LoginActivity"
>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >>

    <include
        layout="@layout/login_and_register_header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical">


        <com.myapp.app.ui.CustomEditText

            android:id="@+id/edit_text_username"
            android:layout_width="fill_parent"
            android:layout_height="72dip"
            android:layout_marginLeft="16dip"
            android:layout_marginRight="16dip"
            android:ems="10"
            android:hint="Username or email"
            android:inputType="textEmailAddress"
            android:singleLine="true"
            android:textColorHint="@color/bob_light_text"
            android:textCursorDrawable="@drawable/orange_cursor"
            android:typeface="normal"/>

        <LinearLayout
            android:id="@+id/ll_password"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="100"
            >

            <com.myapp.app.ui.CustomEditText
                android:id="@+id/edit_text_password"
                android:layout_width="0dp"
                android:layout_height="72dip"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="16dip"
                android:layout_weight="80"
                android:ems="10"
                android:hint="Password"
                android:inputType="textPassword"
                android:singleLine="true"
                android:textColorHint="@color/bob_light_text"
                android:textCursorDrawable="@drawable/orange_cursor"
                android:typeface="normal"/>

            <TextView
                android:id="@+id/textView_forgotPassword"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="20"
                android:text="Forgot?"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/bob_links"
                android:clickable="true"
                android:layout_marginRight="3dp"/>

        </LinearLayout>


    </LinearLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="2dip"
        android:background="@drawable/gradient"
        >
    </View>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dip">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/white_edit_text_background"
            android:orientation="horizontal"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:paddingEnd="16dp"
            android:paddingStart="16dp"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:layout_marginRight="16dp"
            android:gravity="center"
            android:baselineAligned="false"
            >

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Register to join, \nit&apos;s free and easy"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textSize="16dip"
                android:paddingBottom="8dip"
                android:layout_gravity="center_vertical"
                />

            <Button
                android:id="@+id/imageButton"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/blue_background_2dp_radius"
                android:text="Register"
                android:textColor="@color/white"
                android:layout_gravity="center_vertical"
                android:textSize="14dip"
                android:lines="1"
                android:singleLine="true"
                />

        </LinearLayout>

        <View
            android:layout_width="fill_parent"
            android:layout_height="2dip"
            android:background="@drawable/gradient"
            android:layout_marginRight="16dip"
            android:layout_marginLeft="17dip">
        </View>


    </LinearLayout>

</LinearLayout>


<ProgressBar
    android:id="@+id/myProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:indeterminate="false"/>

Here is the code specific to the button in question:

                <Button
                android:id="@+id/imageButton"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/blue_background_2dp_radius"
                android:text="Register"
                android:textColor="@color/white"
                android:layout_gravity="center_vertical"
                android:textSize="14dip"
                android:lines="1"
                android:singleLine="true"
                />

If its needed here is the code for the background of the button:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<solid android:color="@color/bob_bright_blue"/>

<corners
    android:radius="2dp"/>
</shape>

http://stackoverflow.com/questions/5761960/what-is-the-difference-between-match-parent-and-fill-parent — 2Dee, Aug 27 '15 at 09:27
thanks for that, that simply fixes the fact it stretches across the screen. The big issue is the fact that the button becomes too small on smaller screens? — Stillie, Aug 27 '15 at 09:51

score 2 · Accepted Answer · answered Aug 27 '15 at 09:57

2

Don't use fill_parent on the layout_width attribute of your button, use wrap_content instead.

<Button
    android:id="@+id/imageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/blue_background_2dp_radius"
    android:text="Register"
    android:textColor="@color/white"
    android:layout_gravity="center_vertical"
    android:textSize="14dip"
    android:lines="1"
    android:singleLine="true" />

That will make that your Button only grow until its content is fully displayed

Vote up if i help you :D

answered Aug 27 '15 at 09:57

alcaamado

308
3
13

thanks for that, that simply fixes the fact it stretches across the screen. The big issue is the fact that the button becomes too small on smaller screens? – Stillie Aug 27 '15 at 12:24
1

You can set the minimum width with XML attributes, but it is not the best idea. On smaller screens, you have to decrease the font size to fit the button max width. – alcaamado Aug 27 '15 at 13:44
ok thanks a mill! wasnt really happy with doing that, but looks like im going to have to – Stillie Aug 28 '15 at 06:32

Button displaying incorrectly on multiple displays

1 Answers1