Layout Doesn't Match in Real Device - java

When I designed my App UI , it looks good on the emulator, but when I run the app on a real device (which has a smaller screen), it looks so bad with some widgets stacked over each other, why? And what the solution?
<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"
tools:context="musabnasr.com.weeklyaccomplished.MainActivity"
android:background="#ffffff"
android:orientation="vertical"
android:weightSum="1"
>
<ImageView
android:layout_width="195dp"
android:layout_height="110dp"
android:id="#+id/imageView"
android:src="#drawable/userlogin"
android:scaleType="centerCrop"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/usernamefield"
style="#android:style/Widget.Holo.EditText"
android:hint="user name:"
android:layout_below="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="26sp"
android:layout_alignParentEnd="true"
android:layout_gravity="center_horizontal"
/>
<EditText
style="#android:style/Widget.Holo.EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/passwordfield"
android:hint="password :"
android:layout_below="#+id/usernamefield"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="91sp"
android:layout_alignParentEnd="true"
android:layout_gravity="center_horizontal"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log in or Sign Up"
android:id="#+id/login_signup"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="150sp"/>

Related

Android Textview is moved to right

This is what I actually have as a result:
As you can see value to right of Current HP is moved to right instead to stay close to "Current HP" textview like the rest of values. Why is that so? This is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#color/semiTrans"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/llHeader"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/text"
android:layout_marginRight="5dp"
app:srcCompat="#android:drawable/ic_dialog_info" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_vertical|center_horizontal"
android:text="CONTINUE INFO"
android:textColor="#000"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl2"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/llHeader"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/currentHp"
android:textStyle="bold"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:text="Current HP: "
android:textSize="18sp"/>
<TextView
android:id="#+id/nextHp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/currentHp"
android:text="Next +10HP: "
android:textSize="18sp"/>
<TextView
android:id="#+id/fullHp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/nextHp"
android:text="HP fully recovered: "
android:textSize="18sp"/>
<TextView
android:id="#+id/currentHpValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/currentHp"
android:layout_toRightOf="#+id/currentHp"
android:text="a"
android:textSize="18sp"/>
<TextView
android:id="#+id/nextHpValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/currentHp"
android:layout_toEndOf="#+id/nextHp"
android:layout_toRightOf="#+id/nextHp"
android:text="a"
android:textSize="18sp"/>
<TextView
android:id="#+id/fullHpValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/fullHp"
android:layout_alignBottom="#+id/fullHp"
android:layout_toEndOf="#+id/fullHp"
android:layout_toRightOf="#+id/fullHp"
android:text="a"
android:textSize="18sp"/>
<TextView
android:id="#+id/tvAdditionalInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_below="#id/fullHp"
android:textSize="18sp"
android:layout_centerHorizontal="true"
android:text="Additional info"/>
</RelativeLayout>
<Button
android:id="#+id/dialogButtonOK"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rl2"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginHorizontal="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/button"
android:text=" Ok " />
</RelativeLayout>
I was trying to solve this by setting padding and margin to 0 but it did not work. I do not know what else Ishould added.

I found a solution. I need to set currentHp textview width to wrap content.

Your current Hp has a width 168 dp.
For this reason it is taking that place and after that place your a text is showing.
So you have make the width of current Hp to wrap-content . Then the text a will stay like others.

You can check this code to solve the issue
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#color/semiTrans"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/llHeader"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/text"
android:layout_marginRight="5dp"
app:srcCompat="#android:drawable/ic_dialog_info" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_vertical|center_horizontal"
android:text="CONTINUE INFO"
android:textColor="#000"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl2"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/llHeader"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/currentHp"
android:textStyle="bold"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:text="Current HP: "
android:textSize="18sp"/>
<TextView
android:id="#+id/nextHp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/currentHp"
android:layout_marginEnd="62dp"
android:layout_toStartOf="#+id/currentHpValue"
android:text="Next +10HP: "
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullHp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/nextHp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="#+id/currentHpValue"
android:text="HP fully recovered: "
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/currentHpValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/currentHp"
android:layout_toRightOf="#+id/currentHp"
android:text="a"
android:textSize="18sp"/>
<TextView
android:id="#+id/nextHpValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/currentHp"
android:layout_toEndOf="#+id/nextHp"
android:layout_toRightOf="#+id/nextHp"
android:text="a"
android:textSize="18sp"/>
<TextView
android:id="#+id/fullHpValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/fullHp"
android:layout_alignBottom="#+id/fullHp"
android:layout_toEndOf="#+id/fullHp"
android:layout_toRightOf="#+id/fullHp"
android:text="a"
android:textSize="18sp"/>
<TextView
android:id="#+id/tvAdditionalInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_below="#id/fullHp"
android:textSize="18sp"
android:layout_centerHorizontal="true"
android:text="Additional info"/>
</RelativeLayout>
<Button
android:id="#+id/dialogButtonOK"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rl2"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginHorizontal="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/button"
android:text=" Ok " />
</RelativeLayout>

