Layout to scroll above image view

Question

I want the layout to scroll above the image, its working fine but i need the image also to be clickable. How to achieve this ?

CODE :

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

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/article_image"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_gravity="top"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                **android:paddingTop="150dp"**
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/hello_world" />

                ...so may views...
            </LinearLayout>
        </ScrollView>

    </FrameLayout>

</LinearLayout>

Since i have added android:paddingTop="150dp" the layout is scrolling above the image, but how will the image be clickable now ?

Answer 1

first try to add this beneath your existing frame layout in your xml file:

    <LinearLayout
    //set id here
    >
        <ImageView
                android:id="@+id/article_image"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_gravity="top"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher" />

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    **android:paddingTop="150dp"**
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/hello_world" />

                    ...so may views...
                </LinearLayout>
            </ScrollView>
</LinearLayout>

which is a copy of your layout but without frame layout which you will use when ever you need the image to be clickable. then hide this grammatically in your onCreate() then:
remove the frame layout programitaclly when ever you need the image to be clickable and make the copy of your layout visible, here is how to set your frame layout visibility to gone: so define a frame layout as an instance of your class and set it to your frame layout id and when ever you need to make the image clickable add:

frmLayout.setVisibility(FrameLayout.GONE);

and

llLayout.setVisibility(LinearLayout.VISIBLE);

hope this will help you.

Answer 2

Please can you update your xml? After you can click imageview easily.

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

        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/article_image"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_gravity="top"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher" />

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_gravity="bottom">

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

                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/hello_world" />

                    ...so may views...
                </LinearLayout>
            </ScrollView>

        </FrameLayout>

    </LinearLayout>

Answer 3

try with relative parent and add you imageview just after the scroll view. Also give padding top to same size of your image height.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingTop="250dp">


                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Hello" />

            </LinearLayout>
        </ScrollView>

    <ImageView
        android:id="@+id/article_image"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_gravity="top"
        android:scaleType="fitXY"
        android:focusable="true"
        android:clickable="true"
        android:src="@drawable/back" />

</RelativeLayout>