There is a markup of the following form:

70 percent of the screen - Image 30 - ScrolView with text and a "Rate" button

Since 30% is too little to see the text and it is convenient to read, I am looking for a library (or regular Android tools), with which you can “hit” a ScrollView on an image. That is, the user can stretch the contents of the ScrollView if it pulls over the top edge.

How can I do that?

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦
  • You can see this answer as a direction if you want to implement it yourself, and in general now there is a CoordinatorLayout for such cases specifically. - pavlofff

2 answers 2

Try this markup. Google already has ready tools for this.

 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@null" android:clickable="false" app:elevation="0dp"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="false" app:layout_scrollFlags="scroll|enterAlways"> <ImageView android:layout_width="120dp" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

Also do not forget to add the dependency to Grad, if not yet
compile 'com.android.support:design:23.2.1'

    There is nothing tricky. There is a common root container - RelativeLayout . It has 2 more views, an ImageView and a ScrollView container. By how much ScrollView installed last, it will "overlap" on the ImageView . Next you need a container for text and buttons in any case - it will be LinearLayout . So what would our text with the button be under the picture, put the padding for their container's root, in my example it is equal to the height of the image + indent 428dp . So that our good scrolls up, you need to install padding from the bottom. Good luck!

     <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.chaynik.myapplication.MainActivity"> <ImageView android:layout_width="match_parent" android:layout_height="420dp" android:src="@mipmap/ic_launcher" /> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="372dp" android:paddingTop="428dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/holo_red_dark" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="128dp" android:gravity="center" android:text="Chaynik The Best" android:textSize="36sp" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Подтверждаю!" /> </LinearLayout> </LinearLayout> </ScrollView> </RelativeLayout>