Elements in Relative Layout showing differently when the app runs

Question

I have a ListView created inside a fragment, and it has a search filter, the problem is XML layout showing fine in android studio but when running in the emulator or phone it's showing differently (not properly as I aligned) and also when I click the SearchView it goes under the tab navigation. Can anyone tell how to fix this?

This is the fragment:

import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.Toast;
import com.parse.FindCallback;
import com.parse.ParseException;
import com.parse.ParseFile;
import com.parse.ParseObject;
import com.parse.ParseQuery;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

public class Individuals extends android.support.v4.app.ListFragment
        implements FindCallback<ParseObject> {

    private List<ParseObject> mOrganization = new ArrayList<ParseObject>();
    SearchView sv;
    IndividualsAdaptor adaptor;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.individuals, container, false);
    }

    @Override
    public void onViewCreated(View view, Bundle b) {
        super.onViewCreated(view, b);
        sv = (SearchView) view.findViewById(R.id.ser1);
        adaptor = new IndividualsAdaptor(getActivity(), mOrganization);
        setListAdapter(adaptor);
        ParseQuery.getQuery("_User").findInBackground(this);

        sv.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String text) {
                return false;
            }
            @Override
            public boolean onQueryTextChange(String text) {
                adaptor.getFilter().filter(text);
                return true;
            }
        });
    }

    @Override
    public void done(List<ParseObject> scoreList, ParseException e) {
        if (e == null) {
            Log.d("score", "Retrieved " + scoreList.size() + " _User");
            mOrganization.clear();
            mOrganization.addAll(scoreList);
            ((IndividualsAdaptor) getListAdapter()).updateBackupList(mOrganization);
            ((IndividualsAdaptor) getListAdapter()).notifyDataSetChanged();
        } else {
            Log.d("score", "Error: " + e.getMessage());
        }
    }
}

This is the adapter:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.StrictMode;
import android.support.v4.app.FragmentActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Filter;
import android.widget.ImageView;
import android.widget.TextView;

import com.parse.ParseObject;
import com.squareup.picasso.Picasso;

import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

public class IndividualsAdaptor extends ArrayAdapter {

        protected Context mContext;
        // Code for Custom Filter.
        protected List mBackupList = new ArrayList();

        public IndividualsAdaptor(Context context, List status) {
            super(context, R.layout.t3, status);
            mContext = context;
            // Code for Custom Filter.
            mBackupList.addAll(status);
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            ViewHolder holder;

            if (android.os.Build.VERSION.SDK_INT > 9) {
                StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
                StrictMode.setThreadPolicy(policy);
            }

            if (convertView == null) {
                convertView = LayoutInflater.from(mContext).inflate(R.layout.t3, null);
                holder = new ViewHolder();
                holder.usernameHomepage = (TextView) convertView.findViewById(R.id.fname);
                holder.statusHomepage = (TextView) convertView.findViewById(R.id.lname);
                holder.pposition = (TextView) convertView.findViewById(R.id.idposition);
                holder.orgName = (TextView) convertView.findViewById(R.id.organizationname);
                holder.logo = (ImageView) convertView.findViewById(R.id.imageView);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }

            ParseObject statusObject = (ParseObject) getItem(position);
            // title
            String username = statusObject.getString("firstname");
            holder.usernameHomepage.setText(username);
            // content
            String status = statusObject.getString("lastname");
            holder.statusHomepage.setText(status);
            // content
            String positions = statusObject.getString("position");
            holder.pposition.setText(positions);
            // content
            String org = statusObject.getString("organizationName");
            holder.orgName.setText(org);
            // logo
            URL url = null;
            Bitmap bmp = null;
            try {
                url = new URL("img hosting location" + statusObject.getString("image"));
                bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());
            } catch (MalformedURLException e) {
            }catch (IOException e) {
            }
            holder.logo.setImageBitmap(bmp);
            Picasso.with(mContext)
                    .load(String.valueOf(url))
                    .into(((ImageView) convertView
                            .findViewById(R.id.imageView)));

            return convertView;
        }

        public static class ViewHolder {
            TextView usernameHomepage;
            TextView statusHomepage;
            TextView orgName;
            TextView pposition;
            ImageView logo;
        }

        // Code for Custom Filter.
        @Override
        public Filter getFilter() {return new Filter(){
            @Override
            protected FilterResults performFiltering(CharSequence charSequence) {
                String queryString = charSequence.toString().toLowerCase();
                List<ParseObject> filteredList = new ArrayList<>();
                ParseObject tmpItem;
                String tmpUsername, tmpStatus, tmpPositions, tmpOrg;
                for(int i=0; i<mBackupList.size(); i++){
                    tmpItem = (ParseObject) mBackupList.get(i);
                    tmpUsername = tmpItem.getString("firstname").toLowerCase();
                    tmpStatus = tmpItem.getString("lastname").toLowerCase();
                    tmpPositions = tmpItem.getString("position").toLowerCase();
                    tmpOrg = tmpItem.getString("organizationName").toLowerCase();
                    // The matching condition
                    if(tmpUsername.contains(queryString)||tmpStatus.contains(queryString)||
                            tmpPositions.contains(queryString)||tmpOrg.contains(queryString)){
                        filteredList.add(tmpItem);
                    }
                }
                FilterResults filterResults = new FilterResults();
                filterResults.count = filteredList.size();
                filterResults.values = filteredList;
                return filterResults;
            }
            @Override
            protected void publishResults(CharSequence charSequence, Filter.FilterResults filterResults) {
                clear();
                addAll((List<ParseObject>) filterResults.values);
            }
        };}

        public void updateBackupList(List newList){
            mBackupList.clear();
            mBackupList.addAll(newList);
        }
    }

