Android loading screen in fragments

Issue

I would like to create a blank loading screen in my fragment. The code is half way done, but the problem is the layout loads first, and then the retrieved data.

Demonstration: https://www.youtube.com/watch?v=eGR8mkNLFqI

I want to have a blank screen while loading, and then show everything at once. So how do I inflate layout under onPostExecute? Or how should I do the loading screen?

Thanks.

public class FragmentSrvInfo extends Fragment {

 public View rootView;

 SampQuery query = AddServerActivity.query;

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  rootView = inflater.inflate(R.layout.fragment_srv_info2, container, false);

  new getServerInfo().execute();

  return rootView;
 }

 public class getServerInfo extends AsyncTask < String, Integer, Boolean > {

  String[] serverInfo = null;

  @Override
  protected Boolean doInBackground(String...params) {

   if (query.connect()) {
    serverInfo = query.getInfo();
    return true;
   }
   return false;
  }

  @Override
  protected void onPostExecute(Boolean strings) {

   if (serverInfo != null) {
    TextView hostname = (TextView) rootView.findViewById(R.id.id_hostname);
    TextView players = (TextView) rootView.findViewById(R.id.id_players);
    TextView gamemode = (TextView) rootView.findViewById(R.id.id_mode);
    TextView lang = (TextView) rootView.findViewById(R.id.id_lang);

    hostname.setText(serverInfo[3]);
    players.setText(serverInfo[1] + "/" + serverInfo[2]);
    gamemode.setText(serverInfo[4]);
    lang.setText(serverInfo[5]);
   }
  }

 }
}

Solution

Wrap your layout in a FrameLayout and add a blank "loading screen" on top of it (which means last entry in your framelayout) with width and heigth to match_parent.

<FrameLayout>
    <BLA>Layout for your data you load in Background</BLA>
    <LinearLayout android:width="match_parent"
        android:height="match_parent"
        android:id="@+id/loading"/>
</FrameLayout>

(This Layout XML is only to illustrate the idea, you of course have to write it so it matches your layout)

Then you can handle it with only one fragment - you simple set the visibility of your loading screen to View.GONE

public class getServerInfo extends AsyncTask<String, Integer, Boolean> {

    String[] serverInfo = null;

    @Override
    protected Boolean doInBackground(String... params) {

        if (query.connect()) { 
            serverInfo = query.getInfo();
            return true;
        }
        return false;
   }

   @Override
   protected void onPostExecute(Boolean strings) {
        rootView.findViewById(R.id.loading).setVisibility(View.GONE);
        if(serverInfo != null) {
          // your code to show data
        }
    }
}

If you load data multiple times, you can also set the Visibility to View.VISIBLE in onPreExecute();

Answered By - Jörn Buitink