We Keep Coding

Custom TabLayout Indicator - Android

I have been trying to make a custom TabLayout indicator like Google Drive's one but didn't figure it out.
I tried the following article:
https://medium.com/#adrianespi94/apply-new-google-style-to-your-android-material-tabs-4d498c993c51
It works fine, but not as good as the one in the GIF below.
Thanks in advance.

There's two thing like this.
works by clicking on tab.
works by horizontal scrolling and clicking on tab also.
I don't know what you want actually. cause, the link you gave that is no 1. which is TabHost. I am adding source code for both.
ViewPagerAdapter :
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList=new ArrayList<>();
private final List<String> fragmentListTitles=new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
#Override
public int getCount() {
return fragmentListTitles.size();
}
//return page title
#Override
public CharSequence getPageTitle(int position) {
return fragmentListTitles.get(position);
}
public void AddFragment(Fragment fragment,String title)
{
fragmentList.add(fragment);
fragmentListTitles.add(title);
}
}
MainActivity :
private TabLayout tabLayout;
private AppBarLayout appBarLayout;
private ViewPager viewPager;
tabLayout=(TabLayout)findViewById(R.id.tablayout);
viewPager=(ViewPager)findViewById(R.id.viewpager);
//create viewpageradaper class object
ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager());
//adding fragments using adapter object
adapter.AddFragment(new FreeFireFragment(), "Free Fire");
adapter.AddFragment(new PubgFragment(), "Pubg");
adapter.AddFragment(new CallOfDutyFragment(), "Call of Duty");
//set adapter into viewpager
viewPager.setAdapter(adapter);
//set viewpager into tablayout
tabLayout.setupWithViewPager(viewPager);
If you want to add icon :
//for set icon into tab items
final int[] ICONS = new int[]{
R.drawable.ff,
R.drawable.pubg,
R.drawable.cod
};
//enter the following source code below the MainActivity source code
//set icon to tab items
tabLayout.getTabAt(0).setIcon(ICONS[0]);
tabLayout.getTabAt(1).setIcon(ICONS[1]);
tabLayout.getTabAt(2).setIcon(ICONS[2]);
activity_home.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="55dp"
app:tabBackground="#color/homeColor"
app:tabGravity="fill"
app:tabIndicatorColor="#color/tabIndicator"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/tabIndicator"
app:tabTextColor="#color/tabTextColor">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/viewpager">
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
Above source code works as no 2.
Now, no 1:
Layout :
<TabHost
android:id="#+id/tab_host"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/rl_">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/Filters"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/filters_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/Adjustments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
layout="#layout/adjustment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#40cccccc" />
</LinearLayout>
</TabHost>
MainActivity
//setup tabHost
TabHost tabHost = findViewById(R.id.tab_host);
tabHost.setup();
//set item 1 in tabhost
TabHost.TabSpec Filters= tabHost.newTabSpec("Filters");
Filters.setContent(R.id.Filters);
Filters.setIndicator("Filters");
tabHost.addTab(Filters);
//set item 2 in tabhost
TabHost.TabSpec Adjustments= tabHost.newTabSpec("Adjustments");
Adjustments.setContent(R.id.Adjustments);
Adjustments.setIndicator("Adjustments");
tabHost.addTab(Adjustments);

I made the solution by myself, it seems like the solution can be done easily without libraries or any spaghetti code.
First, you need to an XML file for tab indicator:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<size android:height="3dp" />
<solid android:color="#color/selectedColor" />
</shape>
Then make a Selector to change the indicator color based on your selection:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/selectedColor" android:state_selected="true" />
<item android:color="#color/notSelectedColor" />
</selector>
Finally in your TabLayout, add these lines:
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIconTint="#drawable/tab_selector_color" //for selection
app:tabIndicator="#drawable/tab_indicator" //for rounded corners
app:tabIndicatorAnimationMode="elastic" //for that elastic swiping effect
app:tabIndicatorColor="#color/selectedColor"
app:tabIndicatorFullWidth="false"
app:tabInlineLabel="true"
app:tabSelectedTextColor="#color/selectedColor"
app:tabTextColor="#color/notSelectedColor"/>

Navigation drawer force close from activity, how to fix it?

I have a navigation drawer that is placed on the main activity, but when I open activity main, app force closes immediately.
I combine the drawer layout attribute with activity_main.xml[Edited]
<androidx.drawerlayout.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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".UtamaActivity"
android:layoutDirection="locale">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<ImageButton
android:id="#+id/btn_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu"
android:background="#android:color/transparent"
android:layout_margin="15dp" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
app:headerLayout="#layout/header_nav"
app:menu="#menu/nav_menu" />
...
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
I use the image button above to programmatically open the drawer layout.
drawerLayout = findViewById(R.id.drawer_layout);
findViewById(R.id.btn_nav).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
drawerLayout.openDrawer(GravityCompat.START);
drawerLayout.closeDrawer(GravityCompat.START);
}
});
and that is a program to manage the use of the drawer layout, I opened the drawer layout using the image button, but the problem I found was, I haven't entered the main activity, my app just forces close, how do I fix this problem?

