I’m new with android, and I have to make improvements for an existing app. Inside this app we have a relative layout with a group of 15 imageViews, 1 dynamic imageView and two textViews to which I have to program zoom controls for zooming in and out. The last couple of days I’ve been reading continuously this website to try to find an answer in the existing questions without any results because lots of questions are without an answer.
My biggest problem is that I don’t know which frame or layout to use. All the images are placed and working well in the relative layout, but I don’t seem to get the zoom controls working with the content and I’ve read in different threads and questions that the RelativeLayout doesn’t work with zoom at all. I thought of maybe using a FrameLayout but I think it has the same problem.
This is the XML code from the layout:
<RelativeLayout
android:id="@+id/relativeLayoutMachine"
android:layout_width="1000dp"
android:layout_height="550dp"
android:layout_above="@+id/relativeLayout1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@color/brm_back_1" >
<ImageView
android:id="@+id/imageView01"
android:layout_width="82dp"
android:layout_height="67dp"
android:layout_marginLeft="409dp"
android:layout_marginTop="83dp"
android:contentDescription="@id/imageVeuwBandInloopKoker"
android:src="@drawable/lva_bandinloopkoker" />
<ImageView
android:id="@+id/imageView02"
android:layout_width="82dp"
android:layout_height="67dp"
android:layout_marginLeft="409dp"
android:layout_marginTop="149dp"
android:contentDescription="@id/imageViewTussenKoker"
android:src="@drawable/lva_tussenkoker" />
<ImageView
android:id="@+id/imageView03"
android:layout_width="172dp"
android:layout_height="88dp"
android:layout_marginLeft="401dp"
android:layout_marginTop="216dp"
android:contentDescription="@id/imageViewHMI_Graph_04_Flap"
android:src="@drawable/lva_flap_open" />
<ImageView
android:id="@+id/imageView04"
android:layout_width="281dp"
android:layout_height="61dp"
android:layout_marginLeft="401dp"
android:layout_marginTop="303dp"
android:contentDescription="@id/imageViewHMI_Graph_03_Ram"
android:src="@drawable/lva_ram_retour" />
<ImageView
android:id="@+id/imageView05"
android:layout_width="110dp"
android:layout_height="47dp"
android:layout_marginLeft="571dp"
android:layout_marginTop="257dp"
android:contentDescription="@id/imageViewHMI_Graph_01_Unit"
android:src="@drawable/lva_unit" />
<ImageView
android:id="@+id/imageView06"
android:layout_width="51dp"
android:layout_height="54dp"
android:layout_marginLeft="431dp"
android:layout_marginTop="28dp"
android:contentDescription="@id/imageViewHMI_Graph_15_Feeder"
android:src="@drawable/lva_feeder_off" />
<ImageView
android:id="@+id/imageView07"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_marginLeft="585dp"
android:layout_marginTop="218dp"
android:contentDescription="@id/imageViewHMI_Graph_02_Pump"
android:src="@drawable/lva_main_motor_off" />
<ImageView
android:id="@+id/imageView08"
android:layout_width="199dp"
android:layout_height="124dp"
android:layout_marginLeft="157dp"
android:layout_marginTop="240dp"
android:contentDescription="@id/imageViewChannel"
android:src="@drawable/lva_channel" />
<ImageView
android:id="@+id/imageView09"
android:layout_width="82dp"
android:layout_height="166dp"
android:layout_marginLeft="410dp"
android:layout_marginTop="50dp"
android:contentDescription="@id/imageViewHMI_Graph_013_Turbo"
android:src="@drawable/lva_turbo_off"
android:visibility="invisible" />
<ImageView
android:id="@+id/imageView10"
android:layout_width="88dp"
android:layout_height="67dp"
android:layout_marginLeft="402dp"
android:layout_marginTop="149dp"
android:contentDescription="@id/imageViewHMI_Graph_012_Perforator"
android:src="@drawable/lva_perforator_off"
android:visibility="invisible" />
<ImageView
android:id="@+id/ImageView11"
android:layout_width="88dp"
android:layout_height="67dp"
android:layout_marginLeft="408dp"
android:layout_marginTop="149dp"
android:contentDescription="@id/ImageViewHMI_Graph_10_Ruffler"
android:src="@drawable/lva_ruffler_off"
android:visibility="invisible" />
<ImageView
android:id="@+id/ImageView12"
android:layout_width="174dp"
android:layout_height="72dp"
android:layout_marginLeft="362dp"
android:layout_marginTop="146dp"
android:contentDescription="@id/ImageViewHMI_Graph_11_Prepress"
android:src="@drawable/lva_prepress_open"
android:visibility="invisible" />
<ImageView
android:id="@+id/imageView13"
android:layout_width="46dp"
android:layout_height="68dp"
android:layout_marginLeft="356dp"
android:layout_marginTop="297dp"
android:contentDescription="@id/imageViewHMI_Graph_07_Needles_Hor"
android:src="@drawable/lva_needles_hor_none" />
<ImageView
android:id="@+id/imageView14"
android:layout_width="44dp"
android:layout_height="111dp"
android:layout_marginLeft="356dp"
android:layout_marginTop="187dp"
android:contentDescription="@id/imageViewHMI_Graph_05_Needles_Vert"
android:src="@drawable/lva_needles_vert_high" />
<ImageView
android:id="@+id/imageView15"
android:layout_width="10dp"
android:layout_height="24dp"
android:layout_marginLeft="371dp"
android:layout_marginTop="272dp"
android:contentDescription="@id/imageViewHMI_Graph_06_Knotter_Vert"
android:src="@drawable/lva_motor_off" />
<FrameLayout
android:id="@+id/frameLayoutBale"
android:layout_width="140dp"
android:layout_height="51dp"
android:layout_marginLeft="19dp"
android:layout_marginTop="307dp" >
<ImageView
android:id="@+id/imageViewAnimation"
android:layout_width="140dp"
android:layout_height="51dp"
android:layout_gravity="right"
android:contentDescription="@id/imageViewHMI_Graph_Bale"
android:scaleType="fitXY"
android:src="@drawable/baal" />
</FrameLayout>
<TextView
android:id="@+id/textView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="110dp"
android:layout_marginTop="316dp"
android:gravity="right"
android:text="@string/percentage"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@color/brm_back_2" />
<TextView
android:id="@+id/textView02"
android:layout_width="142dp"
android:layout_height="wrap_content"
android:layout_marginLeft="22dp"
android:layout_marginTop="271dp"
android:gravity="center"
android:text="@string/puntjes"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@color/brm_back_2" />
<ZoomControls
android:id="@+id/zoomControls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="@+id/textCurrMaterial" />
</RelativeLayout>
This is the code I used on my main to declare the zoom controls:
btnZoomControls = (ZoomControls) findViewById(R.id.zoomControls);
btnZoomControls.setOnZoomInClickListener(new View.OnClickListener() {public void onClick(View v) {setZoomIn(); }});
btnZoomControls.setOnZoomOutClickListener(new View.OnClickListener() {public void onClick(View v) {setZoomOut(); }});
And this are the functions for zooming in and out
private void setZoomIn()
{
m_ZoomController.getContainer();
m_ZoomController.getZoomControls();
m_ZoomController.setZoomInEnabled(true);
}
private void setZoomOut()
{
m_ZoomController.getContainer();
m_ZoomController.getZoomControls();
m_ZoomController.setZoomOutEnabled(true);
}
Had any of you a similar problem like mine, and how you found a solution to fix it?
Actually, You have two major ways for zooming:
1) Call setScaleX() and setScaleY() (since API 11) on whole layout or on particular view. Per my experience, images scaling works fine, but text on some versions produces weird behaviour (this scaling get applied by view group during draw process and so, quite fast). This way is quite smooth and fast for not very big layouts;
2) Change layout parameters on every view (You might need, probably, to provide new pictures for image views during scaling). This way is not so fast, but should work on almost all android revisions.