Question

I’m trying to create a very simple android screen with the following content: top banner, webview and bottom banner. for some reason, i can’t do it. my xml look like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/FrameLayout02"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:fitsSystemWindows="true" android:isScrollContainer="false">


    <ImageView android:layout_width="wrap_content" android:layout_above="@+id/Web"
        android:layout_height="fill_parent" android:layout_gravity="top"
        android:src="@drawable/logo"></ImageView>


    <WebView android:layout_gravity="center" android:id="@+id/Web" 
        android:layout_height="fill_parent" android:layout_width="fill_parent"></WebView>

    <ImageView android:layout_width="wrap_content" android:layout_below="@+id/Web"
        android:layout_height="fill_parent" android:layout_gravity="bottom"
        android:src="@drawable/logo"></ImageView>

</LinearLayout>

what is wrong?

Thanks,
Daniel

Answer 1

Short answer all is wrong. Your code is a mess.

Long answer. You are trying to have an ImageView above a WebView and at the bottom another ImageView. I’m not exactly sure what of the mistakes broke it but that’s also not important. Take a look at my example XML code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView android:id="@+id/topimage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:src="@drawable/icon"/>
    <ImageView android:id="@+id/bottomimage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:src="@drawable/icon"/>
    <WebView android:id="@+id/web"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/topimage"
        android:layout_above="@id/bottomimage"/>
</RelativeLayout>

Now what my XML does is simple. It uses a RelativeLayout as a container to allow a more flexible child alignment. The ImageView called topimage will adjust its height to its content and fill the parent in width. It is aligned to its parents top. The second ImageView is similar with the only exception that it is pinned to its parents bottom. The WebView is aligned in between both ImageViews. It adjust it’s height to the ‘ImageView`s heights.

Try to always keep some kind of structure in your XML and also Java code so you and also others can throw a look at it without starting to cry.