CS401

Fun GUI Tips

Making an Activity or Fragment Scrollable --> top level widget ScrollView containing a Linear Layout which then contains the rest of your interface

XML LAYOUT FILE

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="computervision.grewe.bikerappcs4521.MainActivity$PlaceholderFragment">


    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter"
        android:id="@+id/button_biker_enter"
        android:layout_below="@+id/editText_Password"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Login"
        android:id="@+id/textView"
        android:layout_below="@+id/section_label"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText_Login"
        android:text="lynne_Grewe123"
        android:layout_below="@+id/textView"
        android:layout_toEndOf="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Password"
        android:id="@+id/textView2"
        android:layout_below="@+id/editText_Login"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText_Password"
        android:text="funNOW"
        android:layout_below="@+id/textView2"
        android:layout_alignStart="@+id/editText_Login" />




</RelativeLayout>
</LinearLayout>
</ScrollView>

Here the ScrollView+Linear Layout combination contain a RelativeLayout that contains a Login interface with multiple View objects

--> AFTER SOME SCROLLING

Making Your Interface (when it contains EditText views,etc) NOT pop up the keyboard

XML LAYOUT FILE

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="computervision.grewe.bikerappcs4521.MainActivity$PlaceholderFragment">


    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter"
        android:id="@+id/button_biker_enter"
        android:layout_below="@+id/editText_Password"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Login"
        android:id="@+id/textView"
        android:layout_below="@+id/section_label"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText_Login"
        android:text="lynne_Grewe123"
        android:layout_below="@+id/textView"
        android:layout_toEndOf="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Password"
        android:id="@+id/textView2"
        android:layout_below="@+id/editText_Login"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText_Password"
        android:text="funNOW"
        android:layout_below="@+id/textView2"
        android:layout_alignStart="@+id/editText_Login" />




</RelativeLayout>
</LinearLayout>
</ScrollView>

Default is they keyboard will come up

XML LAYOUT FILE WITH ADDED OPTIONS

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="computervision.grewe.bikerappcs4521.MainActivity$PlaceholderFragment">


    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter"
        android:id="@+id/button_biker_enter"
        android:layout_below="@+id/editText_Password"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Login"
        android:id="@+id/textView"
        android:layout_below="@+id/section_label"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText_Login"
        android:text="lynne_Grewe123"
        android:layout_below="@+id/textView"
        android:layout_toEndOf="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Password"
        android:id="@+id/textView2"
        android:layout_below="@+id/editText_Login"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText_Password"
        android:text="funNOW"
        android:layout_below="@+id/textView2"
        android:layout_alignStart="@+id/editText_Login" />




</RelativeLayout>
</LinearLayout>
</ScrollView>

Here the ScrollView+Linear Layout combination contain a RelativeLayout that contains a Login interface with multiple View objects

Default is they keyboard will come up

Now keyboard does not pop up