<androidx.drawerlayout.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:layoutDirection="locale">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<ImageButton
android:id="#+id/btn_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu"
android:background="#android:color/transparent"
android:layout_margin="15dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/white"
app:itemIconTint="#color/white"
app:itemTextColor="#color/text_dark"
app:menu="#menu/activity_main2_drawer">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
//use this code to get drawer is open or not
drawerLayout = findViewById(R.id.drawer_layout);
findViewById(R.id.btn_nav).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (drawerLayout .isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START)
} else {
drawerLayout.openDrawer(GravityCompat.START)
}
}
});

The root of your issue is the missing android:layout_gravity attribute on the NavigationView tag, so try the following
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_gravity = "start"
...
... />

You are opening and closing the drawer simultaneously, in your code:
public void onClick(View view) {
drawerLayout.openDrawer(GravityCompat.START);
drawerLayout.closeDrawer(GravityCompat.START);
}
You first called drawerLayout.openDrawer(GravityCompat.START); and then immediately called drawerLayout.closeDrawer(GravityCompat.START);, when the programs runs, this will open the drawer and immediately closes the drawer.
What you have to do is simply remove drawerLayout.closeDrawer(GravityCompat.START);from your code above.

Navigation Drawer RTL [duplicate]

This question already has answers here:
How to set Navigation Drawer to be opened from right to left
(15 answers)
Closed 5 years ago.
I'm new on this site.
I'm now working on application in android studio, I'm looking for a nice menu and found the Navigation Drawer, I searched how can I create my own Navigation but I want it to be on the right side of the screen.
How can I do it?
Same Question about checkbox, I have the Checkbox on the left side and the text on the right side/ I want it to be the opposite.
Hope you understand my problem.
XML:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello Drawer"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#menu/navigation_menu"
android:layout_gravity="right">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Java:
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mToggle;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,R.string.open,R.string.close);
mDrawerLayout.addDrawerListener(mToggle);
mToggle.syncState();
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
#Override
public boolean onOptionsItemSelected(MenuItem item)
{
if(mToggle.onOptionsItemSelected(item))
{
return true;
}
return super.onOptionsItemSelected(item);
}
}

About the right side navigation drawer...I remember struggling with this question. I checked many answers from anywhere. Mostly they say: use setLayoutDirection method which works fine but for api>=17. I do the following:
0. Support Libraries
dependencies {
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:support-v4:25.3.1'
compile 'com.android.support:design:25.3.1'
}
1. Layout
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:openDrawer="end">
<!--content of your Activity. Could be fragment container. Your toolbar is placed there-->
<include
layout="#layout/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|end">
<LinearLayout
android:id="#+id/navigationLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--navigation header. like user profile image &...-->
<include
layout="#layout/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!--recycler of your navigation items-->
<android.support.v7.widget.RecyclerView
android:id="#+id/navigationRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
main_content.xml
<?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">
<RelativeLayout
android:id="#+id/toolbarRL"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/toolbarHamburger"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#null"
android:src="#drawable/hamburger" />
</RelativeLayout>
... other stuff ...
</RelativeLayout>
2. Activity
//Hamburger icon of your toolbar
ImageButton hamburger= (ImageButton) findViewById(R.id.toolbarHamburger);
hamburger.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v){
if (drawerLayout.isDrawerOpen(Gravity.RIGHT))
drawerLayout.closeDrawer(Gravity.RIGHT);
else
drawerLayout.openDrawer(Gravity.RIGHT);
}
});
Also you should close drawer using drawerLayout.closeDrawer(Gravity.RIGHT) when a recycler's item is clicked.
About CheckBox I don't know if there's any solution to switch positions of text and CB. But I wouldn't bother looking for it. I'd rather using a linearLayout containing CB & TV :)
Or maybe if I see it repetitive I create a custom view.
CB: CheckBox, TV: TextView

onNavigationItemSelected not being called for Bottom Navigation Bar