App crashes when </ScrollView> put at end

full file follows: trying to have full scroll vertical in android device but putting scroll view at end of file produces crash
`<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scrollView"
android:layout_alignParentStart="true"
android:layout_marginTop="56dp" />
<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="serving good people with special deals. "
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, Chichen Itza."
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, Taxco, Palenque, Acapulco, Guanajuato,
Monterrey, Tenacatita, Mascota"
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 to visit us for discounts on your hotel bookings"
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>`
when ScrollView added after Relative layout file won't open put it in brackets proceeded with backslash /
perhaps something I put in between the first and last ScrollView?
I noticed in the examples you show, scrollview appears in the beginning.

I reproduced your activity and after I removed the 2 backgrounds:
android:background="#mipmap/lpussy"
android:background="#mipmap/campa"
the activity does open fine.
Of course the scrollview is useless the way you use it, it must contain 1 container layout and inside that container all the views that you want to scroll.
Remove the backgrounds as well and try again. Maybe the problem is there.

<ScrollView xmlns: android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
your views
</LinearLayout>
</ScrollView>
as scroll view can only contain a sinle child , so wrapping your views in a layout will work

<?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="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp" >
<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="serving good people with special deals. "
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, Chichen Itza."
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, Taxco, Palenque, Acapulco, Guanajuato,
Monterrey, Tenacatita, Mascota"
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 to visit us for discounts on your hotel bookings"
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>

ScrollView must have a single child.
If you want your full layout to be scrollable then add at the top.
<?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:background="#color/background_grey"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView"
android:background="#ffffff"
android:foreground="#05ffffff"
android:foregroundTint="#03ffffff"
android:text="serving good people with special deals. "
android:textColor="#000000" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/text1"
android:text="Cancun, Playa del Carmen, Chichen Itza." />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/editText2"
android:text="Holbox, Taxco, Palenque, Acapulco, Guanajuato,
Monterrey, Tenacatita, Mascota" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/editText5"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/editText3"
android:background="#mipmap/ic_launcher"
tools:ignore="ContentDescription" />
<EditText
android:id="#+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/editText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/editText"
android:layout_below="#+id/editText"
android:ems="10"
android:inputType="textEmailAddress"
android:text="thewebmaster#cancunsteve.com" />
<EditText
android:id="#+id/editText4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/editText3"
android:layout_marginLeft="42dp"
android:layout_marginStart="32dp"
android:ems="10"
android:inputType="phone"
android:text=" 011 52 998 8873919" />
<EditText
android:id="#+id/editText5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText4"
android:layout_toEndOf="#+id/scrollView"
android:layout_toRightOf="#+id/scrollView"
android:text="be sure to visit us for discounts on your hotel bookings" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton"
android:text="click buttons multiple times to change state" />
</LinearLayout>
</ScrollView>
</RelativeLayout>

To make RelativeLayout scrollable, put it inside LinearLayout and
then put that LinearLayout inside ScrollView. This will solve the
problem.
Use the format shown below.
<ScrollView xmlns: android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
...
...
...
</RelativeLayout>
</LinearLayout>
</ScrollView>
UPDATE:
Step 1:
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scrollView"
android:layout_alignParentStart="true"
android:layout_marginTop="56dp"> <---- LOOK HERE (remove /)
Step 2:
</ScrollView> <---- LOOK HERE (end the ScrollView before RelativeLayout)
</RelativeLayout>

As per your xml,
Its better to swap the top two element tags in your xml file.
So that yor RelativeLayout will become a child of ScrollView. and You dont have to edit your remaining layout elements
The result will be..
< 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:id="#+id/scrollView"
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:layout_alignParentStart="true"
android:layout_marginTop="56dp" >
And it should end like..
</RelativeLayout>
</ScrollView>
Addition:
You can replace the Relative Layout with a LinearLayout to get Rid of scrollView Errors...
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:orientation="vertical"
android:layout_marginTop="56dp" >
<ImageView android:id="#+id/imageView"
android:layout_column="1"
android:background="#ff0f"
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="serving good people with special deals. "
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, Chichen Itza."
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, Taxco, Palenque, Acapulco, Guanajuato,
Monterrey, Tenacatita, Mascota"
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="#f0f0"
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="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText5"
android:text="be sure to visit us for discounts on your hotel bookings"
android:layout_below="#+id/editText4" />
<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" />
</LinearLayout>
</ScrollView>

Scale imageview on tablet with original aspect

