How to remove border between elements?

Question

I have a Relative Layout with 6 cards in it. This is my XML code:

<?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="fill_parent"
android:layout_height="match_parent"
android:padding="0dp"    
android:layout_margin="0dp"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
>
<View android:id="@+id/view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_centerHorizontal="true"/>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/Card_View1"
    android:layout_width="0dp"
    android:layout_height="190dp"
    android:layout_alignLeft="@id/view"
    android:layout_alignParentRight="true"
    android:onClick="openFirst"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/icontest"
         />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/Card_View2"
    android:layout_gravity="center"
    android:layout_toRightOf="@+id/Card_View1"
    android:layout_width="0dp"
    android:layout_height="190dp"
    android:layout_alignRight="@id/view"
    android:layout_alignParentLeft="true"
    android:onClick="openFirst"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/icontest"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/Card_View3"
    android:layout_gravity="center"
    android:layout_below="@+id/Card_View1"
    android:layout_width="0dp"
    android:layout_height="190dp"
    android:layout_alignRight="@id/view"
    android:layout_alignParentLeft="true"
    >
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/Card_View4"
    android:layout_gravity="center"
    android:layout_toRightOf="@+id/Card_View3"
    android:layout_below="@+id/Card_View2"
    android:layout_width="0dp"
    android:layout_height="190dp"
    android:layout_alignLeft="@id/view"
    android:layout_alignParentRight="true"
    >
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/Card_View5"
    android:layout_gravity="center"
    android:layout_below="@+id/Card_View3"
    android:layout_width="0dp"
    android:layout_height="190dp"
    android:layout_alignRight="@id/view"
    android:layout_alignParentLeft="true"
    >
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/Card_View6"
    android:layout_gravity="center"
    android:layout_below="@+id/Card_View4"
    android:layout_toRightOf="@+id/Card_View5"
    android:layout_width="0dp"
    android:layout_height="190dp"
    android:layout_alignLeft="@id/view"
    android:layout_alignParentRight="true"
    >
</android.support.v7.widget.CardView>
</RelativeLayout>

In Android Studio, all elements are right next to each other. No borders, nothing. When I start the app on my phone (Sony Xperia T), there is black border between the cards. How do I remove the border? I want the cards to take all the space on the screen.

Answer 1

It's easy to get lost in the relative layout which has many elements. I would kindly suggest using nested linear layouts and layout_weight.

Something like 2 horizontal linear layouts, each with a weight of 1 (so they would take up half a screen each), inside a vertical linear layout (so they'd be on top of each other). Then in each of those 2, use another 3 linear layouts, also each with the layout_weight set to 1, so they'd each take up 1/3 of the width of their parent. For each of the innermost linear layouts, set the width and height to 0 and the weight will take care of it.

Finally, in every of the 6 innermost LinearLayouts place a single CardView and set it's width and height to match_parent. That way you should get your screen divided into 6 even pieces for cards with no space beetween them AND it will work on different devices (yours won't because you have hardcoded values):

android:layout_height="190dp"

That's what's causing it to look different on Emulator and your phone (and probably even more different on another phone).