I'm trying to implement a bottom nav bar that changes fragments when the nav items are clicked. However, when I click on the nav bar items, the fragments don't change. Using log.d, I noticed onNavigationItemSelected is not being called. How do I fix this?
To note, the startFeedFragment, startScheduleFragment, & startSettingsFragmentare implemented the same way and they work for the buttons in the toolbar. I also referenced this tutorial and this question for help.
MainActivity.java
public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setUpRecycler();
startFeedFragment();
BottomNavigationView bottomNavBar = (BottomNavigationView) findViewById(R.id.navigation);
bottomNavBar.bringToFront();
bottomNavBar.setOnNavigationItemSelectedListener(this);
}
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
Log.d("NAV BAR", "onNavigationItemSelected hit");
switch (item.getItemId()) {
case R.id.feedMenu:
startFeedFragment();
Log.d("NAV BAR", "feed");
break;
case R.id.myScheduleMenu:
startScheduleFragment();
Log.d("NAV BAR", "schedule");
break;
case R.id.settingsMenu:
startSettingsFragment();
Log.d("NAV BAR", "settings lol");
break;
default:
Log.d("NAV BAR", "false");
return false;
}
return true;
}
/**
* Switches out the fragment for {#link FeedFragment} and sets an appropriate title. startScheduleFragmens & startSettingsFragment are implemented the same way
*/
private void startFeedFragment()
{
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.fragmentContainer, new FeedFragment());
transaction.commit();
getSupportActionBar().setTitle(R.string.title_fragment_feed);
}
}
Snippet from xml file
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/fragmentContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#android:color/white"
app:itemIconTint="#color/colorPrimaryDark"
app:itemTextColor="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav"
android:elevation="8dp"/>
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>

Solved! It was because I had set the buttons in the menu to android:enabled="false". That meant they couldn't be pressed, which is why onNavigationItemSelected wasn't being called. I set all buttons to android:enabled="true" to fix this.
Correct code for bottom_nav.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/bottom_nav_my_schedule"
android:title="#string/menu_my_schedule"
android:icon="#drawable/ic_event_available_white_24dp"
android:enabled="true"/> <!--make sure enabled is set to true!-->
<item android:id="#+id/bottom_nav_feed"
android:title="#string/menu_feed"
android:icon="#drawable/ic_view_list_white_24dp"
android:enabled="true" /> <!--make sure enabled is set to true!-->
<item android:id="#+id/bottom_nav_settings"
android:title="#string/menu_settings"
android:icon="#drawable/ic_settings_white_24dp"
android:enabled="true"/> <!--make sure enabled is set to true!-->
</menu>

As for me the problem was when my activity main layout was LinearLayout, so I've solved it by changing it to RelativeLayout, I have absolutely no thoughts why it's working, because RelativeLayout layouts reply only for elements location, not its view or something else, but it's working.
<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"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#drawable/selector"
android:background="#color/white"
app:menu="#menu/menu_bottom"
app:itemIconTint="#drawable/menu_trainings"
app:labelVisibilityMode="unlabeled"
/>
</RelativeLayout>

Android custom dialog button styles not applied

I wish to create a simple dialog for the user with 2 buttons as follows:
Dialog Layout (dialog_layout.xml):
<?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:layout_margin="8dp"
android:orientation="vertical">
<Button
android:id="#+id/btn_select_choice_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="First Choice"
android:theme="#style/secondary_button_normal" />
<Button
android:id="#+id/btn_select_choice_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Second Choice"
android:theme="#style/secondary_button_normal" />
</LinearLayout>
secondary_button_normal:
<style name="secondary_button_normal" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/button_secondary_normal_background</item>
<item name="android:textColor">#color/button_secondary_normal_text</item>
<item name="android:textSize">#dimen/button_textSize</item>
<item name="android:padding">#dimen/button_padding</item>
</style>
Activity's onCreate:
final Dialog selection = new Dialog(this);
selection.setContentView(R.layout.dialog_layout);
Button selectFirstChoice = (Button)selection.findViewById(R.id.btn_select_choice_1);
Button selectSecondChoice = (Button)selection.findViewById(R.id.btn_select_choice_2);
selectFirstChoice.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do something
selection.dismiss();
}
});
selectSecondChoice.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do something
selection.dismiss();
}
});
selection.setTitle("Some Title");
selection.setCancelable(false);
selection.show();
The preview is alright:
Preview
It works well on Nougat, but when I run it on Lollipop (5.0 and 5.1.1), the buttons are without styling, although the same button styling worked on activity buttons on Lollipop:
App
I wonder what could be going wrong, I also tried moving the Dialog into a DialogFragment but I faced the same behavior.

Found the following solution:
In my Styles.xml, I added:
<style name="dialog_button" parent="Theme.AppCompat.Light.Dialog">
<item name="colorButtonNormal">#color/button_secondary_normal_background</item>
<item name="android:textColor">#color/button_secondary_normal_text</item>
<item name="android:textSize">#dimen/button_textSize</item>
<item name="android:padding">#dimen/button_padding</item>
</style>
And in my custom dialog layout, I used that style as a theme for my buttons:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="match_parent">
<Button
android:id="#+id/btn_select_student"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/student"
android:theme="#style/dialog_button" />
<Button
android:id="#+id/btn_select_tutor"
android:layout_width="match_parent"
android:text="#string/tutor"
android:layout_height="wrap_content"
android:theme="#style/dialog_button" />
</LinearLayout>