lundi 25 mai 2015

Android UI Design - How to display CardView below ImageView

I am trying to display products list using CardView for my android app. I have an ImageView that is complete so I want to display other products inside the card view which will be located just below the image view. Currently I am working on my XML file for my Activity but the only way I can display the Card View is by removing the android:layout_below="@+id/custom_indicator2" on my CardView element. When I do this, the card view displays on top of my Image View. How can I make do this while working on a Scroll View where in case I add more Card View content, I can just scroll down on my activity? The following is my code for my XML

<android.support.v4.widget.DrawerLayout
xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4"
xmlns:custom="http://ift.tt/GEGVYd"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:fillViewport="true"
    android:gravity="top" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.myapp.MainActivity"
    android:background="#ffffffff">

    <com.mylibrary.slider.library.SliderMain
        android:id="@+id/slider"
        android:layout_width="match_parent"
        custom:pager_animation="Swipe"
        custom:auto_cycle="true"
        custom:indicator_visibility="visible"
        custom:pager_animation_span="1100"
        android:layout_height="160dp"/>

    <com.mylibrary.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator2"
        style="@style/MyApp_AndroidImageSlider"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        />

    <android.support.v7.widget.CardView xmlns:custom_indicator2="http://ift.tt/GEGVYd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!--When I remove the line below it shows but on top of imageview-->
        android:layout_below="@+id/custom_indicator2"
        android:id="@+id/cv"
        custom_indicator2:cardBackgroundColor="#ff39"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/batdroid"
                android:id="@+id/person_photo"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/product_name"
                android:layout_toRightOf="@+id/product_photo"
                android:layout_toEndOf="@+id/product_photo"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                android:text="This is my product text!"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_age"
                android:layout_toRightOf="@+id/product_photo"
                android:layout_toEndOf="@+id/product_photo"
                android:layout_below="@+id/product_name"
                />

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

</ScrollView>

<ListView
    android:id="@+id/navList"
    android:layout_width="290dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start"
    android:background="#ffeeeeee"/>

</android.support.v4.widget.DrawerLayout>

Aucun commentaire:

Enregistrer un commentaire