Search code examples
androidandroid-layoutscrollviewmarginandroid-scrollview

Margin issue w/ Android layouts (ScrollView & Linear)

The issue:

I am attempting to remove the space between the images/views so that it looks as if the background is actually one image. Different approaches or a way to fix this issue would be appreciated.

Example Image : enter image description here

    <?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:orientation="vertical"
android:background="#edeab5">

    <ImageView
        android:id="@+id/bgnewsfeedtop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="0dp"
        android:src="@drawable/newsfeedtop" />

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_margin="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >

<ImageView
    android:id="@+id/bgnewsfeedleft"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="0dp"
    android:layout_marginTop="0dp"
    android:layout_marginBottom="0dp"
    android:src="@drawable/newsfeedleft" />

    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/scroller"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:fillViewport="true"
        android:src="@drawable/newsfeedbg" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:cacheColorHint="@android:color/transparent"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/btn1_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:src="@drawable/filler" />

            <ImageView
                android:id="@+id/btn2_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:src="@drawable/filler" />

            <ImageView
                android:id="@+id/btn3_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:src="@drawable/filler" />

            <ImageView
                android:id="@+id/btn4_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:src="@drawable/filler" />

            <ImageView
                android:id="@+id/btn5_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:src="@drawable/filler" />

            <ImageView
                android:id="@+id/btn6_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:src="@drawable/filler" />

            <ImageView
                android:id="@+id/btn7_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:src="@drawable/filler" />
        </LinearLayout>
    </ScrollView>

    <ImageView
    android:id="@+id/bgnewsfeedright"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="0dp"
    android:layout_marginBottom="0dp"
    android:src="@drawable/newsfeedright" />
</LinearLayout>

<ImageView
    android:id="@+id/bgnewsfeedbot"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="0dp"
    android:src="@drawable/newsfeedbot" />

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="75dp"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/menu_house_manager"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager2"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager3"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager4"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/menu_house_manager"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager2"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager3"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager4"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

</LinearLayout>
</LinearLayout>

EDIT****

After help was provided, revised code and image:

<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="#edeab5" >


   <View
        android:id="@+id/newstop"
        android:layout_width="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_height="15dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/newsfeedtop"
        />

   <View
        android:id="@+id/newsleft"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_marginLeft="10dp"
        android:background="@drawable/newsfeedleft"

        android:layout_toLeftOf="@+id/scroller"
        android:layout_below="@+id/newstop"
        android:layout_above="@+id/newsbottom"
        />

   <View
        android:id="@+id/newsleft"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_marginRight="10dp"
        android:background="@drawable/newsfeedright"

        android:layout_toRightOf="@+id/scroller"
        android:layout_below="@+id/newstop"
        android:layout_above="@+id/newsbottom"
        />


   <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/scroller"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:fillViewport="true"
        android:background="#000000"
        android:layout_below="@+id/newstop">

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cc0000" >



            <ImageView
                android:id="@+id/btn1_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:background="#000000"
                android:contentDescription="@string/app_name" />

            <ImageView
                android:id="@+id/btn2_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn1_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name"/>

            <ImageView
                android:id="@+id/btn3_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn2_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name" />

            <ImageView
                android:id="@+id/btn4_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn3_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name" />

            <ImageView
                android:id="@+id/btn5_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn4_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name" />


            </RelativeLayout>
            </ScrollView>

   <View
        android:id="@+id/newsbottom"
        android:layout_width="fill_parent"
        android:layout_height="15dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/newsfeedbot"
        android:layout_below="@+id/scroller"
        />

   <LinearLayout
    android:id="@+id/buttonsrow1"
    android:layout_width="fill_parent"
    android:layout_height="75dp"
    android:orientation="horizontal"
    android:layout_marginTop="12dp"
    android:layout_below="@+id/newsbottom">

    <ImageView
        android:id="@+id/menu_house_manager"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager2"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager3"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager4"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

</LinearLayout>

   <LinearLayout
       android:id="@+id/buttonsrow2"
       android:layout_width="fill_parent"
       android:layout_height="75dp"
       android:layout_below="@+id/buttonsrow1"
       android:orientation="horizontal" >

    <ImageView
        android:id="@+id/menu_house_manager"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager2"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager3"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

    <ImageView
        android:id="@+id/menu_house_manager4"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="12dp"
        android:src="@drawable/btnhousemanager"  />

</LinearLayout>

   </RelativeLayout>

enter image description here

Solution

  • Have you already done something with relative layouts?

    This is how I would solve this. You give every view an id by 

    android:id = "@+id/whateveryouwanttonameit"

    and then you can align other views by reffering to this ids.

    For example:

    <ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:id="@+id/newGameButton"
    android:text="@string/newGameButton"
    android:background="@drawable/newgame"
    android:contentDescription="@string/feld"/>

<ImageView 
    android:layout_alignLeft="@id/newGameButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_above="@id/newGameButton"
    android:src="@drawable/x"
    android:id="@+id/sp2"
    android:contentDescription="@string/feld"/>

    in this example the ImageViews Left edge gets aligned with the left edge of the ImageButton by using: 

    android:layout_alignLeft="@id/newGameButton"

    It is also exactly above the newGameButton without any space between by adding 

    android:align_above="@id/newGameButton"

    This way you can build your whole activity layout.

    So here is the example: 

    <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="#FFFFFF" >


   <View
        android:layout_width="fill_parent"
        android:layout_height="15dp"
        android:background="#FF0000"
        android:layout_above="@id/scroller"
        />


   <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/scroller"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:fillViewport="true"
        android:background="#000000">

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FF00" >



            <ImageView
                android:id="@+id/btn1_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:background="#000000"
                android:contentDescription="@string/app_name" />

            <ImageView
                android:id="@+id/btn2_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn1_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name"/>

            <ImageView
                android:id="@+id/btn3_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn2_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name" />

            <ImageView
                android:id="@+id/btn4_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn3_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name" />

            <ImageView
                android:id="@+id/btn5_news_feed"
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="2dp"
                android:layout_below="@id/btn4_news_feed"
                android:background="#000000"
                android:contentDescription="@string/app_name" />


            </RelativeLayout>
            </ScrollView>


   </RelativeLayout>

    gives me this layout:

    layout

    i kept the margin attribute and made the background of the scrollview in green.

    With the below attribute I made the layout.

    And just for showing you that there is no space in between to elements if you not define it I added a red View Element without a margin attribute.

    I havent done the whole layout for you but just copied some of it to show how you can do it with a RelativeLayout. I hope this works out for you ;)