I have the code below and I face a problem with the image view "#+id/logo_skilfull" because it does not keep the aspect.. I think is because of the scaleType or the adjustViewBounds..
image in tablet
image in a phone (I want this)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:keepScreenOn="true" >
<View
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/view2"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/registration_background"
android:orientation="vertical"
android:padding="25dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/member_login_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:text="Ingresá tu DNI"
android:textSize="25dp"
android:textStyle="bold"
android:typeface="monospace" />
<EditText
android:id="#+id/username_edtext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/member_login_tv"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:background="#drawable/register_uname"
android:gravity="center"
android:hint="Documento"
android:imeOptions="actionDone"
android:inputType="number"
android:singleLine="true"
android:textColor="#000000"
android:textSize="30dp"
android:textStyle="bold" />
<Button
android:id="#+id/login_button"
style="#style/button_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/username_edtext"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:background="#drawable/button_access"
android:text="Aceptar"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/logo_skilfull"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/logos"
android:scaleType="matrix"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</LinearLayout>
<View
android:id="#+id/view2"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
<ImageView
android:id="#+id/view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="#drawable/member_imview" />
</RelativeLayout>

You should read about the ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
This is a problem changing the size of the View. You need to set scaleType.
Try fitStart.
<ImageView
android:id="#+id/logo_skilfull"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/logos"
android:scaleType="fitStart"
android:layout_alignParentBottom="true" />

why is android:layout_above doesn't work in

I have this layout
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/comments_list" android:layout_gravity="center"
android:layout_below="#+id/phone_editText" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:layout_above="#+id/bottom_container"
android:layout_alignRight="#+id/search_btn" android:layout_alignEnd="#+id/search_btn"/>
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/phone_editText"
android:hint="enter phone"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blocked"
android:id="#+id/isBlocked_cb"
android:layout_toStartOf="#+id/phone_editText"
android:layout_toLeftOf="#+id/phone_editText"
android:layout_above="#+id/comments_list"
android:checked="true" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="search"
android:id="#+id/search_btn"
android:layout_toEndOf="#+id/phone_editText"
android:layout_toRightOf="#+id/phone_editText"
android:layout_above="#+id/comments_list"
android:layout_alignParentTop="true" android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" android:onClick="foo"/>
<RelativeLayout android:id="#+id/bottom_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<AutoCompleteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/comment_text"
android:hint="enter comment"
android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"/>
<Button style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Add" android:id="#+id/add_btn"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/comment_text" android:layout_alignTop="#+id/comment_text"/>
</RelativeLayout>
<LinearLayout
android:focusable="true" android:focusableInTouchMode="true"
android:layout_width="0px" android:layout_height="0px"/>
</RelativeLayout>
I want bottom_container to be below my ListView
but in the simulator they seems one above the other:

Your question it's pretty incomplete, but I see some potential error in your xml about "above"
For example
android:layout_above="#+id/comments_list"
android:layout_alignParentTop="true" android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" android:onClick="foo"/>
This is an error, you can not declare align parent top and end togheter... and in any case, If I'm right, those ovverride layout_above.

How to show three labels and spinner just below my textbox?

I am working with android and I have designed my xml in which I am showing three buttons at the bottom of my screen and also I am showing a textbox (textboxA) at the center of my screen along with three buttons at the bottom of the screen.
Now I would like to show three labels and three spinners just below the textboxA Is possible to do? I tried using the below code but some of my labels and spinners are off
textboxA
labelA: SpinnerA
labelB: SpinnerB
labelC: SpinnerC
Below is my xml layout -
<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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonA" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonB" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonC" />
</LinearLayout>
<EditText
android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="textboxA"
android:inputType="text" >
</EditText>
<TextView
android:id="#+id/text_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Radius1: " />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/edittext"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/text_view_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Radius2: " />
<Spinner
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/edittext"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Radius3: " />
<Spinner
android:id="#+id/spinner3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/edittext"
android:layout_centerHorizontal="true" />
Is there anything wrong I am doing here?

If you are using RelativeLayout you should use toLeftOf or above or below xml properties in the items to define their positions
Edit:
Try this layout, obviously you will have to tweek it a bit to fullfil your needs:
<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:orientation="vertical" >
<EditText
android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="textboxA"
android:inputType="text" >
</EditText>
<LinearLayout
android:id="#+id/firstRadius"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/edittext" >
<TextView
android:id="#+id/text_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radius1: " />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/secondRadius"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstRadius" >
<TextView
android:id="#+id/text_view_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radius2: " />
<Spinner
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/thirdRadius"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/secondRadius" >
<TextView
android:id="#+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radius3: " />
<Spinner
android:id="#+id/spinner3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonA" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonB" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonC" />
</LinearLayout>
</RelativeLayout>
Hope it is helpful.

Categories