相对布局排列视图android

Question

Friends,

I am new to android so I could use your help. I want to implement a gallery where the user can flip between two images (presented in ImageView1 below). The display that I want is given by:

[TextView1]        [TextView2]    
           [ImageView1]
           [ImageView2]

Where [TextView1] and [TextView2] are static texts that do not change with flipping between the two images. [ImageView1] is the actual image that is displayed and [ImageView2] is an image indicator (ie, image one is selected).

I am using ViewPager to bound the images to [ImageView1], which is given below:

<?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="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp" >

    <ImageView
        android:id="@+id/image_to_show"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="0dp"
        android:contentDescription="@string/image_description"
        android:scaleType="fitCenter" />

</RelativeLayout>

The main fragment where the images are shown:

<?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="wrap_content" >

    <TextView
        android:id="@+id/name_of_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:textColor="@color/card_text_color"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/date_taken"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingBottom="10dp"
        android:textColor="@color/card_text_color"
        android:textSize="14sp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/details_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" />

    <LinearLayout
        android:id="@+id/page_indicator_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"/>

</RelativeLayout>

The output from the code is:

[TextView1]        [TextView2]    
           [ImageView2]
           [ImageView1]

Where the image and page indicator have reversed positions.

Any ideas how I can fix this?

I do not want any vertical space among the views. I have used a LinearLayout instead of the RelativeLayout for the main fragment, but that leaves space among the views depending on the screen size.

Answer 1

Try this way,hope this will help you to solve your problem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/name_of_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/card_text_color"
                android:textSize="14sp" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/date_taken"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/card_text_color"
                android:textSize="14sp" />
        </LinearLayout>

    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/details_image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" />

    <LinearLayout
        android:id="@+id/page_indicator_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"/>

</LinearLayout>

Answer 2

Do This

<?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" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView1" />
</LinearLayout>

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />


<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

</RelativeLayout>

Change your code with this