Develop Reference

How to show tab indicator on top of tab in android?

I have an app in which I have added TabLayout with three tabs. I want to show tab indicator from bottom to top but the problem is that when I show indicator from bottom to top tab icon also rotate.How do I resolve this issue?
mTabLayout.getTabAt(0).setCustomView(view);
mTabLayout.getTabAt(1).setIcon(tabIcons[1]);
mTabLayout.getTabAt(2).setIcon(tabIcons[2]);
mTabLayout.setRotationX(180);

I have similar requirement in my previous application
Please try below code it works perfectly for me
//First rotate the tab layout
tabOrderType.setRotationX(180);
//Find all childs for tablayout
for (int i = 0; i <tabOrderType.getChildCount() ; i++) {
LinearLayout linearList = ((LinearLayout)tabOrderType.getChildAt(i));
for(int position = 0;position<linearList.getChildCount();position++) {
//One by one again rotate layout for text and icons
LinearLayout item=((LinearLayout) linearList.getChildAt(position));
item.setBackground(getResources().getDrawable(R.drawable.custom_button_border));
item.setRotationX(180);
}
}
This is working nicely in my application and not creating any issue till now.Another way is you need to make custom tab to manage this.
Hope this helps you...if any issue please ask me...

Add this in your TabLayout XML
app:tabIndicatorGravity="top"

Is there a way to display notification badge on Google's official BottomNavigationView menu items introduced in API 25?

I have been trying BottomNavigationView released in API 25. I want to display a notification badge (say a small blue circle with or without a count in it) on one of the menu items in bottom navigation bar.
I have a selector drawable where I have added checked true and checked false states with greyed out drawable which has a BLUE dot on it. When user navigates to other navigation item the whole menu button turns grey and the badge as well. I know this is because itemIconTint is applied to the drawable which is the reason having a different colour badge as part of the icon won't work. Is there any alternate way to achieve this?
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
app:itemIconTint="#color/selector_bottom_nav"
app:itemTextColor="#color/selector_bottom_nav"
android:layout_gravity="bottom"
app:menu="#menu/menu_bottom_nav">
</android.support.design.widget.BottomNavigationView>
That is how I am using it. Removing itemIconTint and changing icon drawable programmatically does not help.
On Android Developers I have found nothing and it being pretty new nothing is available on the web as well.
There are custom libraries for bottom navigation bar but I am looking for its support in the official one.
Any ideas, anyone?

Answering my own question:
I ended up putting 2 ImageViews with badge drawable and visiblity GONE in my layout. I calculate positioning of the badges like this:
private void calculateBadgesPosition() {
int totalNavItems = 3;
for(int i = 0 ; i < bottomNavigation.getChildCount() ; i++) {
View view = bottomNavigation.getChildAt(i);
// Since Y remains same for all badges at least in my case.
// 1.3 is a factor that fits my placement of badge.
double y = getResources().getDisplayMetrics().heightPixels - (view.getMeasuredHeight() * 1.3);
if(image2ndItemBadge != null) {
float x = getResources().getDisplayMetrics().widthPixels/2 + imageClassroomBadge.getMeasuredWidth()/2;
image2ndItemBadge.setX(x);
image2ndItemBadge.setY((float)y);
image2ndItemBadge.requestLayout();
}
// Since BottomNavigationView items are equally distributed you can find
// the right position for 3rd item (in my case last item) by dividing
// BottomNavigationView width by 3 and then by 2 to get the middle of that
// item, which was needed in my case.
if(image3rdItemBadge != null) {
float x = getResources().getDisplayMetrics().widthPixels - ((view.getMeasuredWidth()/totalNavItems)/2);
image3rdItemBadge.setX(x);
image3rdItemBadge.setY((float)y);
image3rdItemBadge.requestLayout();
}
// BottomNavigationView count should always be 1
// but I observed the count was 2 in API 19. So I break after first iteration.
break;
}
}
You can remove the for loop and just check if child count greater than 0 and get that child. I call the above method at the end of onCreate like this:
ViewTreeObserver viewTreeObserver = getWindow().getDecorView().getViewTreeObserver();
viewTreeObservier.addOnGlobalLayoutListener (new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
calculateBadgesPosition();
getWindow().getDecorView().getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
});
Badge ImageView not being part of the BottomNavigationView Items drawable will not be effected by tint that BottomNavigationView applies on selection/un selection of item. Also if you see your badge not appearing try giving it a higher elevation 8 or 16 or whatever. In my case my badge stayed behind BottomNavigationView probably because it has higher elevation or Z index.
I tested this with 3 different screen sizes and the positioning was same on all.
I hope this helps anyone facing similar issue with official BottomNavigationView.
Also if you have a better approach please share it.

One way of achieving this is using two icons for each item - one with the badge and the other without and replace them programmatically. Alternatively, instead of two icons, you can use a single icon and draw the badge programmatically. So the code can look something like this (assuming you know the index of each item and can get the Drawable for each):
public static void updateItem(BottomNavigationView bottomNavigationView, int index, Drawable icon) {
Menu menu = bottomNavigationView.getMenu();
MenuItem item = menu.getItem(index);
if (item != null) {
item.setIcon(icon);
}
}

