Develop Reference

Android background color of button change automatically

I have never seen a bug as weird as that before, I'm linking a viewpager with a tablayout, inside the viewpager there are three fragments.
Two of the fragments (let's say fragment 1 & 3) have a button inside them and their colours are both set to "pink". When I first load the app, it shows fragment 1, the button is pink at that moment, however, whenever I switch to fragment 3, the background color of the button is changed to "white" and other attributes of the button stay the same.
This won't happen if I switch to fragment 2. However, if I switch to fragment 3 once, both fragments 1 & 3's button have white background for the rest of the lifetime.
Can someone tell me what's happening here or what could cause this? I'm not changing the style of the buttons in Java files at all.
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ActivityMainBinding binding;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
setUpWithViewPager(binding.viewPager);
// setupWithViewPager is a built-in method for TabLayout, setting up this TabLayout with a ViewPager
// The TabLayout will be automatically populated from the PagerAdapter's page titles. By doing that,
// when the user tabs on the tab, the appropriate fragment will be shown in the ViewPager
// TabLayout provides a horizontal layout to display tabs.
// Without this line you can still swipe left/right to see all the pages, just cannot tab on the
// tab to switch pages
binding.tabLayout.setupWithViewPager(binding.viewPager);
// This method sets the toolbar as the app bar for the activity
setSupportActionBar(binding.toolbar);
// change the fab icon when the page is changed
binding.viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
changeFabIcon(position);
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setUpWithViewPager(ViewPager viewPager) {
// An inner class defined in MainActivity
SectionsPagerAdapter adapter = new SectionsPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new ChatsFragment(), "Chats");
adapter.addFragment(new StatusFragment(), "Status");
adapter.addFragment(new CallsFragment(), "Calls");
// We need 3 fragments
viewPager.setAdapter(adapter);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// getMenuInflater is used to instantiate menu XML files into Menu objects.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_search: Toast.makeText(this, "Action Search", Toast.LENGTH_SHORT).show(); break;
case R.id.menu_more: Toast.makeText(this, "Action More", Toast.LENGTH_SHORT).show(); break;
}
return super.onOptionsItemSelected(item);
}
private void changeFabIcon(final int index) {
binding.fabAction.hide();
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
switch (index) {
case 0: binding.fabAction.setImageDrawable(getDrawable(R.drawable.ic_baseline_chat_24)); break;
case 1: binding.fabAction.setImageDrawable(getDrawable(R.drawable.ic_baseline_camera_alt_24)); break;
case 2: binding.fabAction.setImageDrawable(getDrawable(R.drawable.ic_baseline_call_24)); break;
}
binding.fabAction.show();
}
}, 400);
}
private static class SectionsPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public SectionsPagerAdapter(#NonNull FragmentManager fm) {
super(fm);
}
#NonNull
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Nullable
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout
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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".view.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:titleTextColor="#android:color/white"
app:title="PepperChat"/>
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabBackground="#color/colorPrimary"
app:tabGravity="fill"
app:tabIndicator="#color/colorPrimary"
app:tabIndicatorHeight="3dp"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_below="#id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_action"
android:src="#android:drawable/stat_notify_chat"
android:tint="#android:color/white"
app:backgroundTint="#color/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="15dp"/>
</RelativeLayout>
</layout>
fragment_calls.xml
<?xml version="1.0" encoding="utf-8"?>
<layout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".menu.CallsFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="#+id/ln_invite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Invite your friends"
android:textSize="25dp"
android:textColor="#android:color/black"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:textColor="#color/colorPrimary"
android:gravity="center_horizontal"
android:text="Name of your contact are using PepperChat.\nUse the bottom below to invite them."/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:textColor="#android:color/black"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:text="Invite a friend"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:text="Chat with your friends who are using PepperChat on iphone,\nAndroid or KaiOS phone"/>
</LinearLayout>
</FrameLayout>
</layout>
fragment_chats.xml
<?xml version="1.0" encoding="utf-8"?>
<layout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".menu.ChatsFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<LinearLayout
android:id="#+id/ln_invite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Invite your friends"
android:textSize="25dp"
android:textColor="#android:color/black"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:textColor="#color/colorPrimary"
android:gravity="center_horizontal"
android:text="Name of your contact are using PepperChat.\nUse the bottom below to invite them."/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:textColor="#android:color/black"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:text="Invite a friend"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:text="Chat with your friends who are using PepperChat on iphone,\nAndroid or KaiOS phone"/>
</LinearLayout>
</FrameLayout>
</layout>

After adding the following line in both of the xml files, the button appears normally, not sure why though, can someone explain what happened? (is that something related to the theme I'm using?)
android:backgroundTint="#color/colorPrimary"
and my theme is
<style name="Theme.PepperChat" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
if I change the parent to Theme.MaterialComponent.Light.NoActionBar, then the app works fine without adding backgroundTint.
Again, would like some explanations on why this happens.

Android material TabLayout TabItem doesn't show text

I want to set up a TabLayout. When I add TabItems inside of XML or programatically, they occupy space and can be clicked, yet their text is not displayed. When I access their text programatically inside of OnTabSelectedListener via tab.getText(), it's there.
The same happened, when I wanted to use the pager.
I know, that
TabItem is not actually added to TabLayout, it is just a dummy which
allows setting of a tab items's text, icon and custom layout
but i don't know how to show its text on the screen.
AndroidStudio's design shows the layout as intended.
I write my app in Java.
.xml:
<com.google.android.material.tabs.TabLayout
android:id="#+id/exercise_menu_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorSurfaceElevation1dp"
app:tabMode="fixed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.tabs.TabItem
android:id="#+id/exercise_menu_dayTabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Day"/>
<com.google.android.material.tabs.TabItem
android:id="#+id/exercise_menu_myExercisesTabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Exercises"/>
<com.google.android.material.tabs.TabItem
android:id="#+id/exercise_menu_exerciseTabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercises"/>
</com.google.android.material.tabs.TabLayout>
How it looks in AndroidStudio:
How it looks in AndroidStudio
How it looks in the app:
How it looks in the app
please help material is driving me crazy

This can be solve programmatically
Step 1 Create FragmentStateAdapter adapter class
public class TabAdapter extends FragmentStateAdapter {
public TabAdapter(#NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
#NonNull
#Override
public Fragment createFragment(int position) {
switch (position) {
case 0:
return new DayFragment();
case 1:
return new MyExerciseFragment();
default:
return new ExerciseFragment();
}
}
#Override
public int getItemCount() {
return 3;
}
}
Step 2 Create a method in your activity or fragment class to set tabs using TabLayoutMediator and call the method in onCreate method
void setupTabLayout() {
ViewPager2 viewPager = binding.exerciseMenuViewPager;
viewPager.setAdapter(tabAdapter);
TabLayout tabLayout = binding.exerciseMenuTabLayout;
new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
switch (position) {
case 0:
tab.setText("Day");
break;
case 1:
tab.setText("My Exercise");
break;
default:
tab.setText("Exercise");
}
}).attach();
}
This is how your activity class will look like
public class MainActivity extends AppCompatActivity {
private ActivityMainBinding binding;
private TabAdapter tabAdapter;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
tabAdapter = new TabAdapter(this);
setupTabLayout();
}
void setupTabLayout() {}
}
NOTE: To use ViewBinding add this code to your app level build.gradle file.
android{
...
buildFeatures {
viewBinding true
}
...
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="#+id/exercise_menu_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/exercise_menu_viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/exercise_menu_tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
Final results
PS: You need to create these fragment classes DayFragment.java, MyExerciseFragment.javaand ExerciseFragment.

Because I didn't want to use pager with fragments, and I couldn't get TabLayout to work, I made my own TabLayout.
I used LinearLayout with TextViews and just made a drawable with a line at the bottom and appropriate backgroundColor. It works flawlessly, and the only thing missing is the animation for line movement.
After each click, look of the previously selected textView is restored, and the new one is changed.
<TextView
android:id="#+id/exercise_menu_dayTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Day"
android:textAlignment="center"
android:layout_weight="1"
android:textSize="18sp"
android:textStyle="bold|italic"
android:textColor="#color/textColor"
android:background="#color/colorSurfaceElevation1dp"
android:paddingVertical="8dp"/>
<TextView
android:id="#+id/exercise_menu_myExercisesTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="My Exercises"
android:textAlignment="center"
android:layout_weight="1"
android:textSize="18sp"
android:textStyle="bold|italic"
android:textColor="?attr/colorPrimary"
android:maxLines="1"
android:background="#drawable/back_line_bottom"
android:paddingVertical="8dp"/>
<TextView
android:id="#+id/exercise_menu_exerciseTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Exercises"
android:textAlignment="center"
android:layout_weight="1"
android:textSize="18sp"
android:textStyle="bold|italic"
android:textColor="#color/textColor"
android:background="#color/colorSurfaceElevation1dp"
android:paddingVertical="8dp"/>
back_line_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorSurfaceElevation1dp"/>
</shape>
</item>
</layer-list>
background changing:
public void changeTypeVisually(int tabId) {
// Resets the background
switch(currentTabId) {
case 0:
myExercisesTextView.setBackgroundColor(getResources().getColor(R.color.colorSurfaceElevation1dp));
myExercisesTextView.setTextColor(getResources().getColor(R.color.textColor));
break;
case 1:
dayTextView.setBackgroundColor(getResources().getColor(R.color.colorSurfaceElevation1dp));
dayTextView.setTextColor(getResources().getColor(R.color.textColor));
break;
case 2:
exerciseTextView.setBackgroundColor(getResources().getColor(R.color.colorSurfaceElevation1dp));
exerciseTextView.setTextColor(getResources().getColor(R.color.textColor));
break;
}
// Adds the underline
switch(tabId) {
case 0:
myExercisesTextView.setBackground(getResources().getDrawable(R.drawable.back_line_bottom));
myExercisesTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
break;
case 1:
dayTextView.setBackground(getResources().getDrawable(R.drawable.back_line_bottom));
dayTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
break;
case 2:
exerciseTextView.setBackground(getResources().getDrawable(R.drawable.back_line_bottom));
exerciseTextView.setTextColor(getResources().getColor(R.color.colorPrimary));
break;
}
currentTabId = tabId;
}

Tabs titles on TabLayout not showing

Update: I modified my adapter class to the following, and it works fine now:
public class SectionsPagerAdapter extends FragmentPagerAdapter {
R.string.tab_text_2, R.string.tab_text_3};
//private final Context mContext;
private static int tab_count;
private Context mContext;
public SectionsPagerAdapter(FragmentManager fm, int tab_count, Context context) {
super(fm);
mContext = context;
this.tab_count = tab_count;
}
#Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
// Return a PlaceholderFragment (defined as a static inner class below).
//return PlaceholderFragment.newInstance(position + 1);
switch (position)
{
case 0:
Tab1Pagina_Inicial tab1 = new Tab1Pagina_Inicial();
return tab1;
case 1:
Tab2Apartamentos tab2 = new Tab2Apartamentos();
return tab2;
case 2:
Tab3ItensDeApartamentos tab3 = new Tab3ItensDeApartamentos();
return tab3;
default:
return null;
}
}
#Override
public CharSequence getPageTitle(int position) {
switch (position)
{
case 0:
return mContext.getString(R.string.tab_text_1);
case 1:
return mContext.getString(R.string.tab_text_2);
case 2:
return mContext.getString(R.string.tab_text_3);
default:
return null;
}
}
#Override
public int getCount()
{
return tab_count;
}
}
Adding the getPageTitle worked!
Thank you for the tips. ^^
I'm creating an app with a tab menu but the tabs' titles are not displaying properly.
I've tried rereading and looking again at every tutorial I've seen so far, as well as comparing my code to others with similar questions here on stackoverflow but I still can't seem to identify what I'm doing wrong and where. Could anyone enlighten me as to my mistake?
Thank you in advance for any clarification.
Edit: I don't think it's the color. I've tried messing with the colors and themes of both TabLayout, AppBarLayout and each tab item separately (as well as removing the themes altogether) and the titles are still not showing like they should. But I'll post the code for my colors.xml and styles.xml files just in case.
Edit 2: Guys, I've found out something curious. Now I'm not sure I really understand TabLayout as I thought I did.
Before I set my TabLayout with my ViewPager with the setupWithViewPager method, everything appears as it should. The titles show up I mean. But I can only actually change tabs by swiping. Clicking on each tab does nothing.
I'll attach an image to show what I mean.
Here's what I thought I understood:
I know I need an adapter to render each fragment as content for each tab.
I know the ViewPager is the component responsible for the swiping between tabs.
TabLayout is a layout where I can display my tabs.
I need to hook my TabLayout to my ViewPager in order to display the correct content whenever I click a specific tab.
Am I missing something?
MainActivity:
package com.example.pousadaviladascores.Activities;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import com.example.pousadaviladascores.DAO.SqlAccess;
import com.example.pousadaviladascores.UI.SectionsPagerAdapter;
import com.example.pousadaviladascores.R;
import com.google.android.material.tabs.TabLayout;
public class MainActivity extends AppCompatActivity {
SqlAccess sqlAccess;
//Declaring TabLayout and ViewPager
TabLayout tabLayout;
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();
setContentView(R.layout.activity_main);
sqlAccess = new SqlAccess(this);
//Initializing TabLayout
tabLayout = findViewById(R.id.tabLayout);
//Initializing viewPager
viewPager = findViewById(R.id.view_pager);
//Initializing page adapter
//OBS: In Android, Adapter is a bridge between UI component and data source that helps us to fill data in UI component.
SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
//Sets a PagerAdapter that will supply views for this pager as needed
viewPager.setAdapter(sectionsPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
#Override
protected void onDestroy() {
sqlAccess.getDbHelper().close();
super.onDestroy();
}
}
Fragment class (I have three classes, one for each fragment and they all have the same code, so I'm just posting one):
package com.example.pousadaviladascores.Activities;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
import com.example.pousadaviladascores.R;
public class Tab1Pagina_Inicial extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
return inflater.inflate(R.layout.tab1_fragment_pagina_inicial, container, false);
}
}
Page Adapter class:
package com.example.pousadaviladascores.UI;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import com.example.pousadaviladascores.Activities.Tab1Pagina_Inicial;
import com.example.pousadaviladascores.Activities.Tab2Apartamentos;
import com.example.pousadaviladascores.Activities.Tab3ItensDeApartamentos;
/**
* A [FragmentPagerAdapter] that returns a fragment corresponding to
* one of the sections/tabs/pages.
*/
public class SectionsPagerAdapter extends FragmentPagerAdapter {
private static int tab_count;
public SectionsPagerAdapter(FragmentManager fm, int tab_count) {
super(fm);
//mContext = context;
this.tab_count = tab_count;
}
#Override
public Fragment getItem(int position) {
switch (position)
{
case 0:
Tab1Pagina_Inicial tab1 = new Tab1Pagina_Inicial();
return tab1;
case 1:
Tab2Apartamentos tab2 = new Tab2Apartamentos();
return tab2;
case 2:
Tab3ItensDeApartamentos tab3 = new Tab3ItensDeApartamentos();
return tab3;
default:
return null;
}
}
#Override
public int getCount()
{
return tab_count;
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<TextView
android:id="#+id/textViewAppName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingTop="5dp"
android:paddingRight="20dp"
android:text="#string/pousada_name"
android:textSize="24sp" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="34dp"
android:theme="?attr/actionBarTheme"
app:layout_scrollFlags="scroll|enterAlways" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed">
<com.google.android.material.tabs.TabItem
android:id="#+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_3" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Tab layout (again, all the same except for the text):
<?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:orientation="vertical">
<TextView
android:id="#+id/textTab"
android:layout_width="369dp"
android:layout_height="54dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="27dp"
android:layout_marginLeft="27dp"
android:layout_marginTop="0dp"
android:layout_marginEnd="15dp"
android:text="#string/tab_text_1"
android:textSize="30sp"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp" />
</RelativeLayout>
colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
</resources>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
To better illustrate what I mean, here's the design of activity_main and how it's supposed to look:
Here's what's actually happening:
The text for each page shows up fine, but not the titles. :/

There are 2 issues.
The method tabLayout.setupWithViewPager() removes all tabs and then adds tabs from the adapted using: addTab(newTab().setText(pagerAdapter.getPageTitle(i)), false);
You have to override in your adapter the method getPageTitle to obtain the title string. The default value is null. Something like:
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "....";
case 1:
return "....";
....
}
return null;
}
Also to use the com.google.android.material.tabs.TabLayout you have to use a Material Components Theme in your app. You are using an AppCompat theme.
You can:
switch to a Material Components theme (suggested and required in the next releases)
add app:tabTextColor attribute:
<com.google.android.material.tabs.TabLayout
app:tabTextColor="#color/mySelector"
.../>
define the style:
<com.google.android.material.tabs.TabLayout
style="#style/Widget.MaterialComponents.TabLayout"
The default style used by the TabLayout in a Material Component theme is Widget.MaterialComponents.TabLayout while in an AppCompat is Widget.Design.TabLayout
There are some difference, in your case it is the issue:
<style name="Widget.Design.TabLayout" >
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabTextColor">#null</item>

Activity main
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<TextView
android:id="#+id/textViewAppName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingTop="5dp"
android:paddingRight="20dp"
android:text="#string/pousada_name"
android:textSize="24sp" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="34dp"
android:theme="?attr/actionBarTheme"
app:layout_scrollFlags="scroll|enterAlways" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Your main activity
public class MainActivity extends AppCompatActivity {
SqlAccess sqlAccess;
//Declaring TabLayout and ViewPager
TabLayout tabLayout;
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();
setContentView(R.layout.activity_main);
sqlAccess = new SqlAccess(this);
viewPager = (ViewPager) findViewById(R.id.view_pager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
SectionsPagerAdapter adapter = new SectionsPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new Tab1Pagina_Inicial(), "ONE");
adapter.addFragment(new Tab2Apartamentos(), "TWO");
adapter.addFragment(new Tab3ItensDeApartamentos(), "THREE");
viewPager.setAdapter(adapter);
}
#Override
protected void onDestroy() {
sqlAccess.getDbHelper().close();
super.onDestroy();
}
}
And replace your section pager adapter with this
class SectionPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public SectionPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}

in activity_main.xml, remove android:theme="#style/AppTheme.AppBarOverlay from appbarlayout(). i think text color problem. it is the same color as appbar. so it is not showing. if you change your theme probably your text will be appeared.

How to set menu to an AppBarLayout

I'm new to programming, and I want to add a settings menu button.
Like on the picture, my app doesn't show the three dots button.
MainActivity.java :
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());
ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setAdapter(sectionsPagerAdapter);
TabLayout tabs = findViewById(R.id.tabs);
tabs.setupWithViewPager(viewPager);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.settings, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.vueSatellite:
Toast.makeText(this, "Hi", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:textColor="#color/colorAccent"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/White"
app:tabTextColor="#color/colorAccent"/>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
settings.xml :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/vueSatellite"
android:title="#string/item_vue_satellite"
app:showAsAction="never"/>
</menu>
What is my mistake ?
Or what do I have to add?
Tell me if there is missing information like the file AndroidManifest.xml for example.
Thanks

In your Activity just add
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Hope it works.

Android custom app bar underneath system default

My MainActivity.xml is as below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_appbar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_appbar"
app:menu="#menu/activity_appbar_drawer" />
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_3" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<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.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
My intention is to have an appbar with navigation drawer (icon on left), and options menu (icon on right). However, it appears to be stuck underneath the system default. Here is an image showing its preview:
Additionally, my styles.xml is:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Changing AppCompat.Light.DarkActionBar to NoActionBar has no effect. The appbar with "AppName" just remains above the other appbar (which should show "BEEP" as text, in addition to the two icons for navbar and options menu) - NoActionBar is also defined in the manifest for the activity:
<activity
android:name=".MainActivity"
android:label="BEEP"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Here is the relevant part of the MainActivity.java, if needed:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
...
So, how can I get the toolbar (ID is "toolbar") to display instead of the default appbar that currently contains the text "AppName" in the above image? I also followed this, however there is no change in the result.
EDIT 1: The following screenshot shows my user-defined appbar appearing underneath the default, for some reason. I have also included my app_bar_appbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_appbar" />
</android.support.design.widget.CoordinatorLayout>

As you are having Theme.AppCompat.Light.DarkActionBar to your Application tag of AndroidManifest all activity will include default actionbar.
Create one more theme in your styles.xml with NoActionBar and apply this to your NavigationDrawerActivity.
i.e.
<style name="navigation_theme" parent="Theme.AppCompat.Light.NoActionBar"/>
Set it to your Navigation Activity
<activity
android:name=".NavigationDrawerActivity"
android:label="#string/title_activity_navigation_drawer"
android:theme="#style/navigationtheme" />
Example of default theme with ActionBar and NavigationDrawerActivity with NoActionBar theme
EDIT
As #Talisman said, it was the issue with the TabLayout and ViewPager
of DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.and.NavigationDrawerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_blue_light"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!--Your content in this FrameLayout-->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.and.NavigationDrawerActivity">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_navigation_drawer"
app:menu="#menu/activity_navigation_drawer_drawer" />
</android.support.v4.widget.DrawerLayout>
Now Set the TabLayout and ViewPager in other Fragment and Load that fragment in this FrameLayout on onCreate method of NavigationDrawerActivity
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction tr = fm.beginTransaction();
tr.replace(R.id.frame_container, fragment);
tr.commitAllowingStateLoss();
where fragment is other fragment which contains your TabLayout and ViewPager.

Everything is looking perfect as it should be. If you just want to change the title of toolbar then you just have to add few lines of code in MainActivity.java
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// add few lines here like...
toolbar.setTitle("Your title here");
// ....
setSupportActionBar(toolbar);
If right option menu not showing then override these two method in MainActivity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, 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();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return false;
}
return super.onOptionsItemSelected(item);
}

First of all select "AppTheme" from layout preview
Select Project Theme >> AppTheme.NoActionBar
To create option menu for your Activity
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.menu_item:
//do need full stuff
break;
case R.id.menu_settings:
//do need full stuff
break;
}
}
create a menu.xml in res>menu folder
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_item"
android:title="Item"/>
<item
android:id="#+id/menu_settings"
android:title="Settings" />
</menu>