The ListView layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="0dp"
    android:paddingRight="0dp">

    <TextView android:id="@id/android:empty"
        android:layout_width="match_parent"
        android:layout_height="335dp"
        android:text="No data"
        android:layout_below="@+id/button3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="56dp"
        android:layout_toLeftOf="@+id/android:list"
        android:layout_toStartOf="@+id/android:list" />

    <SearchView
        android:id="@+id/ser1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:queryHint="Search.."
        android:background="@android:color/holo_red_dark"
        android:layout_marginTop="60dp"
        android:layout_alignTop="@+id/android:empty"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
    </SearchView>

    <ListView android:id="@id/android:list"
              android:layout_width="263dp"
              android:layout_height="241dp"
              android:layout_marginTop="34dp"
              android:layout_below="@+id/android:empty"
              android:layout_alignParentLeft="true"
              android:layout_alignParentStart="true"
              android:layout_alignParentRight="true"
              android:layout_alignParentEnd="true"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/individuals_img"
        android:id="@+id/imageView3"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/android:empty"
        android:layout_toEndOf="@+id/android:empty"/>

</RelativeLayout>

The item layout for the ListView:

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

<ImageView
        android:id="@+id/imageView"
        android:layout_gravity="center"
        android:layout_height="110dp"
        android:layout_width="110dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="14dp"
        android:layout_marginStart="14dp"
        android:layout_marginTop="19dp"
        />
    <!--  img  -->


    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/organizationname"
        android:textSize="10sp"
        android:layout_below="@+id/idposition"
        android:layout_alignLeft="@+id/idposition"
        android:layout_alignStart="@+id/idposition"
        android:paddingTop="10px" />


    <TextView
        android:text="yyyyyyyyyyyyyyyyy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/idposition"
        android:textSize="10sp"
        android:layout_below="@+id/fname"
        android:layout_alignLeft="@+id/fname"
        android:layout_alignStart="@+id/fname" />

    <TextView
        android:id="@+id/fname"
        android:text="Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:layout_marginStart="12dp"
        android:textColor="#000"
        android:textSize="12sp"
        android:textStyle="bold"
        android:layout_alignTop="@+id/imageView"
        android:layout_toRightOf="@+id/imageView"
        android:layout_toEndOf="@+id/imageView"
        android:layout_marginTop="13dp"
        android:fontFamily="sans-serif" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lname"
        android:textColor="#000"
        android:textSize="12sp"
        android:textStyle="bold"
        android:layout_above="@+id/idposition"
        android:layout_toRightOf="@+id/organizationname"
        android:layout_toEndOf="@+id/organizationname" />

</RelativeLayout>

Main activity layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:fitsSystemWindows="true"
    tools:context="app.com.anew.fbcapplication.AppHome">

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <Button
                android:layout_height="40dp"
                android:background="@drawable/nav"
                android:id="@+id/button2"
                android:layout_weight="1"

                android:layout_width="40dp"
                android:layout_alignBottom="@+id/button"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                tools:paddingLeft="25dp"
                tools:layout_marginLeft="20dp" />

            <Button
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/i"
                android:id="@+id/button"
                android:layout_weight="1"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />

            <ImageView
                app:srcCompat="@drawable/logo"
                android:id="@+id/imageView2"
                android:layout_weight="1"
                tools:layout_marginLeft="15dp"
                android:layout_width="280dp"
                android:layout_alignParentTop="true"
                android:layout_toLeftOf="@+id/button"
                android:layout_toStartOf="@+id/button"
                android:layout_height="50dp" />

        </RelativeLayout>


        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/TabTextAppearance"
            />

    </android.support.design.widget.AppBarLayout>

</RelativeLayout>

Answer 1

I get error when trying your ListView (I think that it is individuals.xml), e.g. TextView android:id="@id/android:empty" has an attribute android:layout_below="@+id/button3" but I can't find button3 in your layout.

This may be the layout that you want, individuals.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/individuals_img"
    android:src="@drawable/individuals_img"
    android:id="@+id/imageView3"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"/>

<SearchView
    android:id="@+id/ser1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:queryHint="Search.."
    android:background="@android:color/holo_red_dark"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_toLeftOf="@+id/imageView3"
    android:layout_toStartOf="@+id/imageView3" >
</SearchView>

<TextView android:id="@id/android:empty"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="No data"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/ser1" />

<ListView android:id="@id/android:list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/ser1" />

 </RelativeLayout>

If this is not what you are looking for, please also show what your layout looks like in Android Studio layout editor. Hope it help :)