Change the layout when rotating with onConfigurationChanged

What I wanted to do

I wanted to display the ImageView image on the full screen (with the same aspect ratio) and place the button directly below, but ... 図1.png If you rotate it horizontally, the button will be hidden, and if you change the layout according to the horizontal screen, the position of the button will shift when you rotate it vertically. I wanted to have only one xml for the layout, so I decided to dynamically resize the ImageView in the source.

What i did

Layout

--Layout uses ConstraintLayout --ImageView settings: --Size (in portrait orientation): - height: wrap_content
- width: 0dp(match constraint) --Size (in landscape orientation): - height: 0dp(match constraint)
- width: wrap_content --Specify ʻandroid: adjustViewBounds = trueto maintain the aspect ratio of the drawing --Specify ʻapp: layout_constraintVertical_chainStyle = "packed"to attach buttons

Activity --Added ʻandroid: configChanges =" orientation | screenSize " to Activity in the manifest. Make it possible to detect vertical and horizontal rotation. --When the vertical and horizontal orientation changes, ʻonConfigurationChanged is called. In that, the layout of ImageView was updated.

Source

activity_main.xml


<?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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:padding="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@drawable/ic_launcher_background" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java


public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //UI acquisition
        imageView = findViewById(R.id.imageView);
        button = findViewById(R.id.button);
        //For the time being, get the orientation at startup
        int orientation = getResources().getConfiguration().orientation;
        UpdateLayout(orientation); //Layout update
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        int orientation = newConfig.orientation; //Get orientation
        UpdateLayout(orientation); //Layout update
    }

    /**
     *Layout update
     * @param orientation orientation
     */
    protected void UpdateLayout(int orientation){
        //ImageView LayoutParam acquisition
        LayoutParams param = imageView.getLayoutParams();
        if (orientation == Configuration.ORIENTATION_PORTRAIT) {
            //In portrait orientation
            Log.d("UpdateLayout", "Vertical orientation");
            param.height = LayoutParams.WRAP_CONTENT;
            param.width = 0;
        }
        else if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
            //When facing sideways
            Log.d("UpdateLayout", "Sideways");
            param.height = 0;
            param.width = LayoutParams.WRAP_CONTENT;
        }
        imageView.setLayoutParams(param);
    }
}

Reference article

Determine whether it is landscape or portrait on Android Display the full screen width on Android while maintaining the aspect ratio of the image https://techblog.zozo.com/entry/constraint_layout

Recommended Posts

Change the layout when rotating with onConfigurationChanged
Change the port with SpringBoot
[Rails] When the layout change of devise is not reflected
Try to summarize the common layout with rails
About the mechanism when displaying the GUI with Docker
[Unity] When implementing iOS native plugin with Swift, the setting method will change around 2019.3.
How to change the action with multiple submit buttons
Switch the display screen when hovering the tab with jQuery
When the server does not start with rails s
Change seats with java
[Java] Change the process according to the situation with the Strategy pattern
[Beginner's memorandum] Story when rotating TextView and Button with text
Specify the character code of the source when building with Maven
Change the setting value for each environment with Digdag (RubyOnRails)
About the behavior when doing a file map with java
When you want to change the MySQL password of docker-compose
If it doesn't change with the disable_with option in Safari
How to change the file name with Xcode (Refactor Rename)