CODEWITHSUNDEEP
androidxmllayoutview
Tim
Tim

Reputation: 741

Missing items in a Relative Layout

I need to place six blocks in a a 2x3 grid in Android XML. The views I'm using are inside of a RelativeLayout, which is inside of another RelativeLayout. The six views as shown in my code below aren't producing any errors, but only four of them are showing up (the left bottom two are missing). I think it may have to do with the way I'm using layout_below and layout_toRightOf, but I can't figure out what exactly is going wrong. Here's my code, the problem is with the six views at the end of the xml.

<?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:background="#000000" >

<!-- / / / / / / / / / / / / / Borders / / / / / / / / / / / / / / / -->

 <View
    android:id="@+id/topBorder"
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:background="#01FF70"
    android:layout_alignParentTop="true"
    android:visibility="invisible" />

<View
    android:id="@+id/bottomBorder"
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:background="#FFDC00"
    android:layout_alignParentBottom="true"
    android:visibility="invisible" />

<View
    android:id="@+id/leftBorder"
    android:layout_width="15dp"
    android:layout_height="match_parent"
    android:background="#FF851B"
    android:layout_alignParentLeft="true" />

<View
    android:id="@+id/rightBorder"
    android:layout_width="15dp"
    android:layout_height="match_parent"
    android:background="#85144B"
    android:layout_alignParentRight="true"/>


<!-- / / / / / / / / / / / / / Left Panel / / / / / / / / / / / / / / / -->

<LinearLayout
    android:id="@+id/leftPanel"
    android:layout_below="@+id/topBorder"
    android:layout_toRightOf="@+id/leftBorder"
    android:layout_width="140dp"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="115dp"
        android:layout_height="115dp"
        android:layout_alignParentLeft="true"
        android:src="@drawable/spongebob" />

    <TextView
        android:id="@+id/txt_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minLines="3"
        android:maxLines="3"
        android:text="Insert text here insert text here insert text here insert text"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txt_size"
        android:layout_marginTop="-7dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minLines="1"
        android:maxLines="1"
        android:text="$3.00"
        android:textSize="30sp" />

</LinearLayout>

<View
    android:id="@+id/divider"
    android:layout_toRightOf="@id/leftPanel"
    android:background="#FFFFFF"
    android:layout_width="1dp"
    android:layout_height="185dp"
    android:layout_marginTop= "30dp" />


<!-- / / / / / / / / / / / / / Right Panel / / / / / / / / / / / / / / -->

<RelativeLayout
    android:id="@+id/rightContainer"
    android:layout_toRightOf="@+id/divider"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <View
        android:id="@+id/calorieBlock"
        android:layout_width="10dp"
        android:layout_height="65dp"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff" />

    <View
        android:id="@+id/carbBlock"
        android:layout_width="10dp"
        android:layout_height="65dp"
        android:layout_toRightOf="@+id/calorieBlock"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff" />

    <View
        android:id="@+id/tfatBlock"
        android:layout_width="10dp"
        android:layout_height="65dp"
        android:layout_toRightOf="@+id/carbBlock"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff" />

    <View
        android:id="@+id/proteinBlock"
        android:layout_width="10dp"
        android:layout_height="65dp"
        android:layout_below="@+id/calorieBlock"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff" />

    <View
        android:id="@+id/sfatBlock"
        android:layout_width="10dp"
        android:layout_height="65dp"
        android:layout_toRightOf="@+id/proteinBlock"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff" />

    <View
        android:id="@+id/sugarBlock"
        android:layout_width="10dp"
        android:layout_height="65dp"
        android:layout_below="@+id/tfatBlock"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff" />

</RelativeLayout>
</RelativeLayout>

Upvotes: 1

Views: 1183

Answers (2)

Ben
Ben

Reputation: 1295

If you're going to use relative layout you should specify as many relationships as possible. So sFatBlock should be below carbBlock for example as well as to the rightOf protein block. Right now you are only specifying either the x or y of each block.

You should also align your views to the parent. So the first row should all have alignParentTop true. And the first column should have alignParentLeft = true.

You may also want to consider a grid view for these elements in your view as that will do all of this alignment work for you.

Upvotes: 1

Atish Agrawal
Atish Agrawal

Reputation: 2877

check out this code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rightContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >

<View
    android:id="@+id/calorieBlock"
    android:layout_width="10dp"
    android:layout_height="65dp"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="15dp"
    android:background="#000000" />

<View
    android:id="@+id/carbBlock"
    android:layout_width="10dp"
    android:layout_height="65dp"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="15dp"
    android:layout_toRightOf="@id/calorieBlock"
    android:background="#000000" />

<View
    android:id="@+id/tfatBlock"
    android:layout_width="10dp"
    android:layout_height="65dp"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="15dp"
    android:layout_toRightOf="@id/carbBlock"
    android:background="#000000" />

<View
    android:id="@+id/proteinBlock"
    android:layout_width="10dp"
    android:layout_height="65dp"
    android:layout_below="@id/calorieBlock"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="15dp"
    android:background="#000000" />

<View
    android:id="@+id/sfatBlock"
    android:layout_width="10dp"
    android:layout_height="65dp"
    android:layout_below="@id/carbBlock"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="15dp"
    android:layout_toRightOf="@id/proteinBlock"
    android:background="#000000" />

<View
    android:id="@+id/sugarBlock"
    android:layout_width="10dp"
    android:layout_height="65dp"
    android:layout_below="@id/tfatBlock"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="15dp"
    android:layout_toRightOf="@id/sfatBlock"
    android:background="#000000" />

</RelativeLayout>

Upvotes: 1

Related Questions