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.