size of Button is too abnormal in xml file of android

Question

I want to implement the following file in android .

My implementation so far is as follows :

Here the size of the button at the last of the screen is too large . I cant understand why the size of the button is too large ?

My code is as follows :

<?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:background="#FFFFFF"
    android:orientation="vertical"
    android:padding="5dp"
    android:weightSum="3" >

    <RelativeLayout
        android:id="@+id/relative_layout_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#BDD6E0"
        android:orientation="vertical"
        android:padding="5dp"
        android:paddingBottom="10dp" >

        <TextView
            android:id="@+id/textView_Welcome"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView_ProPic"
            android:text="Welcome Back"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#000000" />

        <TextView
            android:id="@+id/textView_Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/textView_Welcome"
            android:layout_toLeftOf="@+id/imageView_ProPic"
            android:paddingLeft="10dp"
            android:text="Sultan Ahmed Sagor"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000000" />

        <ImageView
            android:id="@+id/imageView_ProPic"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:contentDescription="ProPic"/>
    </RelativeLayout>

    <TableLayout
    android:id="@+id/table_layout_1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/relative_layout_1" 
    android:weightSum="8" >

        <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >

                 <TextView
                android:id="@+id/settings_user_name_text"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                 android:text="Instructional Use :" 
                android:gravity="center|left"
                android:paddingLeft="10sp"
                     android:textAppearance="?android:attr/textAppearanceMedium" 
                android:textColor="#000000" />

            </TableRow>

        <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >

                 <TextView
                android:id="@+id/settings_user_name_text3"
                android:layout_width="match_parent"
                android:layout_height="match_parent" 
                android:text="Drug Name :       Gopten"  
                android:paddingLeft="10sp"
                     android:textAppearance="?android:attr/textAppearanceMedium" 
                android:textColor="#000000" />

            </TableRow>

        <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:layout_weight="4" >



                 <TextView
                     android:id="@+id/text_instructions"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
                     android:background="@drawable/border_for_image"
                     android:maxLines="15"
                     android:paddingLeft="10sp"
                     android:text="@string/text_ins"
                     android:textColor="#000000" />

            </TableRow>

        <TableRow
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/border_for_edit_text" 
        android:layout_margin="10sp"
        android:layout_weight="1" >

                 <Button
                android:id="@+id/settings_user_name_text"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                 android:text="BACK" 
                android:gravity="center|center"
                android:paddingLeft="10sp"
                     android:textAppearance="?android:attr/textAppearanceMedium" 
                android:textColor="#000000" />

            </TableRow>



    </TableLayout>

</RelativeLayout>

Can you help me by pointing out in where I have error / Why the size of the button at the last of the screen is too large ?

Answer 1

You have your button set to 'match_parent', which will make it grow to fit the size of it's parent (thus full width in this case).

Try (to make it just as big as the text):

 <Button
            android:id="@+id/settings_user_name_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

or (to make it a specific size):

 <Button
            android:id="@+id/settings_user_name_text"
            android:layout_width="48dp"
            android:layout_height="96dp"

Answer 2

try adding this to your xml for the buttton

android:layout_width="wrap_content"
android:layout_height="wrap_content"