Cards Inside ScrollView

Question

I have these cardView's inside ScrollView shown in the image-1( https://i.sstatic.net/pCnxz.jpg ) where the device is vertical and everything is as it's suppose to be but when the device is tilted Horizontally the 2nd row in the 4th row get's cutoff as shown here image-2(https://i.sstatic.net/3P4hw.jpg). Please help on why this is happening and how can this be solved. (Note - in the 4th card there is a list view which is inflated by textview from colmn_row.xml)

activity_main.xml

  <?xml version="1.0" encoding="utf-8"?>


 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
android:background="#ddd"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context=".MainActivity">

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >




<android.support.v7.widget.CardView
    android:id="@+id/num_stu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:elevation="10dp"
        android:padding="16dp">

        <ImageView
            android:id="@+id/cardview_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginRight="18dp"
            android:src="@mipmap/ic_launcher_round" />

        <TextView
            android:id="@+id/cardview_list_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/cardview_image"
            android:paddingBottom="5dp"
            android:text="Students"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/num_boys"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/cardview_list_title"
            android:layout_toRightOf="@+id/cardview_image"
            android:textColor="#8b8b8b" />
        <TextView
            android:id="@+id/num_girls"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/cardview_list_title"
            android:layout_toRightOf="@+id/num_boys"
            android:textColor="#8b8b8b" />
        <TextView
            android:id="@+id/total_stu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/num_girls"
            android:layout_toRightOf="@+id/cardview_image"
            android:textColor="#8b8b8b" />

    </RelativeLayout>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/num_teachers"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/num_stu"
    android:layout_marginTop="16dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:elevation="8dp"
        android:padding="16dp">

        <ImageView
            android:id="@+id/cardview_image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginRight="18dp"
            android:src="@mipmap/ic_launcher_round" />

        <TextView
            android:id="@+id/cardview_list_title1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/cardview_image1"
            android:paddingBottom="5dp"
            android:text="Staff"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/numTeaching"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/cardview_list_title1"
            android:layout_toRightOf="@+id/cardview_image1"
            android:textColor="#8b8b8b" />
        <TextView
            android:id="@+id/non_num_Teaching"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/numTeaching"
            android:layout_toRightOf="@+id/cardview_image1"
            android:textColor="#8b8b8b" />

    </RelativeLayout>

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/attendance"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:elevation="5dp"
        android:padding="16dp">

        <ImageView
            android:id="@+id/cardview_image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginRight="18dp"
            android:src="@mipmap/ic_launcher_round" />

        <TextView
            android:id="@+id/cardview_list_title2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/cardview_image2"
            android:paddingBottom="5dp"
            android:text="Attendance"
            android:textSize="24sp" />


        <TextView
            android:id="@+id/stuatten"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/cardview_list_title2"
            android:layout_toRightOf="@+id/cardview_image2"
            android:textColor="#8b8b8b"/>
        <TextView
            android:id="@+id/staffatten"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/stuatten"
            android:layout_toRightOf="@+id/cardview_image2"
            android:textColor="#8b8b8b" />


    </RelativeLayout>

</android.support.v7.widget.CardView>

<!-- Fourth Card -->

<android.support.v7.widget.CardView
    android:id="@+id/notice"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#fff"
        android:elevation="8dp"
        android:padding="16dp">



        <TextView
            android:id="@+id/title"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_alignParentTop="true"
            android:paddingBottom="5dp"
            android:textSize="19sp"
            android:textStyle="bold"
            android:text="ID"/>


        <TextView
            android:id="@+id/title1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_alignParentTop="true"
            android:paddingBottom="5dp"
            android:textSize="19sp"
            android:textStyle="bold"
            android:layout_marginLeft="115dp"
            android:layout_toRightOf="@+id/title"
            android:text="Title"/>

        <TextView
            android:id="@+id/title2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_alignParentTop="true"
            android:paddingBottom="5dp"
            android:textSize="19sp"
            android:textStyle="bold"
            android:layout_toRightOf="@+id/title1"
            android:layout_marginLeft="90dp"
            android:text="Date From"/>

        <TextView
            android:id="@+id/title3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="60dp"
            android:paddingBottom="5dp"
            android:textSize="19sp"
            android:textStyle="bold"
            android:text="Date To"/>


        <ListView
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/title" >
        </ListView>



</RelativeLayout>
</android.support.v7.widget.CardView>

</LinearLayout>

</ScrollView>
</LinearLayout>

colmn_row.xml --

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


<TextView
    android:id="@+id/name"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:textStyle="bold"
    android:textSize="17sp"/>

<TextView
    android:id="@+id/gender"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:textSize="17sp"/>

<TextView
    android:id="@+id/age"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:textSize="17sp"/>

<TextView
    android:id="@+id/status"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_alignParentLeft="true"
    android:layout_weight="1"
    android:textSize="17sp"/>

</LinearLayout>

Answer 1

This issue is due to the constant layout_weight value in colmn_row.xml, colmn_row.xml will render according to device screen width. And All four item will share equal width.Make your column header also a device width specific.

Below is the code for 4th card layout,

<android.support.v7.widget.CardView
android:id="@+id/notice"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:elevation="8dp"
    >



    <TextView
        android:id="@+id/title"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:paddingBottom="5dp"
        android:textSize="19sp"
        android:textStyle="bold"
        android:text="ID"/>


    <TextView
        android:id="@+id/title1"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:paddingBottom="5dp"
        android:textSize="19sp"
        android:textStyle="bold"
        android:layout_weight="1"
        android:text="Title"/>

    <TextView
        android:id="@+id/title2"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:paddingBottom="5dp"
        android:textSize="19sp"
        android:textStyle="bold"
        android:text="Date From"/>

    <TextView
        android:id="@+id/title3"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:paddingBottom="5dp"
        android:textSize="19sp"
        android:textStyle="bold"
        android:text="Date To"/>
   </LinearLayout>

    <LinearLayout
        android:id="@+id/dynamic_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    </LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

Edit : It's a bad idea to put listview inside scrollview, try inflating layout inside LinearLayout as parent or use reyclerview inside NestedScrollView, I have updated lisview to linearlayout

Below is the code to create viiew dynamically

@Override
protected void onCreate(Bundle savedInstanceState) {

//....
linearLayout = (LinearLayout) findViewById(R.id.dynamic_layout);

    String[] demo = new String[]{"Hello","World","Java","Android"};
    linearLayout.removeAllViews();
    for(int i=0;i<demo.length;i++){
        addView(demo[i]);
    }
}

//Method to create view dynamically
private void addView(String data){
    LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    //You can use this view to findViewById, setOnClickListener, setText etc;
    View view = layoutInflater.inflate(R.layout.column_row,null,false);

    //FindView using inflated view
    TextView textView = view.findViewById(R.id.name);
    linearLayout.addView(view);

}