简体   繁体   中英

Edittext at the bottom of screen Android

Here is very primitive mockup of the layout which I want to implement. Of course there will be buttons and stuff but that's no the problem.

在此处输入图片说明

As you can see I want to add EditText at the bottom of the screen. But when the soft keyboard is opened the EditText isn't visible. When I add android:windowSoftInputMode="adjustResize" in the manifest, the layout get's resized but it looks like crap because everything is crushed together.

Can anyone tell me how to organize layout correctly so that it looks nice?

Here is the current xml:

<ScrollView 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:fillViewport="true" >

<LinearLayout 
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#B36E106F"
android:orientation="vertical"
android:baselineAligned="false"
tools:context=".AddRoute" >

<LinearLayout
    android:id="@+id/content"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="0.2"
    android:background="#006E106F"
    android:baselineAligned="false" >

    <LinearLayout
        android:id="@+id/left_column"
        android:orientation="vertical"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_margin="10dp"
        android:background="@drawable/add_route_column_background" >

        <RelativeLayout
            android:id="@+id/add_from_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/add_from_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/button_states" />

            <TextView
                android:id="@+id/add_from"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="FROM:" />

            <TextView
                android:id="@+id/add_from_result"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/add_from"
                android:textColor="#fff"
                android:layout_centerVertical="true" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/add_date_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/add_date_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/button_states" />

            <TextView
                android:id="@+id/add_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="DATE:" />

            <TextView
                android:id="@+id/add_date_result"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/add_date"
                android:textColor="#fff"
                android:layout_centerVertical="true" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/add_seats_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/add_seats_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/button_states" />

            <TextView
                android:id="@+id/add_seats"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="SEATS:" />

            <TextView
                android:id="@+id/add_seats_result"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/add_seats"
                android:textColor="#fff"
                android:layout_centerVertical="true" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/add_notes_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/add_notes_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/button_states" />

            <TextView
                android:id="@+id/add_notes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="NOTES:" />

            <EditText
                android:id="@+id/testEdit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@id/add_notes" />

            <!-- <TextView
                android:id="@+id/add_notes_result"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/add_notes"
                android:textColor="#fff"
                android:layout_centerVertical="true" /> -->

        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_column"
        android:orientation="vertical"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_margin="10dp"
        android:background="@drawable/add_route_column_background" >

         <RelativeLayout
            android:id="@+id/add_to_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

             <ImageView
                 android:id="@+id/add_to_image"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignParentRight="true"
                 android:layout_alignParentTop="true"
                 android:src="@drawable/button_states" />

             <TextView
                android:id="@+id/add_to"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="TO:" />

             <TextView
                 android:id="@+id/add_to_result"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignLeft="@+id/add_to"
                 android:textColor="#fff"
                 android:layout_centerVertical="true" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/add_time_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/add_time_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/button_states" />

            <TextView
                android:id="@+id/add_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="TIME:" />

            <TextView
                android:id="@+id/add_time_result"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/add_time"
                android:textColor="#fff"
                android:layout_centerVertical="true" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/add_price_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/add_price_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/button_states" />

            <TextView
                android:id="@+id/add_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="PRICE:" />

            <TextView
                android:id="@+id/add_price_result"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/add_price"
                android:textColor="#fff"
                android:layout_centerVertical="true" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/add_stops_layout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/add_stops_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/button_states" />

            <TextView
                android:id="@+id/add_stops"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="5dp"
                android:textColor="#fff"
                android:textSize="18dp"
                android:text="STOPS:" />

            <TextView
                android:id="@+id/add_stops_result"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/add_stops"
                android:textColor="#fff"
                android:layout_centerVertical="true" />

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