Create a layout with a Textview.
Inflate the view by adding the BottomNavigationMenuView as child for BottomNavigationView. Add the count to required menu.
See the below link.
https://stackoverflow.com/a/48269868/4675067

Changing background colour for the Selected Tab

This is my Screen layout, and i want to do this, when I clicked on Popular tab, then Popular block should turns Blue.
Same for the Price, Time and Duration tab.
I've tried to do with Linear Layout but it doesn't.
i have taken it in Text View, and the vertical and Horizontal Lines are used using View tag and I have not use TabLayout, just to make it simple I just used TextView With Background.
Please suggest me a proper solution with code if you can.
Any help would be Appreciated.

In your xml file add following line in your TabLayout,
app:tabBackground="#0000FA"
by this you can chage color of selected tab.
If you have used TextView then just simply create or add this method to you java file & call it from each textviews onclick event by passing the textview to it.
public void changeTabColor(TextView tvSelected){
tv1.setBackgroundColor(Color.White);
tv2.setBackgroundColor(Color.White);
tv3.setBackgroundColor(Color.White);
tvSelected.setBackgroundColor(Color.Blue);
}

try this :
public void onClick(View v) {
switch (v.getId()) {
case R.id.popular_tab:
ResetTabColor();
popular_tab.setBackgroundColor(Color.blue);
case //Do the rest with other tab
}
}
private void ResetTabColor(){
popular_tab.setBackgroundColor(Color.TRANSPARENT); // or white color
time_tab.setBackgroundColor(Color.TRANSPARENT);
duration_tab.setBackgroundColor(Color.TRANSPARENT);
price_tab.setBackgroundColor(Color.TRANSPARENT);

Android - Google Maps api v2 - Disable Zoom control

How do I disable the Zoom In button on the Google Map?
I tried looking for commands like:
map.getUiSettings().setZoomControlsEnabled(true)...SOMETHING but nothing exists.
I want to leave creating my own buttons for zooming as a last resort.
UPDATE: I should clarify, I only want to disable the Zoom In button, not the whole Zoom Control.

the setting you used is right, but to disable it, it should be false.
map.getUiSettings().setZoomControlsEnabled(false);
hope I got your question right..
Edit
Unfortunately, you can't hide one zoom buttons, what you can do is hide both buttons and create your own custom zoom control and place them on the your map.

#Coderji said it's impossible. I say it's possible :-)
You can hide one of zoom button (+ or -) and perform on them all operations like in normal view (margins, size, padding, etc.)
SupportMapFragment mapView = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map));
View zoomControls = mapView.getView().findViewById(0x1);
for(int i=0;i<((ViewGroup)zoomControls).getChildCount();i++){
View child=((ViewGroup)zoomControls).getChildAt(i);
if (i==0) {
// there is your "+" button, zoom in
}
if (i==1) {
// there is your "-" button, I hide it in this example
child.setVisibility(View.GONE);
}
}

Call this on your GoogleMap to get UiSettings
https://developers.google.com/maps/documentation/android/reference/com/google/android/gms/maps/GoogleMap#getUiSettings()
ThensetZoomControlsEnabled(false) on the UiSettings
https://developers.google.com/maps/documentation/android/reference/com/google/android/gms/maps/UiSettings#setZoomControlsEnabled(boolean)

In jetpack compose you can easily set zoomControlsEnabled = false
GoogleMap(uiSettings =
MapUiSettings(
zoomControlsEnabled = false
)
) {}

In Kotlin you can use this code to enable
mMap.uiSettings.setZoomControlsEnabled(true)

Android - Google Maps add overlays

I am facing a problem of adding overlays. I want to add button which will toggle between normal and satelitte view, and some textView, which will display my actual coordinates and those will be updated on my location change. I tried to put there classic TextView, added into my map.java import for using GPS, and onLocationChanged I am trying to update TextView's, but no success. It must be done via Overlays, but I can't see, how to set on the screen my desired items - button with specific function and regularly updated textView. Any ideas?
THanks
edit:
int g=0;
mapView = (MapView) findViewById(R.id.mapview);
mapView.setBuiltInZoomControls(true);
mapView.setEnabled(true);
mapView.setClickable(true);
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.toggle:
if (g!=1){
mapView.invalidate();
mapView.setSatellite(true);
mapView.invalidate();
g=1;
}else{
mapView.invalidate();
mapView.setSatellite(false);
mapView.invalidate();
}
break;
}
}

You don't need a overlay for this. Just define you layout using a layout xml file with an RelativeLayout as root element.
With a relative layout you can place elements like TextViews or a Buttons on top of each other. So in your case you would first define the MapView in your layout file and then the elements you want to display on the MapView. Now all elements should be rendered in the upper left corner on top of each other. Using the attributes defined by the RelativeLayout you can now align your elements in the way you want. Have a look at the RealtiveLayout tutorial for a better understanding.

Here a some nice resources:
http://developer.android.com/resources/tutorials/views/hello-mapview.html
http://mobiforge.com/developing/story/using-google-maps-android
Efficient Map Overlays in Android Google Map
Hope you get an answer :-)