I'm struggling with the content size of a scrollview in Android Studio.
I've made a simple scrollview with some images in it and textviews.
Everything works perfectly, but I'm struggling with one thing: The content size of the scrollview (like on iOS). I can't get the content size of the scrollview under control..
Now I have a white space at the end of the scrollview, but I don't want the white space to be the end of my scrollview (I think this is because the content size of my scrollview is too high, but I don't know how to control this). I want an image to be the end of the scrollview.
Here is my .xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="285dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="De schoen heeft u als bescherming van uw voet:"
android:id="#+id/textView"
android:layout_marginLeft="20dp"
android:layout_marginTop="15dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView7"
android:background="#drawable/inhousebtn"
android:layout_marginLeft="10dp"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Dus ook in huis, schoen aan!"
android:id="#+id/textView5"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView8"
android:background="#drawable/nietblotevoet"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Nooit op blote voeten lopen"
android:id="#+id/textView6"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView9"
android:background="#drawable/nietsokken"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Nooit op sokken lopen"
android:id="#+id/textView7"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView10"
android:background="#drawable/noslippers"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Geen slippers/sandalen"
android:id="#+id/textView8"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView12"
android:background="#drawable/zittenddouchen"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Zittend douchen"
android:id="#+id/textView9"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="55dp"
android:id="#+id/imageView"
android:background="#drawable/underthingbescherming"
android:layout_gravity="center"
android:layout_marginTop="30dp" />
</LinearLayout>
</ScrollView>
Unfortunately I don't have the reputation to post images (If I had, this would be clearer).
Remove this
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
or change it to
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
let me know if you still have problems after that.
Related
Expected Result
Achieved Result
i am able to acheive everything but not able to place image (+ sign) between two layouts as described.
Following is the code i have used. i am not getting idea how should i place ( + sign image ) overlapping between two relative layouts.
I have tried placing imageview between 2 layouts but it takes space between layouts , i want overlapping between 2 layouts.
If anyone has come across such situation before or can help figure out this problem i would be very much grateful to them. thanks in advance.
<LinearLayout
android:id="#+id/line3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/indicator"
android:orientation="horizontal"
android:weightSum="4">
<RelativeLayout
android:id="#+id/line3_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#CCCCCC"
android:padding="#dimen/line3_layout_padding">
<TextView
android:id="#+id/textRent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Rent"
android:textColor="#999999"
android:textSize="#dimen/line3_text1_size" />
<TextView
android:id="#+id/textRentValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textRent"
android:layout_centerHorizontal="true"
android:text="€30.00"
android:textColor="#999999"
android:textSize="#dimen/line3_text2_size" />
<TextView
android:id="#+id/textRentPerDay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textRentValue"
android:layout_centerHorizontal="true"
android:text="Per day"
android:textColor="#999999"
android:textSize="#dimen/line3_text1_size" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/line3_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FF3333"
android:gravity="center"
android:padding="#dimen/line3_layout_padding">
<TextView
android:id="#+id/textIns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Insurance"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text1_size" />
<TextView
android:id="#+id/textInsValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textIns"
android:layout_centerHorizontal="true"
android:text="€4.00"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text2_size" />
<TextView
android:id="#+id/textInsPerDay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textInsValue"
android:layout_centerHorizontal="true"
android:text="Per day"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text1_size" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.2"
android:background="#33CC66"
android:gravity="center"
android:padding="#dimen/line3_layout_padding">
<TextView
android:id="#+id/textEbysComm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Ebys commission"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text1_size" />
<TextView
android:id="#+id/textEbysCommValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textEbysComm"
android:layout_centerHorizontal="true"
android:text="€2.00"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text2_size" />
<TextView
android:id="#+id/textEbysCommPerDay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textEbysCommValue"
android:layout_centerHorizontal="true"
android:text="Per day"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text1_size" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:background="#6666CC"
android:gravity="center"
android:padding="#dimen/line3_layout_padding">
<TextView
android:id="#+id/textTotalCost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Total Cost"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text1_size" />
<TextView
android:id="#+id/textTotalCostValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textTotalCost"
android:layout_centerHorizontal="true"
android:text="€36.00"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text2_size" />
<TextView
android:id="#+id/textTotalCostPerDay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textTotalCostValue"
android:layout_centerHorizontal="true"
android:text="Per day"
android:textColor="#FFFFFF"
android:textSize="#dimen/line3_text1_size" />
</RelativeLayout>
</LinearLayout>
create three individual layouts as below and place them between RelativeLayouts as
XML for sub type
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="60dp">
<View
android:layout_width="30dp"
android:background="#F00"
android:layout_alignParentLeft="true"
android:layout_height="match_parent"/>
<View
android:layout_width="30dp"
android:background="#0F0"
android:layout_alignParentRight="true"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:scaleType="fitCenter"
android:layout_centerInParent="true"
android:src="#android:drawable/ic_dialog_info"/>
</RelativeLayout>
Please take a look at the following layout. This layout is used in a TableView and is applied in each row. The question is why the button in each tablerow is only clickable in the upper half of the tableviewcell when transparency is applied.
Without transparency the button fills up the correct amount of space.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<ImageButton
android:id="#+id/btnSelect"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#color/white"
android:contentDescription="Geselecteerde rekening"
android:src="#drawable/checkbox_akkoord_uit" />
<ImageView
android:id="#+id/imgPhoto"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignBottom="#+id/btnSelect"
android:layout_marginLeft="4dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/btnSelect"
android:scaleType="fitCenter"
android:src="#drawable/icon_foto" />
<ImageView
android:id="#+id/imgPencil"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignBottom="#+id/btnSelect"
android:layout_marginLeft="4dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/btnSelect"
android:src="#drawable/potlood" />
<ImageView
android:id="#+id/ivDrag"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_centerVertical="true"
android:src="#drawable/settings" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dip"
android:layout_toLeftOf="#+id/ivDrag"
android:layout_toRightOf="#+id/imgPhoto"
android:orientation="vertical" >
<TextView
android:id="#+id/txtDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="Medium Text Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/green"
android:textSize="#dimen/text_size_1" />
<TextView
android:id="#+id/txtProductname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/green"
android:textSize="#dimen/text_size_2" />
<TextView
android:id="#+id/txtAccountnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/green"
android:textSize="#dimen/text_size_3" />
</LinearLayout>
<Button
android:id="#+id/btnModify"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/btnSelect"
android:layout_toLeftOf="#+id/ivDrag" />
Any help is greatly appreciated!
Regards, Raoul
Turns out that the Button needs a minimum height. So the altered XML definition could be:
<Button
android:id="#+id/btnModify"
android:background="#android:color/transparent"
android:minHeight="40dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/btnSelect"
android:layout_toLeftOf="#+id/ivDrag" />
This worked for me!
Regards, Raoul.
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'm trying to get the button to the bottom the layout, and it just won't work...
The button is displaying it self on the image that should be above it.
Here is the xml code:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars = "vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible" />
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageview4"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
And the result is:
Thanx upfront.
You used android:layout_alignBottom="#+id/imageview4"
This means you align the bottom of your button with the bottom of your image.
You have to use android:layout_below="#+id/imageview4"
EDIT: I don't say this is the best solution, because of multiple layouts (for optimisation...) but this should work:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp"/>
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal"/>
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars="vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible"/>
</RelativeLayout>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Download & Install"/>
</LinearLayout>
</ScrollView>
I added a linear layout in which I put the content, and the button.
Hope this will work.
Do you just want the image that the button is over to shrink in order to make room for it? If so, you need to put the Imageview that contains that image as the very last item in your relative layout. It's going to allocate space for everything but the image, and then give the remaining space to the image, which is why it needs to be last.
Also, I suggest giving your imageViews more informative names than "imageView#", since it's kind of difficult to tell which is which.
You might want to wrap you images in a HorizontalScrollView to maintain full height and width of all your images. I changed a lot of the ViewGroups' widths and heights to accommodate the HorizontalScrollView, finally I set the Button below the images:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:maxLines="10"
android:scrollbars="vertical"
android:text=""
android:width="600px" />
<HorizontalScrollView
android:id="#+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/images"
android:layout_centerHorizontal="true"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
Understand that nesting a HorizontalScrollView inside a ScrollView (or vica versa) does not create a smooth scrolling effect in the x & y directions simultaneously. But you can create this effect as discussed here: Scrollview vertical and horizontal in android.
I am using eclipse I have views with images and buttons with their width and height set in dp:
<Button
android:id="#+id/btn_menu_games"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_games"
android:onClick="goToGames" />
But when I use a different device the images and buttons do not scale relative to the screen, so they are really big on a small screen and really small on a big screen. Am I doing something wrong in the view? Do I need to set anything in the Manifest?
Thanks.
Full code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_portrait"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="234dp"
android:layout_height="156dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:src="#drawable/flag" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginRight="20dp" >
<Button
android:id="#+id/btn_menu_games"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_games"
android:onClick="goToGames" />
<com.academyGeneric.MyTextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#8c0101"
android:text="Games"
android:layout_marginBottom="5dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/btn_menu_lessons"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_lessons" />
<com.academyGeneric.MyTextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Lessons"
android:layout_marginBottom="5dp"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/btn_menu_settings"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_settings"
android:onClick="goToSettings" />
<com.academyGeneric.MyTextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Settings"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="20dp" >
<Button
android:id="#+id/btn_menu_dictionary"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_dictionary"
android:onClick="goToDictionary" />
<com.academyGeneric.MyTextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Dictionary"
android:layout_marginBottom="5dp"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/btn_menu_statistics"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_stats" />
<com.academyGeneric.MyTextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Statistics"
android:layout_marginBottom="5dp"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<Button
android:id="#+id/close"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_exit"
android:onClick="exit" />
<com.academyGeneric.MyTextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Exit"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
If you really need it to have a certain aspect ratio, you should definitely consider using weights.
If there are two buttons in a linear layout parent, with both weight 1, they will both take up
1/2 the width of the screen
proportion of button relative to screen = (view_weight/(total_weights of all views)
Take a look here: http://blog.stylingandroid.com/archives/297
Otherwise, DP is correct.