I am developing a simple application on web view. When loading the text in web view the text is exceeding the page in its width, can anyone help me to display the text in next line instead of going out of the page? The image is as shown below!
enter image description here
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="510dp" >
<TextView
android:id="#+id/txttimemlcq"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="30dp"
android:text="#string/hhjh"
android:textColor="#FF0000"/>
<WebView
android:id="#+id/webviewmultiple"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txtquiztype" />
<CheckBox
android:id="#+id/checkbox0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/webviewmultiple"
android:text="CheckBox" />
<CheckBox
android:id="#+id/checkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/checkbox0"
android:text="CheckBox" />
<CheckBox
android:id="#+id/checkbox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/checkbox1"
android:text="CheckBox" />
<CheckBox
android:id="#+id/checkbox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/checkbox2"
android:text="CheckBox" />
<Button
android:id="#+id/btnbackmul"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/bac" />
<Button
android:id="#+id/btnnextmul"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/nextmul" />
<Button
android:id="#+id/btnsubmitmul"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/submitmul" />
<TextView
android:id="#+id/txtquiztype"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/multi"
android:textColor="#00FFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/txtmultiquesno"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/txtquiztype"
android:text="TextView"
android:layout_marginLeft="10dp"
android:textColor="#FF9933"/>
Use <pre> tag instead of <p> in your HTML and give <pre> style as
pre{white-space: pre-wrap; word-break: break-all;}
Related
I can't figure out how to get these radio groups/text views into a scrollview. Can anyone help me? Heres what i've tried but I keep getting the error scrollview can only host one child and I don't know how to fix it.
<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"
tools:context=".ContactSettingsActivity" >
<RelativeLayout
android:id="#+id/navbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/navbar_background" >
<ImageButton
android:id="#+id/imageButtonList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/imageButtonMap"
android:src="#drawable/contactlisticon" />
<ImageButton
android:id="#+id/imageButtonMap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/mapicon" />
<ImageButton
android:id="#+id/imageButtonSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/imageButtonMap"
android:src="#drawable/settingsicon" />
</RelativeLayout>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/navbar">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Sort Contact By:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:layout_marginLeft="35dp"
android:layout_marginTop="10dp"
>
<RadioButton
android:id="#+id/radioName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Name" />
<RadioButton
android:id="#+id/radioCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City" />
<RadioButton
android:id="#+id/radioBirthday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Birthday" />
</RadioGroup>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/radioGroup1"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="Sort Order:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RadioGroup
android:id="#+id/radioGroup2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="35dp"
android:layout_marginTop="10dp"
android:layout_below="#+id/textView2" >
<RadioButton
android:id="#+id/radioAscending"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Ascending" />
<RadioButton
android:id="#+id/radioDescending"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Descending" />
</RadioGroup>
</ScrollView>
</RelativeLayout>
Choose a single container layout for all the child items you want to appear in a ScrollView. Most of the time this will be a LinearLayout to get them stacked vertically, but it could really be any view you want. You just need to choose one and arrange the children in it manually.
Add a layout inside scroll view and move the ui widgets(textview and radiogroup) inside that layout.
I am creating gui in relative layout and reason i am using relative layout is that, i am using a fakeview in the middle of the screen to align all the other objects properly in the center of the screen. But the output on my mobile is completely different and is completely stretch out.
My problem is that the black line in the middle is supposed to be just 1dp in height, still it appears as 50dp in height on my device. Also there is huge gap in the middle below exchange rate and above discount amt($). Such problems weren't there in the emulator. the entire screen is divided into two parts, the lower part and upper part and there is gap in middle.
I am using nexus 4 running stock rom 4.4.2 to test my application.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#FFFFE0">
<View android:id="#+id/fakeView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/carat"
android:layout_marginTop="10dp"
android:layout_below="#+id/cut3"
android:layout_alignParentRight="true"
android:layout_alignLeft="#+id/fakeView"
android:layout_marginRight="20dp"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/price"
android:layout_above="#+id/caratrs"
android:layout_alignParentRight="true"
android:layout_alignLeft="#+id/fakeView"
android:layout_marginRight="20dp"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/list"
android:layout_marginRight="20dp"
android:layout_below="#+id/carat"
android:layout_alignParentRight="true"
android:layout_alignLeft="#+id/fakeView" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/total"
android:layout_marginRight="20dp"
android:layout_above="#+id/calculate"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/fakeView" />
<Spinner
android:drawSelectorOnTop="true"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/shape2"
android:layout_toLeftOf="#+id/color"
android:layout_alignLeft="#+id/cut3" />
<Spinner
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/cut3"
android:layout_below="#+id/shape2"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/fakeView"
android:layout_marginLeft="20dp"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/color"
android:layout_above="#+id/cut3"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/fakeView"
android:layout_marginRight="20dp" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/clarity"
android:layout_below="#+id/shape2"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/shape2"
android:layout_marginRight="20dp"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/discount"
android:layout_marginRight="20dp"
android:layout_below="#+id/list"
android:layout_toRightOf="#+id/fakeView" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/converter"
android:layout_marginRight="20dp"
android:layout_below="#+id/discount"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/fakeView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calculate"
android:id="#+id/calculate"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/black"
android:layout_below="#+id/converter"
android:layout_marginTop="20dp"
android:layout_alignParentLeft="true"
android:id="#+id/view"
android:layout_above="#+id/textView5" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/discamt"
android:layout_below="#+id/view"
android:layout_above="#+id/price"
android:layout_alignLeft="#+id/fakeView" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:layout_marginRight="20dp"
android:id="#+id/caratrs"
android:layout_above="#+id/total"
android:layout_toRightOf="#+id/fakeView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rap Price"
android:id="#+id/textView2"
android:layout_above="#+id/discount"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Discount(%)"
android:id="#+id/textView3"
android:layout_above="#+id/converter"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exchange Rate"
android:id="#+id/textView4"
android:layout_alignBottom="#+id/converter"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Discount Amt($)"
android:id="#+id/textView5"
android:layout_above="#+id/price"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="30dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PPC($)"
android:id="#+id/textView6"
android:layout_above="#+id/caratrs"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ppcrs"
android:id="#+id/textView7"
android:layout_above="#+id/total"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/Rs"
android:id="#+id/textView8"
android:layout_above="#+id/calculate"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Carat :"
android:id="#+id/textView9"
android:layout_alignBottom="#+id/carat"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
</RelativeLayout>
In your black view remove
android:layout_above="#+id/textView5"
You'll end up with the following:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/black"
android:layout_below="#+id/converter"
android:layout_marginTop="20dp"
android:layout_alignParentLeft="true"
android:id="#+id/view" />
You're already anchoring the view to converter
So you don't need the extra anchor.
I strongly recommend you not to use the fake view, from the screenshot, it is better to use linearlayout to hold blanks in the screen, and each blank you can use a relativelayout, in this way, this layout will look well in all devices
How can I vertically centre the image in the example depicted below?
I need it to look like this:
The layout I'm using is as follows:
<RelativeLayout
android:id="#+id/layoutBranding"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/banner"
android:layout_margin="7dp">
<ImageView
android:id="#+id/imgInstallerLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="7dp"
android:src="#drawable/logonarrow"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/txtInstallerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[Installer Description]"
android:textSize="20sp"
android:layout_toRightOf="#id/imgInstallerLogo"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/txtIntallerPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[Installer Phone Number]"
android:textSize="15sp"
android:layout_below="#id/txtInstallerName"
android:layout_toRightOf="#id/imgInstallerLogo" />
</RelativeLayout>
Remove the android:layout_alignParentTop="true" row.
Remove android:layout_alignParentTop="true" from xml in ImageView.
Updated code
<ImageView
android:id="#+id/imgInstallerLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="7dp"
android:src="#drawable/logonarrow"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
Remove the android:layout_alignParentTop="true" from your ImageView.
<ImageView
android:id="#+id/imgInstallerLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="7dp"
android:src="#drawable/logonarrow"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
Try the below code
<ImageView
android:id="#+id/imgInstallerLogo"
android:layout_width="60dp"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="7dp"
android:src="#drawable/logonarrow" />
This should work
Use this:
<RelativeLayout
android:id="#+id/layoutBranding"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/banner"
android:layout_margin="7dp">
<ImageView
android:id="#+id/imgInstallerLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="7dp"
android:src="#drawable/logonarrow"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/txtInstallerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[Installer Description]"
android:textSize="20sp"
android:layout_toRightOf="#id/imgInstallerLogo"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/txtIntallerPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[Installer Phone Number]"
android:textSize="15sp"
android:layout_below="#id/txtInstallerName"
android:layout_toRightOf="#id/imgInstallerLogo" />
</RelativeLayout>
Remove the *android:layout_alignParentTop="true"* from your ImageView.
In my layout, there are an ImageView and a Button (they have botonordenes, and imagelogo as id:
<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="#drawable/fondo_descripcion_campania"
tools:context=".AlertDetailActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/logotipo_high_density_vinceri_movil" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:src="#drawable/titulo_orden_trabajo_oncheck_high_density_vinceri_movil" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/footer" />
<Button
android:id="#+id/botonrechaza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/botonacepta"
android:layout_alignBottom="#+id/botonacepta"
android:layout_toRightOf="#+id/botonacepta"
android:background="#drawable/rechazar_azafata_orden_trabajo_oncheck_high_density_vinceri_movil" />
<Button
android:id="#+id/botonacepta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView6"
android:layout_alignParentLeft="true"
android:background="#drawable/aceptar_azafata_orden_trabajo_oncheck_high_density_vinceri_movil" />
<Button
android:id="#+id/botonordenes"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_toRightOf="#+id/imagelogo"
android:layout_below="#+id/nombrecampaign"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:background="#drawable/btn_ver_ordenes_trabajo" />
<ImageView
android:id="#+id/botonalertdetailshome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView4"
android:layout_alignParentRight="true"
android:src="#drawable/home_high_density_vinceri_movil" />
<ImageView
android:id="#+id/botonalertdetailsos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/botonrechaza"
android:layout_alignParentTop="true"
android:src="#drawable/icono_sos_vinceri_movil_azafatas" />
<TextView
android:id="#+id/nombrecampaign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/botonordenes"
android:layout_below="#+id/imageView4"
android:text="Nombre CampaƱa"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/botonubicaciones"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignBottom="#+id/imageView2"
android:layout_alignLeft="#+id/botonordenes"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/btn_ver_ubicaciones_campania" />
<TextView
android:id="#+id/textdescenc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_toRightOf="#+id/imageView5"
android:layout_alignBottom="#+id/imageView5"
android:text="#string/desc"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#+id/textofechainicioenc"
android:src="#drawable/icono_calendario" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:layout_marginTop="14dp"
android:src="#drawable/icono_descripcion" />
<TextView
android:id="#+id/textdetailfechainicio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_toRightOf="#+id/textofechainicioenc"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_above="#+id/botonrechaza"
android:layout_alignLeft="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_below="#+id/textdescenc"
android:orientation="vertical" >
<TextView
android:id="#+id/textdescdetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<TextView
android:id="#+id/textofechainicioenc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_alignRight="#+id/imageView1"
android:layout_marginRight="15dp"
android:text="#string/fechainicio"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imagelogo"
android:layout_marginTop="10dp"
android:src="#drawable/icono_mapa_ubicacion" />
<ImageView
android:id="#+id/imagelogo"
android:layout_width="69dp"
android:layout_height="65dp"
android:layout_alignBottom="#+id/botonordenes"
android:layout_alignRight="#+id/imageView2" />
As you can see, the image has android:layout_alignBottom="#+id/botonordenes". The problem is, the alignbottom is not working properly. In the emulator it is seen ok, but not in my device. The bottom line of the image is not aligned with the bottom line of the Button. The difference is not a lot, but it is visible. Why are not aligned? I tried to set a margin hoping it would push the image a bit to be aligned, but dont works. Anybody knows why this happens, and how to solve it? Thank you.
It either has to do with the predefined margins on Buttons or your hardcoded height and width values on the ImageView
What you are probably seeing is the difference between default android and what is implemented on your device for the image used on the default button. Try using one of the Holo themes and see if you still have the same issue.
I want to create a layout that appears on all devices as it does on my phone. I have tried to make it work for tablets, but it looks awful.
Here is what it should look like:
But here is how it appears on this tablet emulator:
What can I do to make it appear on all screen sizes like it is on my phone? I am currently using a RelativeLayout.
Here is my code:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/terranlogo1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:src="#drawable/terranlogo" />
<ImageView
android:id="#+id/protosslogo1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:src="#drawable/protosslogo" />
<ImageView
android:id="#+id/zerglogo1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:src="#drawable/zerglogo" />
<CheckBox
android:id="#+id/ck_t1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/terranlogo1"
android:layout_centerHorizontal="true" />
<CheckBox
android:id="#+id/ck_p1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/protosslogo1"
android:layout_below="#id/protosslogo1"
android:layout_marginLeft="25dp" />
<CheckBox
android:id="#+id/ck_z1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/zerglogo1"
android:layout_below="#id/zerglogo1"
android:layout_marginLeft="25dp" />
<ImageView
android:id="#+id/terranlogo2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#id/ck_t1"
android:layout_centerHorizontal="true"
android:src="#drawable/terranlogo" />
<ImageView
android:id="#+id/protosslogo2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_below="#id/ck_p1"
android:src="#drawable/protosslogo" />
<ImageView
android:id="#+id/zerglogo2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_below="#id/ck_z1"
android:src="#drawable/zerglogo" />
<CheckBox
android:id="#+id/ck_t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/terranlogo2"
android:layout_centerHorizontal="true" />
<CheckBox
android:id="#+id/ck_p2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/protosslogo1"
android:layout_below="#id/protosslogo2"
android:layout_marginLeft="25dp" />
<CheckBox
android:id="#+id/ck_z2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/zerglogo1"
android:layout_below="#id/zerglogo2"
android:layout_marginLeft="25dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/ck_t2"
android:layout_marginRight="18dp"
android:layout_marginTop="17dp"
android:gravity="center_vertical|center_horizontal"
android:text="Choose your opponets race(s) and your race(s)"
android:textSize="30dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Game Length"
android:textSize="15dp" />
<Spinner
android:id="#+id/s_answertime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView1"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/terranlogo2"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Mistakes Allowed"
android:textSize="15dp" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Answer Time"
android:textSize="15dp" />
<Spinner
android:id="#+id/s_mistakenumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/s_answertime"
android:layout_alignTop="#+id/s_answertime"
android:layout_toLeftOf="#+id/s_gametime"
android:layout_toRightOf="#+id/s_answertime" />
<Spinner
android:id="#+id/s_gametime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView3"
android:layout_alignLeft="#+id/protosslogo2"
android:layout_alignTop="#+id/s_mistakenumber" />
</RelativeLayout>
All help is appreciated, Lijap.
The spinners are stretched because you set layout_above and layout_below, so they stretch to accomodate both criteria. Remove one of these (probably layout_above) and set a reasonable fixed height for them (75dp?).
Also, your left/right most icon/checkboxes would probably look better with a nice healthy margin_left/right=50dp, to keep them from stretching all the way to the edge of the screen.