Hey StackOverflow community.
I am working on an android app right now and I got some problem with the layout of a fragment.
My problem is that the textviews and edittexts are not displayed, they are like squeeze in the layout design mode of android studio. It's the same thing when I run the app in the emulator. I am using a relativeLayout and the gravity is set to bottom.
I have tried different thing like changing the gravity, the layout height for the relativeLayout and the textView/editText but nothing work.
Here is the XML
<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="com.project.vincent.activityplanner.InfoPanelActivity"
android:gravity="bottom">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_above="#+id/textView3"
android:text="test" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateStart"
android:text="test" />
<TextView
android:id="#+id/textView4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateStart"
android:layout_alignBottom="#+id/dateStart"
android:text="Start" />
<EditText
android:id="#+id/dateStart"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="date"
android:ems="10"
android:layout_toStartOf="#+id/timeStart"
android:layout_alignBottom="#+id/timeStart" />
<EditText
android:id="#+id/timeStart"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="time"
android:ems="10"
android:layout_above="#+id/timeEnd"
android:layout_alignParentEnd="true" />
<TextView
android:id="#+id/textView5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateEnd"
android:text="Start" />
<EditText
android:id="#+id/dateEnd"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="date"
android:ems="10"
android:layout_toStartOf="#+id/timeEnd"
android:layout_alignBottom="#id/timeEnd"/>
<EditText
android:id="#+id/timeEnd"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="time"
android:ems="10"
android:layout_above="#+id/ratingBar"
android:layout_alignParentEnd="true" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save" />
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Only the save button and the rating bar are displayed correctly.
Layout Result
Layout Expectation
If you have an idea on how to solve this problem I would really appreciate your help.
Thanks
<?xml version="1.0" encoding="utf-8"?>
<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="com.project.vincent.activityplanner.InfoPanelActivity"
android:gravity="bottom">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_above="#+id/textView3"
android:text="test2" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateStart"
android:text="test3" />
<TextView
android:id="#+id/textView4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateStart"
android:layout_alignBottom="#+id/dateStart"
android:text="Start" />
<EditText
android:id="#+id/dateStart"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="date"
android:ems="10"
android:layout_toStartOf="#+id/timeStart"
android:layout_alignBottom="#+id/timeStart" />
<EditText
android:id="#+id/timeStart"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="time"
android:ems="10"
android:layout_above="#+id/timeEnd"
android:layout_alignParentEnd="true" />
<TextView
android:id="#+id/textView5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="End"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/dateEnd"
android:layout_above="#+id/ratingBar"/>
<EditText
android:id="#+id/dateEnd"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="date"
android:ems="10"
android:layout_toStartOf="#+id/timeEnd"
android:layout_alignBottom="#id/timeEnd"/>
<EditText
android:id="#+id/timeEnd"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="time"
android:ems="10"
android:layout_above="#+id/ratingBar"
android:layout_alignParentEnd="true" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
RelativeLayout allows you to place elements "one after another".
use "layoutAlignComponent" section of your elements in desisgner to stick them to each other.
I can see you already tried with your android:id="#+id/textView2" as it has android:layout_above="#+id/textView3" field.
Firstly you have to remove the android:gravity="bottom" property from the parent relative layout then you have to add the following code to show your save button and rating bar in bottom
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save" />
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
and then you have to remove the white color property from the textviews and then after that you can see your textviews and align them as per your UI.
Change your parent layout in linear layout.Because RelativeLayout is a view
group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
Your screen look likethat after changing parent to linear.
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.project.vincent.activityplanner.InfoPanelActivity"
android:gravity="bottom">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_above="#+id/textView3"
android:text="test" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateStart"
android:text="test" />
<TextView
android:id="#+id/textView4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateStart"
android:layout_alignBottom="#+id/dateStart"
android:text="Start" />
<EditText
android:id="#+id/dateStart"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="date"
android:ems="10"
android:layout_toStartOf="#+id/timeStart"
android:layout_alignBottom="#+id/timeStart" />
<EditText
android:id="#+id/timeStart"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="time"
android:ems="10"
android:layout_above="#+id/timeEnd"
android:layout_alignParentEnd="true" />
<TextView
android:id="#+id/textView5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#color/white"
android:layout_alignParentStart="true"
android:layout_above="#+id/dateEnd"
android:text="Start" />
<EditText
android:id="#+id/dateEnd"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="date"
android:ems="10"
android:layout_toStartOf="#+id/timeEnd"
android:layout_alignBottom="#id/timeEnd"/>
<EditText
android:id="#+id/timeEnd"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="time"
android:ems="10"
android:layout_above="#+id/ratingBar"
android:layout_alignParentEnd="true" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save" />
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true" />
Related
The following file is intended to allow full vertical scrolling in Android devices.
However when opening the app in Android Studio the light blue rectangular box ends just before where the buttons begin. Does not scroll. Members of Stack Overflow have helped me to overcome the file not opening. I thank them. But issue of scrolling remains.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.cancunsteve.aboutcancunsteve.MainActivity"
tools:showIn="#layout/activity_main">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/scrollView"
android:layout_alignParentStart="true"
android:layout_marginTop="56dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView android:id="#+id/imageView"
android:layout_column="1"
android:background="#mipmap/lpussy"
android:contentDescription='android:ContentDescription="#string/desc"'
tools:ignore="HardcodedText"
android:layout_width="200dp"
android:layout_height="230dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" We've been ... "
android:id="#+id/text1"
android:layout_alignTop="#+id/imageView"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#ffffff"
android:foreground="#05ffffff"
android:foregroundTint="#03ffffff"
android:textColor="#000000" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText2"
android:text="Cancun, Playa del Carmen, ..."
android:layout_below="#+id/text1"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:text="Holbox, ..."
android:layout_below="#+id/editText2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton"
android:layout_below="#+id/editText3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#mipmap/campa"
tools:ignore="ContentDescription"
android:layout_alignBottom="#+id/editText5" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/editText3"
android:text="thewebmaster#cancunsteve.com"
android:layout_below="#+id/editText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/editText"
android:layout_alignEnd="#+id/editText" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:ems="10"
android:id="#+id/editText4"
android:text=" 011 52 998 8873919"
android:layout_below="#+id/editText3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="42dp"
android:layout_marginStart="32dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText5"
android:text="be sure ..."
android:layout_below="#+id/editText4"
android:layout_toRightOf="#+id/ScrollView"
android:layout_toEndOf="#+id/ScrollView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click buttons multiple times to change state"
android:id="#+id/textView2"
android:layout_below="#+id/imageButton" />
</RelativeLayout>
</ScrollView>
I have Relative layout the is set to wrap_content in height. It has 2 TextView and 2 EditText. However, the RelativeLayout does not match to the height of EditTexts.
Dashed Rectangle is the region highlighted by android studio preview tool as the borders of RelativeLayout.
The actual problem is that when I run the app the bottom edittext kind of goes below the Relative layout and so its bottom part disappears. Thereby, user can't see that bottom line and don't know that there is a textfield.
Android Studio Preview:
Problem and Result on Emulator:
XML file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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.support.v4.widget.Space
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="5" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/numberOfDaysTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/initialNumberOfDays"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="58sp" />
<TextView
android:id="#+id/daysText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/numberOfDaysTextView"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/daysText"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="15sp" />
</RelativeLayout>
<android.support.v4.widget.Space
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/fromDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="#string/fromTextView"
android:textSize="15sp" />
<EditText
android:id="#+id/fromDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/fromDatePickerTextView"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_toEndOf="#+id/fromDatePickerTextView"
android:layout_toRightOf="#+id/fromDatePickerTextView"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />
<TextView
android:id="#+id/toDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/fromDatePickerTextView"
android:layout_alignRight="#+id/fromDatePickerTextView"
android:layout_below="#+id/fromDatePickerTextView"
android:layout_marginTop="32dp"
android:text="#string/toTextView"
android:textSize="15sp" />
<EditText
android:id="#+id/toDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/toDatePickerTextView"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_marginTop="22dp"
android:layout_toEndOf="#+id/toDatePickerTextView"
android:layout_toRightOf="#+id/toDatePickerTextView"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/calculateDaysButton"
android:layout_width="160dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:layout_marginTop="40dp"
android:background="#drawable/button_bg"
android:text="#string/calculateButtonText"
android:textColor="#android:color/white" />
</RelativeLayout>
</LinearLayout>
EDIT: Another solution that has worked:
TextView must be aligned to baseline of EditText and not the reverse way!
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/fromDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignBaseline="#+id/fromDate"
android:text="#string/fromTextView"
android:textSize="15sp" />
<EditText
android:id="#+id/fromDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_toEndOf="#+id/fromDatePickerTextView"
android:layout_toRightOf="#+id/fromDatePickerTextView"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />
<TextView
android:id="#+id/toDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/fromDatePickerTextView"
android:layout_alignRight="#+id/fromDatePickerTextView"
android:layout_alignBaseline="#+id/toDate"
android:layout_marginTop="32dp"
android:text="#string/toTextView"
android:textSize="15sp" />
<EditText
android:id="#+id/toDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_marginTop="10dp"
android:layout_toEndOf="#+id/toDatePickerTextView"
android:layout_toRightOf="#+id/toDatePickerTextView"
android:layout_below="#+id/fromDate"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />
</RelativeLayout>
You should use Linear Layout instead of Relative Layout.
Check out below code i have done some modification and applied with Linear Layout. You can modify with margin , height , width.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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.support.v4.widget.Space
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="5" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/numberOfDaysTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="0"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="58sp" />
<TextView
android:id="#+id/daysText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/numberOfDaysTextView"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Day"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="15sp" />
</RelativeLayout>
<android.support.v4.widget.Space
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/fromDatePickerTextView"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="to"
android:textSize="15sp" />
<EditText
android:id="#+id/fromDate"
android:layout_width="130dp"
android:layout_height="45dp"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/toDatePickerTextView"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="feom"
android:textSize="15sp" />
<EditText
android:id="#+id/toDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_marginTop="22dp"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/calculateDaysButton"
android:layout_width="160dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:layout_marginTop="40dp"
android:background="#drawable/button_bg"
android:text="#string/calculateButtonText"
android:textColor="#android:color/white" />
</RelativeLayout>
</LinearLayout>
Hope this Solves your problem.
Can you try this code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/fromDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="from"
android:textSize="15sp"
android:layout_above="#+id/toDate"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/fromDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/toDate"
android:layout_alignStart="#+id/toDate" />
<TextView
android:id="#+id/toDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="to"
android:textSize="15sp"
android:layout_alignBottom="#+id/toDate"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/toDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_below="#+id/fromDate"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_toEndOf="#+id/toDatePickerTextView"
android:layout_toRightOf="#+id/toDatePickerTextView"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />
</RelativeLayout>
You made a fixed size for edittext, try removing those so that you can achieve your expectations. Also use singleline=true/maxLines=1 for edit text- this is best practice.
When I'm trying to add ScrollView its giving me error that Scroll view can contain only a single child. So how to add a ScrollView ?
And also when I open my app in various phones all the phones gives different layouts. How do manage the look and feel of the app same for all mobile devices ?
Register.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#0066CC"
android:orientation="vertical"
android:padding="10dp" >
<ImageView
android:id="#+id/upImage"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/textView1"
android:layout_width="465dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_weight="0.02"
android:layout_marginBottom="100dp"
android:textSize="15sp"
android:textStyle="bold"
android:text="Tap to upload Profile Picture" />
<EditText
android:id="#+id/imName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:hint="Enter name of the Image"
android:ems="10" >
</EditText>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name" />
<EditText
android:id="#+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Age" />
<EditText
android:id="#+id/etAge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username" />
<EditText
android:id="#+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:inputType="textPassword" />
<Button
android:id="#+id/bRegister"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Register" />
</LinearLayout>
Yes ScrollView allow only single child
So put you parent LinearLayout inside ScrollView like below
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0066CC"
android:orientation="vertical"
android:padding="10dp" >
<ImageView
android:id="#+id/upImage"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/textView1"
android:layout_width="465dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_weight="0.02"
android:layout_marginBottom="100dp"
android:textSize="15sp"
android:textStyle="bold"
android:text="Tap to upload Profile Picture" />
<EditText
android:id="#+id/imName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:hint="Enter name of the Image"
android:ems="10" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name" />
<EditText
android:id="#+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Age" />
<EditText
android:id="#+id/etAge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username" />
<EditText
android:id="#+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:inputType="textPassword" />
<Button
android:id="#+id/bRegister"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Register" />
</LinearLayout>
</ScrollView>
Android only supports a single child inside a ScrollView. The simplest way is to enclose everything inside a LinearLayout and make it a child of a ScrollView.
If you however want to maintain the same look and feel throughout the application, try using a RelativeLayout instead of the LinearLayout as the child of the ScrollView.
I have a scrollview with a relative layout inside of it. When I have the relative layout height set to match_parent it does this to the graphical layout and I do not know why it's doing this. ---PICTURE BELOW---
Here is the activity_main.xml file:
<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: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=".MainActivity" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:ems="10"
android:hint="First and Last Name"
android:inputType="textPersonName" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/etPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etName"
android:layout_marginTop="14dp"
android:ems="10"
android:hint="Enter Phone #"
android:inputType="phone" />
<EditText
android:id="#+id/etEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etPhone"
android:layout_marginTop="17dp"
android:ems="10"
android:hint="Enter E-mail"
android:inputType="textEmailAddress" />
<EditText
android:id="#+id/etAdd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etEmail"
android:layout_marginTop="18dp"
android:ems="10"
android:hint="Additional Information"
android:lines="5"
android:inputType="textMultiLine" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/etPhone"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="Contact Form"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/send"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Send" />
</RelativeLayout>
</ScrollView>
I have also tried to set the scroll view width and height to fill_parent and it still does the same thing. What am I doing wrong?
Thank you in advance!
You haven't specified the correct positioning of Button
Add android:layout_below="#+id/etAdd" to your button
<Button
android:id="#+id/send"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_below="#+id/etAdd"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Send" />
Try this,
<Button
android:id="#+id/send"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/yourEdt"
android:text="Send" />
This is my first android app so very new to this. My app when used in a mobile device, the layout is not shown completely. I mean to say that the buttons in end are not displayed. Using ScrollView will solve this problem. But is there any way to adjust the layout based on the device i use? And also an example code for using ScrollView would be appreciated. Thanks in advance.
EDIT: layout code (.xml)
<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=".Matchdetails" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:layout_marginTop="15dp"
android:text="#string/Name" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView2"
android:layout_alignParentRight="true"
android:ems="10"
android:inputType="text" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/Maledet" />
<Spinner
android:id="#+id/spin_ras"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_below="#+id/textView2"
android:layout_toLeftOf="#+id/textView1" />
<Spinner
android:id="#+id/spin_nak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spin_ras"
android:layout_below="#+id/spin_ras"
android:layout_toLeftOf="#+id/textView1" />
<Spinner
android:id="#+id/spin_gotra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/spin_nak"
android:layout_toRightOf="#+id/textView1" />
<Spinner
android:id="#+id/spin_pada"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/spin_nak"
android:layout_toRightOf="#+id/textView1" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView4"
android:layout_alignBottom="#+id/textView4"
android:layout_alignRight="#+id/spin_pada"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/spin_nak"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:text="#string/Femdet" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spin_nak"
android:layout_below="#+id/textView3"
android:layout_marginTop="14dp"
android:text="#string/Name" />
<Spinner
android:id="#+id/spin_fras"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView4"
android:layout_below="#+id/editText2"
android:layout_marginTop="14dp"
android:layout_toLeftOf="#+id/textView1" />
<Spinner
android:id="#+id/spin_fnak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spin_fras"
android:layout_below="#+id/spin_fras"
android:layout_toLeftOf="#+id/textView1" />
<Spinner
android:id="#+id/spin_fpada"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/spin_fnak"
android:layout_toRightOf="#+id/textView1" />
<Spinner
android:id="#+id/spin_fgotra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/spin_fpada"
android:layout_toRightOf="#+id/textView1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/spin_fnak"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/textView4"
android:text="#string/Submit" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button1"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/button1"
android:text="#string/Cancel" />
</RelativeLayout>
You might also want to try the compatibility layouts :)
I have modified your layout and put it in a scroll view.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<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"
tools:context=".Matchdetails" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:layout_marginTop="15dp"
android:text="#string/Name" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/textView2"
android:layout_alignParentRight="true"
android:ems="10"
android:inputType="text" >
</EditText>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/Maledet" />
<Spinner
android:id="#+id/spin_ras"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/textView2"
android:layout_below="#id/textView2"
android:layout_toLeftOf="#id/textView1" />
<Spinner
android:id="#+id/spin_nak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spin_ras"
android:layout_below="#id/spin_ras"
android:layout_toLeftOf="#id/textView1" />
<Spinner
android:id="#+id/spin_gotra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/spin_nak"
android:layout_toRightOf="#id/textView1" />
<Spinner
android:id="#+id/spin_pada"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/spin_nak"
android:layout_toRightOf="#id/textView1" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView4"
android:layout_alignBottom="#+id/textView4"
android:layout_alignRight="#id/spin_pada"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/spin_nak"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:text="#string/Femdet" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/spin_nak"
android:layout_below="#id/textView3"
android:layout_marginTop="14dp"
android:text="#string/Name" />
<Spinner
android:id="#+id/spin_fras"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView4"
android:layout_below="#id/editText2"
android:layout_marginTop="14dp"
android:layout_toLeftOf="#id/textView1" />
<Spinner
android:id="#+id/spin_fnak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/spin_fras"
android:layout_below="#id/spin_fras"
android:layout_toLeftOf="#id/textView1" />
<Spinner
android:id="#+id/spin_fpada"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/spin_fnak"
android:layout_toRightOf="#id/textView1" />
<Spinner
android:id="#+id/spin_fgotra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/spin_fpada"
android:layout_toRightOf="#id/textView1" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/spin_fpada"
android:layout_centerHorizontal="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/spin_fnak"
android:layout_margin="5dp"
android:text="#string/Submit" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_toRightOf="#id/button1"
android:text="#string/Cancel" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
A couple of things to be noted.
You need #+id/view_id only when you create a new View ID for the first time in your layout. When you refer an existing id you can do so with #id/view_id.
Avoid hard coding the values wherever possible. You will find it difficult while using your layout to fit different screens.
The above layout isn't perfect, but will fit your requirement. You may want to use nested views in your layout and get the hang of what the different attributes mean in the layout xml. That, you will gain by trying out different things.
In general, Designing for multiple screens involves considering a number of factors.
Supporting screens with different sizes and resolutions (VGA/ HVGA / WVGA/ WXGA) screens/(hdpi/mdpi..) densities.
Different Form factors(smartphones/tablets)
Different orientations(landscape/portrait) on the same device.
You should perhaps read this for a complete know-how about designing your app for multiple screen types. And there's a sample application in the link.
// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:text="#string/Maledet" />
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/Name" />
<EditText
android:id="#+id/editText1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="match_parent">
<Spinner
android:id="#+id/spin_ras"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<Spinner
android:id="#+id/spin_gotra"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="match_parent">
<Spinner
android:id="#+id/spin_nak"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<Spinner
android:id="#+id/spin_pada"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/Femdet" />
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/Name" />
<EditText
android:id="#+id/editText2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="match_parent">
<Spinner
android:id="#+id/spin_fras"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<Spinner
android:id="#+id/spin_fgotra"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="match_parent">
<Spinner
android:id="#+id/spin_fnak"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<Spinner
android:id="#+id/spin_fpada"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/spin_fnak"
android:layout_margin="5dp"
android:text="#string/Submit" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_toRightOf="#id/button1"
android:text="#string/Cancel" />
</LinearLayout>
</LinearLayout>