<RelativeLayout
    android:id="@+id/buttons"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="0.8"
    android:background="#006E106F" >

    <Button
        android:id="@+id/button_post"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/cancel_button"
        android:layout_alignParentRight="true"
        android:layout_marginRight="40dp"
        android:background="@drawable/post_button"
        android:paddingBottom="15dp"
        android:paddingLeft="40dp"
        android:paddingRight="40dp"
        android:paddingTop="15dp"
        android:text="Post"
        android:textColor="#fff" />

    <Button
        android:id="@+id/cancel_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="31dp"
        android:background="@drawable/cancel_button"
        android:paddingBottom="15dp"
        android:paddingLeft="40dp"
        android:paddingRight="40dp"
        android:paddingTop="15dp"
        android:text="Cancel"
        android:textColor="#fff" />

</RelativeLayout>
</LinearLayout>

</ScrollView>

I added Scrollview but still when the keyboard pops up, the screen gets resized like that: 在此处输入图片说明在此处输入图片说明

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:androidbootstrap="http://schemas.android.com/apk/res-auto"
        xmlns:app="http://schemas.android.com/apk/res/com.hitchhiker.mobile"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true" >

    <RelativeLayout 
    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"
    android:background="#B36E106F"
    tools:context=".AddRoute" >

    <EditText
        android:id="@+id/driving_from_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:background="@drawable/edittext_background_rounded"
        android:hint="@string/from"
        android:ems="5" >
    </EditText>

    <EditText
        android:id="@+id/driving_to_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/driving_from_field"
        android:layout_alignBottom="@+id/driving_from_field"
        android:layout_marginLeft="50dp"
        android:layout_toRightOf="@+id/driving_from_field" 
        android:background="@drawable/edittext_background_rounded"
        android:hint="@string/to"
        android:ems="5" />

    <EditText
        android:id="@+id/price_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/driving_to_field"
        android:layout_alignRight="@+id/driving_to_field"
        android:layout_below="@+id/driving_to_field"
        android:layout_marginTop="87dp"
        android:background="@drawable/edittext_background_rounded"
        android:hint="@string/price"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/time_select"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/price_field"
        android:layout_alignRight="@+id/price_field"
        android:layout_below="@+id/driving_to_field"
        android:layout_marginTop="22dp"
        android:ems="10" />

    <Button
        android:id="@+id/date_select"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/time_select"
        android:layout_alignBottom="@+id/time_select"
        android:layout_alignLeft="@+id/driving_from_field"
        android:layout_alignRight="@+id/driving_from_field" />

    <EditText
        android:id="@+id/seats"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/date_select"
        android:layout_alignRight="@+id/date_select"
        android:layout_alignTop="@+id/price_field"
        android:background="@drawable/edittext_background_rounded"
        android:hint="@string/seats"
        android:ems="10" />

    <com.beardedhen.bbutton.BootstrapButton
        android:id="@+id/save_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/seats"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="137dp"
        android:text="@string/save"
        androidbootstrap:roundedCorners="true"
        androidbootstrap:size="default"
        androidbootstrap:type="primary" >
    </com.beardedhen.bbutton.BootstrapButton>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/price_field"
        android:layout_below="@+id/price_field"
        android:layout_marginTop="28dp"
        android:src="@drawable/abcpressed" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/seats"
        android:layout_alignTop="@+id/imageView2"
        android:src="@drawable/abc" />

 </RelativeLayout >

Write it in your manifest file

  <activity
            android:name=".MainActivity"
            android:label="@string/app_name" 
            android:windowSoftInputMode="adjustPan">

Add scroll to your xml. So when the keyboard pops then on top of the keyboard in the main screen youll be able to scroll down to your buttons. Try it out might work for you

Surround your layout with scrollview :

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true" >

</ScrollView>
It will be easier for you if you use Linear Layout rather than Relative Layout
for this UI

So you can follow this structure for creating your UI

<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    // Main Layout Under Scroll View

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

    // Layout used for creating your remaining views of ui.

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

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

             <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

              add your remaining views here.......
        </LinearLayout>

        //Layout used for 2 edit text


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="20dp"
            android:weightSum="2" >

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
        </LinearLayout>
    </LinearLayout>

</ScrollView>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM