Android: Switch Height and Width when View change orientation

1.6k Views Asked by At

I do use PhotoView library to ZoomIn-Out. now when user click a button i prepared to rotate the PhotoView, Height and Width would rotate. so width which is smaller than the screen Height. and this result in i can't get the full screen zoom like usual before Rotating the Imageview.

so any solution to make the new width or height after rotation to take full screen.

Example : this is Zoomed Image it doesn't zoom in the entire screen like before the rotation

this is Zoomed Image

3

There are 3 best solutions below

2
Filipe Oliveira On

You'll need to create 2 xml layout. The portrait (the one you have already created inside res > layout folder) and the landscape (inside res > layout-land).

When you rotate the phone, fragment will load the xml file inside layout-land folder.

You can find a tutorial here: https://www.geeksforgeeks.org/how-to-create-landscape-layout-in-android-studio/

And more info here: https://developer.android.com/guide/topics/resources/providing-resources

1
Ashirwad Kumar On

If Image will be rotated, it will adjust in the screen as per his aspect ratio. If you want to fit it to full screen, the image will starched that will not look good. If still you want to do it, simply use the Image as 'background' at the place of 'Image Resources' and keep the view length and width as 'match parent'.

See below sample view:

<ImageView
    android:id="@+id/mainImageID"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/yourImage"/>
0
aslamhossin On

I had to work with the same type of feature on my project and here was my design and implementation for it.

Basic XML design for photo view

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/image_main"
        android:layout_width="0dp"
        android:scaleType="centerCrop"
        android:layout_height="400dp"
        android:src="@drawable/gull_portrait_ca_usa"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <ImageView
        android:id="@+id/image_rotate"
        android:src="@android:drawable/ic_menu_rotate"
        android:layout_margin="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_width="40dp"
        android:layout_height="40dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Then I just update the orientation onClick event.

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.imageRotate.setOnClickListener {
            binding.imageMain.rotation = binding.imageMain.rotation+90
        }

    }
}

Output