How to implement scrollable and zoom in and out in constraintlayout

Question

Now I have the layout like this. As you see, there is three things inside the ui

1. Zoom in out control
2. Overlapped text
3. Movable element

Now I have successfully implemented the movable features on the whole constraint layout and the zoom in, out control. However, I want to scroll the view since the text is overlapped. It seems the scroll event conflicted with my custom zoomable event. I want to implement the scroll event to scroll down the overlapped text but have no idea how to do this.

Appreciate any advice or comment.

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.mycompany.newmobileclient.ui.plant_inventory.PlantInventoryActivity">
  <ZoomControls
    android:id="@+id/simpleZoomControl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_centerHorizontal="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />
  <android.support.constraint.ConstraintLayout
    android:id="@+id/plantInventory_container"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@color/worklist_divider_bg"
    app:layout_constraintBottom_toTopOf="@+id/simpleZoomControl"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/plantInventory_content_title">
    <TextView
      android:id="@+id/textView133"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"

      android:layout_marginTop="8dp"
      android:text="@string/sample_plantinventory2"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  </android.support.constraint.ConstraintLayout>
  <TextView
    android:id="@+id/plantInventory_content_title"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="TextView"
    tools:text="Plant Inv Activity1 &amp; Activity2"
    android:padding="4dp"
    style="@style/worklist_label"
    android:background="@color/worklist_divider_bg"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

strings.xml

<string name="sample_plantinventory2">
        Compatible Product List\n
Code     Description\n
-----    -----------\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
  </string>

PlantInventoryActivity.java

public class PlantInventoryActivity extends BaseActivity {

  private final float SCALE_RATIO = 0.25f;
  private final float MAX_SCALE_RATIO = 2f;
  private final float MIN_SCALE_RATIO = 1f;
  private ConstraintLayout plantInventoryContainer;
  private TextView plantInventory_content_title;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_plant_inventory);
    plantInventory_content_title = findViewById(R.id.plantInventory_content_title);
    plantInventoryContainer = findViewById(R.id.plantInventory_container);
    ZoomControls zoomControls = findViewById(R.id.simpleZoomControl);
    zoomControls.setOnZoomInClickListener(v -> {
      if (plantInventoryContainer.getScaleX() < MAX_SCALE_RATIO) {
        plantInventoryContainer.setScaleX(plantInventoryContainer.getScaleX() + SCALE_RATIO);
        plantInventoryContainer.setScaleY(plantInventoryContainer.getScaleY() + SCALE_RATIO);
      }
    });
    zoomControls.setOnZoomOutClickListener(v -> {
      if (plantInventoryContainer.getScaleX() > MIN_SCALE_RATIO) {
        plantInventoryContainer.setScaleX(plantInventoryContainer.getScaleX() - SCALE_RATIO);
        plantInventoryContainer.setScaleY(plantInventoryContainer.getScaleY() - SCALE_RATIO);
      }
    });
    zoomControls.bringToFront();
    plantInventory_content_title.bringToFront();
    plantInventoryContainer.setOnTouchListener(new ZoomableListener());


  }
}

ZoomableListener.java

public class ZoomableListener implements OnTouchListener {
  float x = 0;
  float y = 0;
  float dx = 0;
  float dy = 0;

  @Override
  public boolean onTouch(View myView, MotionEvent event) {
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN: {
        x = event.getX();
        y = event.getY();
        dx = x - myView.getX();
        dy = y - myView.getY();
      }
      break;
      case MotionEvent.ACTION_MOVE: {
        myView.setX(event.getX() - dx);
        myView.setY(event.getY() - dy);
      }
      break;
      case MotionEvent.ACTION_UP: {
        //your stuff
      }
    }
    return true;
  }
}

Answer 1

After few days struggling ,I tried to use the horizontal and vertical scroll view to implement the scrolling features. And using the zoom in, out control to control the text size ( instead of the text scale). I know it is not like the zoom in out and movable features like pdf viewer. If there is better work for it, I will update it.

Inside the nested constraints layout editor , you can design the item in design editor as usual.

activity.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools">
  <data>

    <variable
      name="viewModel"
      type="ActivityViewModel" />
    <variable
      name="selectedActivity"
      type="String" />

  </data>
  <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="MyActivity">
    <ZoomControls
      android:id="@+id/simpleZoomControl"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="8dp"
      android:layout_marginEnd="8dp"
      android:layout_marginRight="8dp"
      android:layout_centerHorizontal="true"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent" />
    <HorizontalScrollView
      android:id="@+id/scrollContainer"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_marginTop="8dp"
      android:layout_marginBottom="8dp"
      android:fillViewport="true"
      app:layout_constraintBottom_toTopOf="@+id/simpleZoomControl"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/content_title">
      <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
          android:id="@+id/directchild"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:orientation="horizontal">
          <include
            android:id="@+id/included"
            layout="@layout/inner_layout"
            app:viewModel="@{viewModel}" />
        </LinearLayout>
      </ScrollView>
    </HorizontalScrollView>
    <TextView
      android:id="@+id/content_title"
      style="@style/worklist_label"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:padding="4dp"
      android:background="@color/worklist_divider_bg"
      android:text="@{selectedActivity}"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      tools:text=" Inv Activity1 &amp; Activity2" />

  </android.support.constraint.ConstraintLayout>
</layout>

Activity.java

@Override
  protected void onCreate(Bundle savedInstanceState) {
    ...
    ZoomControls zoomControls = binding.simpleZoomControl;
    zoomControls.setOnZoomInClickListener(v -> {
      increaseTextSize(SCALE_RATIO);
    });
    zoomControls.setOnZoomOutClickListener(v -> {
      decreaseTextSize(SCALE_RATIO);
    });
    zoomControls.bringToFront();
   }

@Override
  public void increaseTextSize(float value) {
    int childCount = binding.included.Container.getChildCount();
    for (int i = 0; i < childCount; i++) {
      View view = binding.included.Container.getChildAt(i);
      if (view instanceof TextView) {
        TextView textView = (TextView) view;
        float currentTextSize = textView.getTextSize();
        textView
            .setTextSize(TypedValue.COMPLEX_UNIT_PX, currentTextSize + value);
      }
    }
  }

  @Override
  public void decreaseTextSize(float value) {
    int childCount = binding.included.Container.getChildCount();
    for (int i = 0; i < childCount; i++) {
      View view = binding.included.Container.getChildAt(i);
      if (view instanceof TextView) {
        TextView textView = (TextView) view;
        float currentTextSize = textView.getTextSize();
        textView
            .setTextSize(TypedValue.COMPLEX_UNIT_PX, currentTextSize - value);
      }
    }
  }