Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make android layout and nested layouts within zoomable

Tags:

android

I've been working on an app with complex layouts. I recently realized I need to make parts or all of my layouts zoomable.

One of my main xml files has a linear layout with multiple layouts nested within it to positions views properly. Is there an easy way to make this linear layout and everything within in zoomable? Or would it be easier to make the entire layout file zoomable? What are my options?

like image 567
Peter Avatar asked Jan 15 '13 03:01

Peter


People also ask

Is it possible to include one layout definition in another?

Reuse layouts with <include/> To efficiently reuse complete layouts, you can use the <include/> and <merge/> tags to embed another layout inside the current layout. Reusing layouts is particularly powerful as it allows you to create reusable complex layouts.

What is nested layout in Android?

By the term of Nested we mean one Layout inside of other Layout. In Android all layout can be nested one another. In this example we create a Registration Form with multiple fields using Nested Linear Layouts.

Can we use linear layout in ConstraintLayout?

You can create linear layouts now with ConstraintLayout by constraining the sides of each element with each other.


2 Answers

First of all extend that class with that specific view

   public class MyImageView extends ImageView{

Override following method .

 @Override
 protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
 canvas.save();

 canvas.scale(mScaleFactor, mScaleFactor, midPoint.x, midPoint.y);
 if(appInitialized) {

 hsSide.draw(canvas);
 scaleA.draw(canvas);
 scaleB.draw(canvas);

  }

 canvas.restore();


}

Create a Gesture Detector that will detect size of zoomed object and you can limit to avoid overlaps.

       private class ScaleListener extends    ScaleGestureDetector.SimpleOnScaleGestureListener {

 @Override
 public boolean onScale(ScaleGestureDetector detector) {

  mScaleFactor *= detector.getScaleFactor();
  pivotX = detector.getFocusX();
   pivotY = detector.getFocusY();
     // Don't let the object get too small or too large.
   mScaleFactor = Math.max(0.8f, Math.min(mScaleFactor, 2.0f));

    invalidate();
   return true;
   }
 }

At the end initialize the object

    ScaleGestureDetector mScaleDetector;



   mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
like image 133
Jan Avatar answered Sep 28 '22 10:09

Jan


You might have a look at static transformations. Any ViewGroup or subclass can be customized to apply a transformation to its child views. You enable this by calling setStaticTransformationsEnabled(true), and then overriding the getChildStaticTransformation() callback (docs link) in your custom ViewGroup. You can apply any transformation you like, including a scale to create your zoom effect. This callback will be called any time the view needs to be redrawn or is invalidated.

Also, beware when using this alongside hardware acceleration. Depending on the frequency with which you need to update the transformations you may find hardware doesn't quite work to redraw as you expect. If so, you will need to enable software layers for this view hierarchy.

like image 35
devunwired Avatar answered Sep 28 '22 12:09

devunwired