I'm building an Android application and on my MainActivity I have a "switch" button and right below it I have a bar with three different tabs.
The switch button can be set in "on" and "off". It was the first thing I tried to do and it worked just fine. But after I added this bar with tabs the switch button stopped working, it appears to have something inside this bar that doesn't allow the switch to work. I am new to Android Development.
This is my MainActivity Code:
If I erase or comment everything from "//Tabs" bellow the switch starts to work again, otherwise it just doesn't change from on to off.
public class MainScreen extends AppCompatActivity{
Switch list_toggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_screen);
final TextView textView4 = (TextView) findViewById(R.id.textView4);
textView4.setText(Html.fromHtml("Absent"));
list_toggle = (Switch) findViewById(R.id.mySwitch);
list_toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
textView4.setText(Html.fromHtml("Available"));
} else {
textView4.setText(Html.fromHtml("Absent"));
}
}
});
//Tabs
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Orders"));
tabLayout.addTab(tabLayout.newTab().setText("Past Orders"));
tabLayout.addTab(tabLayout.newTab().setText("More"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Here's my XML code:
<?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"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/topbg"
android:minHeight="?attr/actionBarSize">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/top_logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Hi, Marcos"
android:id="@+id/textView3"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textSize="12dp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<Switch
android:id="@+id/mySwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:showText="true"
android:textOn="ON"
android:thumb="@drawable/customswitchselector"
android:track="@drawable/custom_track"
android:textOff="OFF"
android:layout_marginTop="28dp"
android:textColor="#ffffff"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
android:layout_below="@+id/toolbar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/textView4"
android:layout_marginRight="69dp"
android:layout_marginEnd="69dp"
android:textColor="#a6a6a6"
android:textSize="30dp"
android:layout_alignBottom="@+id/mySwitch"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="149dp" />
<android.support.v4.view.ViewPager
android:id="@+id/pager1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/tab_layout"/>
</RelativeLayout>
</RelativeLayout>
Using RelativeLayout means that you position its child views relatively to each other. For example you may say that you want a TabLayout to appear below a Switch. To indicate the relation between two views these two atributes are used: android:layout_below and android:layout_toRightOf. With them you say I want this view to be below or to right of the view with the following resource ID. In your case this is how the layout of the TabLayout should look:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/mySwitch">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="149dp" />
<android.support.v4.view.ViewPager
android:id="@+id/pager1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/tab_layout"/>
</RelativeLayout>
Note that you are already doing the same relation between the Switch and the Toolbar.
There are other tags working with RelativeLayout (centering the view, or snapping it to the edge of the layout). If you don't provide any of those for a child view it will be drawn at the top left edge of the RelativeLayout by default. If there is already a view there, they would just be on top of each other. If you don't provide positioning information for any of your child views, all would be drawn snapped at the top left edge and can all overlap. Sometimes this is the behavior that we are looking for but not in your case. You did not add an attribute for the layout of the Tab section in your xml and Android deduced to just draw it on top of the Switch. So this layout got the touch events meant for the Switch and thatswhy it didn't work.
But why making the Switch the last child worked? Because the views are drawn in the order they are in the xml. So when the Switch is last, it is drawn last, after the RelativeLayout child and it is the one to be on top. This means it can get the touch events now. However, you can see how using the attributes is the better solution. They are actually made to address situations like yours and using the order of the children is kind of subtle.