mercredi 27 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 do this while working on a Scroll View where in case I add more content to my Card View, I can just scroll down on my layout? 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>

Update: I have tried debugging my application with an android phone that has no menu button and noticed something different. My interface shows same way as before without the cardview as below. image not showing cardview

When I try entering text onto my searchview then my cardview shows like below image showing cardview

This is how it was displaying initially on my Samsung which has a menu button. enter image description here

Please note that all I am doing on my activity is call my onCreate method which sets content to the given XML. I thought it was not necessary to give my Activity.java code because of this.

Aucun commentaire:

Enregistrer un commentaire