Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enable Scrolling within EditText that is in a ScrollView

Our app (WordPress for Android) uses a scrollview for the new post view, where a user enters in their new blog post. There's quite a few fields on this view, including a large EditText for the post content field.

It appears that when an EditText is in a ScrollView, the ScrollView takes over the scrolling action, so the user can't scroll within the EditText area if they are writing a large post. What can be done so that scrolling will work both within the EditText and the ScrollView?

Here is the layout xml for this view, any help would be appreciated! The EditText that needs the scrolling is @id/content:

    <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none"
    android:background="#FFF5F5F5">

<RelativeLayout android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:padding="10dip"
                > 
    <RelativeLayout android:layout_width="fill_parent" 
                android:layout_height="fill_parent"
                android:background="@drawable/content_bg"
                android:id="@+id/section1">
    <TextView android:id="@+id/l_section1" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:text="Post Content"
              style="@style/WordPressSectionHeader"/>
    <TextView android:id="@+id/l_title" 
              android:layout_below="@id/l_section1"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:text="@string/post_title"/>

    <EditText android:id="@+id/title" 
              android:minHeight="40dip"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:background="@android:drawable/editbox_background"
              android:autoText="true"
              android:capitalize="sentences"
              android:layout_below="@id/l_title"/>

    <TextView android:id="@+id/l_content" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:text="@string/post_content"
              android:layout_below="@id/title"/>

    <EditText android:id="@+id/content"
              android:gravity="top" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:background="@android:drawable/editbox_background"
              android:minLines="5"
              android:maxLines="5"
              android:autoText="true"
              android:capitalize="sentences"
              android:layout_below="@id/l_content"/>

<Button  
            android:id="@+id/bold"
            android:background="@drawable/wp_button_small"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:layout_below="@id/content"
            android:textStyle="bold"
            android:textSize="22dip"
            android:text="B" />           
<Button
            android:id="@+id/em"
            android:background="@drawable/wp_button_small"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/bold"
            android:layout_toRightOf="@id/bold"
            android:textStyle="italic"
            android:textSize="22dip"
            android:text="I " />

<Button
             android:id="@+id/link" 
             android:background="@drawable/wp_button_small"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/em"
            android:layout_toRightOf="@id/em"
            android:textSize="22dip"
            android:textColor="#006699"
            android:text="link" />  

<Button
            android:id="@+id/bquote"
            android:background="@drawable/wp_button_small"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" 
            android:layout_alignTop="@id/link"
            android:layout_toRightOf="@id/link"
            android:textSize="22dip"
            android:text="b-quote" />          
              </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:background="@drawable/content_bg"
                android:id="@+id/section2"
                android:layout_marginTop="10dip"
                android:layout_below="@id/section1">             
    <TextView android:id="@+id/l_media"
              android:layout_marginBottom="6dip"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:text="Media"
              style="@style/WordPressSectionHeader"/>               
<Button
            android:id="@+id/addPictureButton"
            android:layout_marginTop="4dip"
            android:background="@drawable/wp_button_small"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:layout_below="@id/l_media" 
            android:textSize="18dip"
            android:text="@string/add"/>

<Button
            android:id="@+id/clearPicture"
            android:background="@drawable/wp_button_small"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" 
            android:visibility="gone"
            android:textSize="18dip"
            android:layout_alignBottom="@id/addPictureButton"
            android:layout_toRightOf="@id/addPictureButton"
            android:text="@string/clear" />

            <GridView   
                    android:id="@+id/gridView"   
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:gravity="fill_vertical"
                    android:numColumns="3"
                    android:visibility="gone"
                    android:layout_below="@id/addPictureButton">             
               </GridView>
</RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:background="@drawable/content_bg"
                android:id="@+id/section3"
                android:layout_marginTop="10dip"
                android:layout_marginBottom="10dip"
                android:layout_below="@id/section2"> 
                <TextView android:id="@+id/l_tags_categories"
              android:layout_marginBottom="6dip"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:text="Tags &amp; Categories"
              style="@style/WordPressSectionHeader"/>              
                   <TextView android:id="@+id/l_tags" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:layout_below="@id/l_tags_categories" 
              android:text="@string/tags_separate_with_commas"/>

    <EditText android:id="@+id/tags" 
              android:minHeight="40dip"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:background="@android:drawable/editbox_background"
              android:autoText="true"
              android:layout_below="@id/l_tags"/>

    <TextView android:id="@+id/l_category" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:text="@string/categories"
              android:layout_below="@id/tags"
              android:layout_marginTop="10dip"/>

  <Button
            android:id="@+id/selectCategories"
            android:background="@drawable/wp_button_small"
            android:layout_below="@id/l_category"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:textSize="18dip"
            android:text="@string/select_categories" />

     <TextView android:id="@+id/selectedCategories" 
              android:layout_width="wrap_content" 
              android:layout_height="wrap_content"
              android:text="@string/selected_categories"
              android:layout_below="@id/selectCategories"/>        
 </RelativeLayout> 
  <RelativeLayout android:id="@+id/location_wrapper"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
                android:layout_below="@id/section3"
                android:layout_marginTop="-10dip">
  <RelativeLayout android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:background="@drawable/content_bg"
                android:id="@+id/section4"
                android:layout_marginTop="10dip"
                android:layout_marginBottom="10dip"
                android:layout_below="@id/section3"
                android:visibility="gone"> 
                <TextView android:id="@+id/l_location"
              android:layout_marginBottom="6dip"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:text="@string/location"
              style="@style/WordPressSectionHeader"/>
              <TextView android:id="@+id/locationText"
              android:layout_marginBottom="6dip"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:text="@string/loading"
              android:layout_below="@id/l_location"/> 
              <Button
            android:id="@+id/viewMap"
            android:background="@drawable/wp_button_small"
            android:layout_below="@id/locationText"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:textSize="18dip"
            android:text="View Map" />                                 
 </RelativeLayout> 
 </RelativeLayout>  
 <RelativeLayout android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:background="@drawable/content_bg"
                android:id="@+id/section5"
                android:layout_marginTop="10dip"
                android:layout_marginBottom="10dip"
                android:layout_below="@id/location_wrapper"> 
                <TextView android:id="@+id/l_status"
              android:layout_marginBottom="6dip"
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:text="@string/status"
              style="@style/WordPressSectionHeader"/>                                       
    <CheckBox android:id="@+id/publish"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:layout_below="@id/l_status"
            android:text="@string/publish"
            android:button="@drawable/wp_checkbox"
            /> 
 </RelativeLayout>            
<Button
            android:id="@+id/post"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:layout_below="@id/section5"
            android:layout_alignParentRight="true"
            android:textSize="18dip"
            android:background="@drawable/wp_button"
            android:text="@string/save" />
<Button
            android:id="@+id/upload"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/post"
            android:layout_toLeftOf="@id/post"
            android:textSize="18dip"
            android:background="@drawable/wp_button"
            android:text="@string/upload_now" />            
</RelativeLayout>
</ScrollView>
like image 992
roundhill Avatar asked Nov 06 '22 13:11

roundhill


2 Answers

From what i've read on a forums so far , having several scrollable containers on same screen is not a good idea. Now, those post were usually about listview , gridview in combination with scrollview but still to me it seems that the best solution redesign the screen to avoid that.

like image 115
Alex Volovoy Avatar answered Nov 12 '22 12:11

Alex Volovoy


If you need the edittext on the same screen add this to your oncreate method after you initialize your edittext. It works for me.

    edittext.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            Log.v("TAG", "CHILD TOUCH");

            // Disallow the touch request for parent scroll on touch of
            // child view
            if(event.getAction() == MotionEvent.ACTION_UP)
                scrollview.requestDisallowInterceptTouchEvent(false);
            else
                scrollview.requestDisallowInterceptTouchEvent(true);

            return false;
        }
    });

What its doing is saying if someone touches the the edittext then disable the scrollview. Then once they lift their finger up from the edittext (once they are done with it) re-enable the scrollview.

like image 36
Cam Connor Avatar answered Nov 12 '22 10:11

Cam Connor