Search code examples
androidandroid-layoutandroid-xmlandroid-library

Android Buttons not stretching to width of the screen


I'm using a bootstrap library for android which can be found here. Ive imported the library into my application but the problem im having is that the buttons do not span the entire screen width. I've tried placing the buttons side by side and using android:layout_weight="1" but the button just moves to the left and does not stretch. I've even tried using android:layout_width="match_parent" but that increases the buttons height as well.

This is how my layout looks with the library

this is what happens if i set android:layout_width="0dip" and android:layout_weight="1" (for ok/cancel) and android:layout_width="match_parent"(for check button)

enter image description here

XML CODE

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20sp" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="318dp"
    android:layout_height="wrap_content"
    android:text="Send Pin To Email id."
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Enter Your Email Id Below"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<com.beardedhen.androidbootstrap.BootstrapEditText
    android:id="@+id/et_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:ems="10"
    android:hint="abc@example.com"
    android:inputType="textEmailAddress"
    bootstrapbutton:be_roundedCorners="true" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:paddingBottom="15sp" >

    <com.beardedhen.androidbootstrap.BootstrapButton
        android:id="@+id/OK"
        style="@style/AppBaseTheme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:text="OK"
        bootstrapbutton:bb_icon_left="fa-envelope"
        bootstrapbutton:bb_roundedCorners="true"
        bootstrapbutton:bb_size="medium"
        bootstrapbutton:bb_type="default" />

    <com.beardedhen.androidbootstrap.BootstrapButton
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="CANCEL"
        bootstrapbutton:bb_icon_left="fa-times"
        bootstrapbutton:bb_roundedCorners="true"
        bootstrapbutton:bb_size="medium"
        bootstrapbutton:bb_type="default" />
</LinearLayout>

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="15sp"

    android:text="Got your Pin?Enter it below."
    android:textAppearance="?android:attr/textAppearanceMedium" />

<com.beardedhen.androidbootstrap.BootstrapEditText
    android:id="@+id/et_pin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:ems="10"
    android:hint="XXXX"
    android:inputType="number"
    bootstrapbutton:be_roundedCorners="true" />

<com.beardedhen.androidbootstrap.BootstrapButton
    android:id="@+id/b_check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="10dp"
    android:text="Check"
    bootstrapbutton:bb_icon_left="fa-check"
    bootstrapbutton:bb_roundedCorners="true"
    bootstrapbutton:bb_size="medium"
    bootstrapbutton:bb_type="default" />

</LinearLayout>

Solution

  • You need to use width as 0dip instead of wrap_content if you use weight property.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:paddingBottom="15sp" 
        android:weightSum="2">
        <com.beardedhen.androidbootstrap.BootstrapButton
            android:id="@+id/OK"
            style="@style/AppBaseTheme"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:text="OK"
            bootstrapbutton:bb_icon_left="fa-envelope"
            bootstrapbutton:bb_roundedCorners="true"
            bootstrapbutton:bb_size="medium"
            bootstrapbutton:bb_type="default" 
            android:layout_weight="1"/>
    
        <com.beardedhen.androidbootstrap.BootstrapButton
            android:id="@+id/cancel"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:text="CANCEL"
            bootstrapbutton:bb_icon_left="fa-times"
            bootstrapbutton:bb_roundedCorners="true"
            bootstrapbutton:bb_size="medium"
            bootstrapbutton:bb_type="default"
            android:layout_weight="1"/>
    

    And for single button, just use width as "match_parent"

    <com.beardedhen.androidbootstrap.BootstrapButton
        android:id="@+id/b_check"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="Check"
        bootstrapbutton:bb_icon_left="fa-check"
        bootstrapbutton:bb_roundedCorners="true"
        bootstrapbutton:bb_size="medium"
        bootstrapbutton:bb_type="default" />
    

    Hope this helps.