CODEWITHSUNDEEP
androidandroid-layoutuser-interfacescreen-orientation
Abhinav Tyagi
Abhinav Tyagi

Reputation: 5266

Android Distorted UI

I am not able to find the root cause of the below distortion.
UI works fine but when I rotate the screen to landscape, the UI gets distorted while scrolling.
This distortion continues when the screen is again rotated to portrait. 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include layout="@layout/i_details" />

        <include layout="@layout/v_details" />

        <include layout="@layout/d_details" />
    </LinearLayout>


</ScrollView>

UPDATE
i_details 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|bottom"
            android:layout_margin="4dp"
            android:text="Large Text"
            android:textSize="25sp" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="4dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_margin="8dp"
            android:text="Message"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="top|start"
            android:layout_margin="8dp"
            android:text="RANDOM TEXT"
            android:textSize="18sp" />

    </LinearLayout>

</LinearLayout>


v_details

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="4dp">

    <ImageView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/navigateFab"
        android:layout_width="61dp"
        android:layout_height="61dp"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="12dp"
        android:layout_marginBottom="-24dp"
        android:background="@color/colorAccent"
        android:contentDescription="navigation"
        android:elevation="8dp"
        android:src="@drawable/ic_navigate_24dp"
        app:pressedTranslationZ="2dp"
        android:layout_above="@+id/linearLayout"
        android:layout_alignParentEnd="true" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:layout_below="@id/map"
        android:orientation="vertical"
        android:id="@+id/linearLayout">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginTop="4dp"
            android:text="Random Text"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:gravity="top|start"
            android:text="Random Text"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/address"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:drawablePadding="4dp"
            android:drawableStart="@drawable/ic_place_24dp"
            android:gravity="top|start"
            android:text="Random Text"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:autoLink="phone"
            android:clickable="true"
            android:drawablePadding="4dp"
            android:drawableStart="@drawable/ic_call_24dp"
            android:gravity="top|start"
            android:text="Random Text"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/website"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:autoLink="web"
            android:clickable="true"
            android:drawablePadding="4dp"
            android:drawableStart="@drawable/ic_language_24dp"
            android:gravity="top|start"
            android:text="Random Text"
            android:textSize="16sp" />

    </LinearLayout>

</RelativeLayout>


d_details

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:elevation="4dp"
    android:orientation="vertical">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_marginTop="4dp"
        android:text="Random Text"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:gravity="top|start"
        android:text="Random Text"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/address"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:drawablePadding="4dp"
        android:drawableStart="@drawable/ic_place_24dp"
        android:gravity="top|start"
        android:text="Random Text"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:autoLink="phone"
        android:clickable="true"
        android:drawablePadding="4dp"
        android:drawableStart="@drawable/ic_call_24dp"
        android:gravity="top|start"
        android:text="Random Text"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:autoLink="email"
        android:clickable="true"
        android:drawablePadding="4dp"
        android:drawableStart="@drawable/ic_mail_24dp"
        android:gravity="top|start"
        android:text="Random Text"
        android:textSize="16sp" />


</LinearLayout>


UPDATE 3
added activity code and stated fragment logic


i_activity

public class MYActivity extends AppCompatActivity {
    private static final String LOG_TAG = MYActivity.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_invitation);

        MYFragment myFragment = new MYFragment();

        // In case this activity was started with special instructions from an
        // Intent, pass the Intent's extras to the fragment as arguments
        myFragment.setArguments(getIntent().getExtras());

        // Add the fragment to the 'my_container' FrameLayout
        getSupportFragmentManager().beginTransaction().add(R.id.my_container, myFragment).commit();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        recreate();
    }
}


in Fragment, I fetch the ID passed from activity, populate my static UI,
initiate CURSOR LOADER

@Override
    public void onActivityCreated(Bundle savedInstanceState) {
        Log.d(LOG_TAG, "Activity Created");
        getLoaderManager().initLoader(CURSOR_LOADER, getArguments(), this);
        super.onActivityCreated(savedInstanceState);
    }

and
onLoadFinished(Loader loader, Cursor cursor)
fetch and populate my dynamic UI views directly.
Not using any adapter as all views are simple text views.

Included layouts are simple layouts with LinearLayout as parent container and FrameLayout or LinearLayout as the child and other views.

I am using Picasso lib to load the static map.
UPDATE 2 Picasso is not the issue as after removing Picasso, the issue remains.
Device: Nexus 5 Android OS: 6.0.1

enter image description here

Upvotes: 10

Views: 1634

Answers (3)

AlgoCoder
AlgoCoder

Reputation: 1696

The problem is your Fragment is created Twice on the orientation Change Check saveInstancestate before creating new Fragment Object.

private MYFragment myfragment;//define fragment globally

  if(savedInstanceState == null) {
       myfragment= new MYFragment();//set tag for fragment
       getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, headlines, FRAGMENT_TAG_STRING).commit(); // Use tags, it's simpler to deal with

    } else {
        myfragment= getSupportFragmentManager().findFragmentByTag(FRAGMENT_TAG_STRING);
    }

Upvotes: 5

M.Khouli
M.Khouli

Reputation: 4122

Try to call the invalidate() method of the decoreview when the orientation changed.

 @Override
 public void onConfigurationChanged(Configuration newConfig) {
   super.onConfigurationChanged(newConfig);
     if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
         this.getWindow().getDecorView().invalidate();
    }
}

Hope this will help.

Upvotes: 1

Natarajan Raman
Natarajan Raman

Reputation: 606

Please try changing your XML as shown below in the sample.

Idea is - You need to keep entire thing in a Relative layout. Once you use Relative layout, it gives you the ability to place items one above another. 

   <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/one"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <include layout="@layout/activity_line_graph" 
                android:id="@+id/two"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/one"/>

            <include layout="@layout/activity_my_stocks"
                android:id="@+id/three"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/two"/>

            <include layout="@layout/widget_collection"
                android:id="@+id/four"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/three"/>
        </LinearLayout>
        </RelativeLayout>

    </ScrollView>

Each include should,

  1. an ID to be referred to.
  2. also have width and height as otherwise, the placement of above or below is ignored. Hope this helps and hey, I wish you have a wonderful birthday party :) wishes in advance!

Upvotes: 1

Related Questions