What is the proper way to use Toolbar and SwipeRefreshLayout?

Question

I am trying to use a SwipeRefreshLayout and a toolbar but every time I use both the Progress Circle appears over the Toolbar wich is really bad in terms of design. I tried putting the SwipeRefreshLayout under the toolbar but that doesn't work the progress circle still appears on top of it (above the status bar). I would to like to use the toolbar and the layout at the same time like in the Gmail app. I am using the AppCompat library.

Here is my code:

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


   <android.support.v4.widget.SwipeRefreshLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe_container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">




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


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

            <include layout="@layout/bluetooth_toolbar"
                android:id="@+id/bluetooth_toolbar"/>


            <TextView
                android:id="@+id/swipeTo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Swipe down to refresh"
                android:textSize="20sp"
                android:layout_below="@+id/bluetooth_toolbar"
                android:layout_centerHorizontal="true" />

            <ListView
                android:id="@+id/newDevices"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/swipeTo"
                android:layout_marginTop="50dp" />

            <ListView
                android:id="@+id/pairedDevices"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/newDevices"
                android:layout_marginTop="50dp" />
        </RelativeLayout>
    </ScrollView>

   </android.support.v4.widget.SwipeRefreshLayout>

and

public class BluetoothActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener {


private static final int REQUEST_ENABLE_BT = 0;
private BluetoothAdapter bluetoothAdapter = BluetoothAdapter.getDefaultAdapter();
private SwipeRefreshLayout mSwipeRefreshLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_bluetooth);
    Toolbar bluetoothToolbar = (Toolbar) findViewById(R.id.bluetooth_toolbar);
    setSupportActionBar(bluetoothToolbar);
    final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
    upArrow.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
    getSupportActionBar().setHomeAsUpIndicator(upArrow);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_container);
    mSwipeRefreshLayout.setOnRefreshListener(this);
    mSwipeRefreshLayout.setColorScheme(
            R.color.yellow,
            R.color.flashy_blue,
            R.color.yellow,
            R.color.flashy_blue);


    if (bluetoothAdapter == null) {
        // Device does not support Bluetooth
    }
    if (!bluetoothAdapter.isEnabled()) {
        Intent enableBtIntent = new Intent(BluetoothAdapter.ACTION_REQUEST_ENABLE);
        startActivityForResult(enableBtIntent, REQUEST_ENABLE_BT);
    }


}


public void onRefresh() {
    Toast.makeText(this, getString(R.string.bluetooth_refresh), Toast.LENGTH_SHORT).show();
    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            mSwipeRefreshLayout.setRefreshing(false);
        }
    }, 2000);

    bluetoothAdapter.startDiscovery();

 if (bluetoothAdapter.getScanMode() != BluetoothAdapter.SCAN_MODE_CONNECTABLE_DISCOVERABLE) {
     Intent discoverableIntent = new Intent(BluetoothAdapter.ACTION_REQUEST_DISCOVERABLE);
       discoverableIntent.putExtra(BluetoothAdapter.EXTRA_DISCOVERABLE_DURATION, 300);
     startActivity(discoverableIntent);
      }


}


protected void onDestroy() {
    super.onDestroy();
    bluetoothAdapter.cancelDiscovery();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.bluetooth, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        startActivityForResult(new Intent(Settings.ACTION_BLUETOOTH_SETTINGS), 0);
        return true;
    }
    return super.onOptionsItemSelected(item);
}

}

Thanks

Answer 1

this is because your toolbar is part of the relative layout which gets refreshed. you should exclude the toolbar like this:

<?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="match_parent"
    android:orientation="vertical">

  <include layout="@layout/bluetooth_toolbar"
      android:id="@+id/bluetooth_toolbar"/>

  <android.support.v4.widget.SwipeRefreshLayout 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/swipe_container"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">

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

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

        <TextView
            android:id="@+id/swipeTo"
            android:layout_width="wrap_content"
            ...

      </RelativeLayout>
    </ScrollView>
  </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>