Badge notification with Tablayout

Badge notification with Tablayout - android

This is my tab layout:
Would anyone help me to add badge notification on each Tablyout icon?
I have searched here found depreciated solutions.
This is my activity class:
public class navigation extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
private TabLayout tabLayout;
private InterstitialAd mInterstitialAd;
private Button mNextLevelButton;
private TextView mTextView;
private ViewPager viewPager;
private int[] tabIcons = {
R.drawable.ic_favorite_final,
R.drawable.ic_live_final,
R.drawable.ic_matches_final,
R.drawable.ic_sort
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation);
MobileAds.initialize(getApplicationContext(), "ca-app-pub-
7294884496094914~4747804788");
AdView mAdView = (AdView) findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
if ((getIntent().getFlags() & Intent.FLAG_ACTIVITY_BROUGHT_TO_FRONT ) !=
0) {
// Activity was brought to front and not created,
// Thus finishing this will get us to the last viewed activity
finish();
return;
}
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.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
}
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
// tabLayout.getTabAt(3).setIcon(tabIcons[3]);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new OneFragment());
// adapter.addFrag(new TwoFragment(), getString(R.string.livestream));
adapter.addFrag(new ThreeFragment());
adapter.addFrag(new FourFragment());
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(Fragment fragment) {
mFragmentList.add(fragment);
// mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
// return mFragmentTitleList.get(position);
return null;
}
}
}
Then i want to add the total count notification on the title icon image if it s possible
UPDATED:
<?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"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.tiger.alahedclub.activity.navigation">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/generalnotitle"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:titleTextColor="#android:color/black"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/yellow"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/generalnotitle">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerHorizontal="true"
android:text="#string/app_name"
android:textColor="#android:color/black"
android:textSize="24sp" />
<ImageView
android:background="#drawable/ahed_small"
android:id="#+id/imagetitle"
android:layout_width="40dp"
android:layout_height="25dp"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_toStartOf="#+id/action_bar_title"
android:layout_toLeftOf="#+id/action_bar_title"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:background="#color/yellow"
app:tabTextColor="#android:color/black"
app:tabSelectedTextColor="#android:color/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="SMART_BANNER"
android:layout_gravity="bottom"
ads:adUnitId="#string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cardview_back"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
UPDATE 2:

private Drawable buildCounterDrawable(int count, int backgroundImageId) {
LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.noitification_count, null);
view.setBackgroundResource(backgroundImageId);
if (count == 0) {
View counterTextPanel = view.findViewById(R.id.badge_layout1);
counterTextPanel.setVisibility(View.GONE);
} else {
TextView textView = (TextView) view.findViewById(R.id.badge_notification_1);
textView.setText("" + count);
}
view.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.setDrawingCacheEnabled(true);
view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
view.setDrawingCacheEnabled(false);
return new BitmapDrawable(getResources(), bitmap);
}
and setIcon as this view.
tabLayout.getTabAt(0).setIcon(buildCounterDrawable(1,R.drawable.ic_count_bg));
Try this was worked for me..

tabLayout.getTabAt(0).setIcon(buildCounterDrawable(COUNT));
buildCounterDrawable method,
private Drawable buildCounterDrawable(int count) {
LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.cart_overflow, null);
view.setBackgroundResource(R.drawable.ic_tool_cart);
TextView textView = (TextView) view.findViewById(R.id.count);
if (count == 0) {
textView.setVisibility(View.GONE);
} else {
textView.setVisibility(View.VISIBLE);
textView.setText(String.valueOf(count));
}
view.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.setDrawingCacheEnabled(true);
view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
view.setDrawingCacheEnabled(false);
return new BitmapDrawable(getResources(), bitmap);
}
cart_overflow.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/counterPanel"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/ic_tool_cart"> <!-- Notication Icon -->
<TextView
android:layout_gravity="top|end"
android:gravity="center"
android:background="#drawable/ic_cart_count"
android:id="#+id/count"
android:layout_width="18dp"
android:layout_height="18dp"
android:textSize="12sp"
android:textColor="#FFFFFF"/>
</FrameLayout>
drawable - ic_cart_count (counter background)
<vector
android:height="18dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0"
android:width="18dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FFEF0777"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>
I made this for a single image. You change as per your needs by adding layout and image as parameters.

Try this. code for onCreateOptionMenu.
#Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.menu_main, menu);
MenuItem menuItem = menu.findItem(R.id.action_settings);
menuItem.setIcon(buildCounterDrawable(4, android.R.color.transparent));
return true;
}
private Drawable buildCounterDrawable(int count, int backgroundImageId) {
LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.noitification_count, null);
view.setBackgroundResource(backgroundImageId);
if (count == 0) {
View counterTextPanel = view.findViewById(R.id.badge_layout1);
counterTextPanel.setVisibility(View.GONE);
} else {
TextView textView = (TextView) view.findViewById(R.id.badge_notification_1);
textView.setText("" + count);
}
view.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.setDrawingCacheEnabled(true);
view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
view.setDrawingCacheEnabled(false);
return new BitmapDrawable(getResources(), bitmap);
}
notification_count.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#android:style/Widget.ActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/badge_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relative_layout_item_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_100sdp"
android:background="#drawable/ic_dollar" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notification_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout_item_count"
android:background="#drawable/circle_bg"
android:gravity="center"
android:text="12"
android:textColor="#FFF"
android:padding="#dimen/_10sdp"
android:textSize="#dimen/_30sdp"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
put your shape file
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#color/green"/>
</shape>

Related

Android click on view above the view

I have tab Layout with dynamically added custom tabs (Image View + Text View)
I want to change image on select tab and on reselect (2 kind of images)
But there is no click event listeners on Tab, so I added transparent layout to catch clicks.
How do I need to change settings, to make 4 Linear Layouts clickable?
The code:
<RelativeLayout
android:id="#+id/layout_sort_bar_fc"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true">
<android.support.design.widget.TabLayout
android:id="#+id/sort_bar_fc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabBackground="#color/colorPrimary"
app:tabIndicatorColor="#f00"
app:tabSelectedTextColor="#color/white_text"
app:tabTextColor="#color/colorPrimaryDark"/>
<LinearLayout
android:id="#+id/tab_listenter"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/dummy_tab_name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:clickable="true"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/dummy_tab_rate"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/dummy_tab_change"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/dummy_tab_24h"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:orientation="horizontal"></LinearLayout>
</LinearLayout>
</RelativeLayout>

the following answer deals with somewhat the same question and the answer marked as solution is what you're looking for, it explains how to define and use selectors

Well, you can change image on a selected tab by two method which you need to create in Custom Pager Adapter and call it from tab selected listener.
"MainActivity"
public class MainActivity extends AppCompatActivity {
TabLayout tabLayout;
ViewPager viewPager;
ViewPagerAdapter adapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
createViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
createTabIcons();
adapter.SetOnSelectView(tabLayout,0);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
int c = tab.getPosition();
adapter.SetOnSelectView(tabLayout,c);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
int c = tab.getPosition();
adapter.SetUnSelectView(tabLayout,c);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
for (int i = 0; i < tabLayout.getTabCount() - 1; i++) {
View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
p.setMargins(0, 0, 10, 0);
tab.requestLayout();
}
}
private void createTabIcons() {
try {
View tabOne = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView textView = tabOne.findViewById(R.id.tab);
ImageView imgViewTabIcon = tabOne.findViewById(R.id.imgViewTabIcon);
imgViewTabIcon.setImageResource(R.drawable.img_11);
textView.setText("A");
tabLayout.getTabAt(0).setCustomView(tabOne);
View tabTwo = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView textView1 = tabTwo.findViewById(R.id.imgViewTabIcon);
textView1.setText("B");
ImageView imgViewTabIcon1 = tabTwo.findViewById(R.id.imgViewTabIcon);
imgViewTabIcon1.setImageResource(R.drawable.img_22);
tabLayout.getTabAt(1).setCustomView(tabTwo);
View tabThree = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView textView2 = tabThree.findViewById(R.id.tab);
textView2.setText("C");
ImageView imgViewTabIcon2 = tabThree.findViewById(R.id.imgViewTabIcon);
imgViewTabIcon2.setImageResource(R.drawable.img_33);
tabLayout.getTabAt(2).setCustomView(tabThree);
View tabFour = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView textView3 = tabFour.findViewById(R.id.tab);
textView3.setText("D");
ImageView imgViewTabIcon3 = tabFour.findViewById(R.id.imgViewTabIcon);
imgViewTabIcon3.setImageResource(R.drawable.img_33);
tabLayout.getTabAt(3).setCustomView(tabFour);
} catch (Exception e) {
e.printStackTrace();
}
}
private void createViewPager(ViewPager viewPager) {
adapter = new ViewPagerAdapter(getSupportFragmentManager(),HomeActivity.this);
adapter.addFrag(new A(), "A");
adapter.addFrag(new B(), "B");
adapter.addFrag(new C(), "C");
adapter.addFrag(new D(), "D");
viewPager.setAdapter(adapter);
}
}
"Custom PagerAdapter"
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
private Context mContext;
public ViewPagerAdapter(FragmentManager manager, Context context) {
super(manager);
mContext=context;
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
public int dpToPx(int dp) {
DisplayMetrics displayMetrics = mContext.getResources().getDisplayMetrics();
return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
}
public void SetOnSelectView(TabLayout tabLayout, int position)
{
TabLayout.Tab tab = tabLayout.getTabAt(position);
View selected = tab.getCustomView();
TextView textView = (TextView) selected.findViewById(R.id.tab);
textView.setTextColor(mContext.getResources().getColor(R.color.colorPrimary));
ImageView imgViewTabIcon = selected.findViewById(R.id.imgViewTabIcon);
int height = dpToPx(35);
if(textView.getText().toString().equals("tab1")){
BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_1);
Bitmap b = bitmapdraw.getBitmap();
Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
imgViewTabIcon.setImageBitmap(smallMarker);
}else if(textView.getText().toString().equals("tab2")){
BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_2);
Bitmap b = bitmapdraw.getBitmap();
Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
imgViewTabIcon.setImageBitmap(smallMarker);
}else if(textView.getText().toString().equals("tab3")){
BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_3);
Bitmap b = bitmapdraw.getBitmap();
Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
imgViewTabIcon.setImageBitmap(smallMarker);
}
else {
BitmapDrawable bitmapdraw = (BitmapDrawable) mContext.getResources().getDrawable(R.drawable.img_4);
Bitmap b = bitmapdraw.getBitmap();
Bitmap smallMarker = Bitmap.createScaledBitmap(b, height, height, false);
imgViewTabIcon.setImageBitmap(smallMarker);
}
}
public void SetUnSelectView(TabLayout tabLayout,int position) {
TabLayout.Tab tab = tabLayout.getTabAt(position);
View selected = tab.getCustomView();
TextView textView = (TextView) selected.findViewById(R.id.tab);
textView.setTextColor(mContext.getResources().getColor(R.color.white));
ImageView imgViewTabIcon = selected.findViewById(R.id.imgViewTabIcon);
if(textView.getText().toString().equals("tab1")){
imgViewTabIcon.setImageResource(R.drawable.img_11);
}else if(textView.getText().toString().equals("tab2")){
imgViewTabIcon.setImageResource(R.drawable.img_22);
}else if(textView.getText().toString().equals("tab3")){
imgViewTabIcon.setImageResource(R.drawable.img_33);
}else{
imgViewTabIcon.setImageResource(R.drawable.img_44);
}
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
#Override
public int getItemPosition(Object object){
return ViewPagerAdapter.POSITION_NONE;
}
}
"Custom Layout for Tab"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/tab_color_selector"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<ImageView
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:id="#+id/imgViewTabIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img_11" />
<TextView
android:id="#+id/tab"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:textColor="#FFFFFF"
android:layout_gravity="center"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
"MainActivity XML File"
<?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:background="#drawable/bg"
android:orientation="vertical"
tools:context=".activity.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
app:tabBackground="#drawable/tab_color_selector"
app:tabGravity="fill"
app:tabIndicatorColor="#color/gps_btn"
app:tabMode="fixed"
app:tabSelectedTextColor="#ffffff"
app:tabTextColor="#ffffff" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>

Unable to arrange android tabs in a proper sequence

Hello all I simply want to achieve this.But I am not being able to achieve this
I did this to achieve this
<?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"
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/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#42474b"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarlogo"
android:src="#mipmap/toolbarlogo"
android:layout_width="wrap_content"
android:layout_marginRight="200dp"
android:layout_height="46dp"
/>
</android.support.v7.widget.Toolbar>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#494e51"
android:gravity="center_vertical"
android:paddingLeft="40dp"
android:textSize="10dp"
android:textColor="#fff"
android:text="The Ongoing survey closes on Dec 31,2016 at 2:00pm GMT"
/>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#fff"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabTextAppearance="#style/MineCustomTabText"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:background="#drawable/innerpg_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
and this is my class file
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
R.drawable.ongoing,
R.drawable.upcoming,
R.drawable.results
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
for(int i=0; i < tabLayout.getTabCount(); i++) {
View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
p.setMargins(10, 10, 50, 30);
tab.requestLayout();
}
}
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new Ongoing(), "Ongoing");
adapter.addFrag(new Upcomming(), "Upcomming");
adapter.addFrag(new Result(), "Result");
viewPager.setAdapter(adapter);
}
public int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.settings:
return true;
}
return super.onOptionsItemSelected(item);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
Using above code I am getting tab text below the icon(i mean in two different line).THe next issue is I have set the margin but I dont know how to set the color of margin.The final issue is I want to change the background color of active tab to yellow as shown in image.Please help me fix this issue

try this
private void setupTabIcons() {
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.custom_view, null, false);
((TextView) view1.findViewById(R.id.text)).setText("Tab1");
((ImageView) view1.findViewById(R.id.image)).setImageResource(tabIcon[0]);
View view2 = inflater.inflate(R.layout.custom_view, null, false);
((TextView) view2.findViewById(R.id.text)).setText("Tab2");
((ImageView) view2.findViewById(R.id.image)).setImageResource(tabIcon[0]);
View view3 = inflater.inflate(R.layout.custom_view, null, false);
((TextView) view3.findViewById(R.id.text)).setText("Tab3");
((ImageView) view3.findViewById(R.id.image)).setImageResource(tabIcon[0]);
tabLayout.getTabAt(0).setCustomView(view1);
tabLayout.getTabAt(1).setCustomView(view2);
tabLayout.getTabAt(2).setCustomView(view3);
your custom view will look like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

You can Use android:drawableLeft to display drawable on left of
textview properly.
For Different backgroundColor for Different state You can use
android:background for different color state like this

viewpager scrollview not working android

I'm integrating ViewPager and ScrollView on android but it doesn't seem to work. The ViewPager scroll works just fine but the ScrollView does not work at all on all the solutions I've tried. Below is my MainActivity class and xml layout.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.navigation_drawer);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
hostDescription = (TextView) findViewById(R.id.host_description);
hostDescription.setTypeface(quickSandRegular);
hostDescription.setTextColor(Color.BLACK);
scrollView = (ScrollView) findViewById(R.id.scroll);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
View header=navigationView.getHeaderView(0);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageAdapter adapter = new ImageAdapter();
viewPager.setAdapter(adapter);
// set navigation font
Menu m = navigationView.getMenu();
for (int i=0;i<m.size();i++) {
MenuItem mi = m.getItem(i);
// apply font to subment
SubMenu subMenu = mi.getSubMenu();
if (subMenu!=null && subMenu.size() >0 ) {
for (int j=0; j <subMenu.size();j++) {
MenuItem subMenuItem = subMenu.getItem(j);
applyFontToMenuItem(subMenuItem);
}
}
applyFontToMenuItem(mi);
}
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
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.setDrawerListener(toggle);
toggle.syncState();
}
xml
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- here insert your scrollview and all views you need for this page this is actually your page -->
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
android:fillViewport="true"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayoutMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blue"
android:orientation="vertical" >
<TextView
android:id="#+id/welcome_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:layout_marginBottom="30dp"
android:textColor="#android:color/holo_green_light"
android:layout_marginLeft="17dp"
android:background="#color/blue"
android:textSize="26dp"/>
<TextView
android:id="#+id/intro_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="120dp"
android:layout_marginBottom="10dp"
android:text="Save on your next adventure."
android:textColor="#android:color/holo_green_light"
android:layout_marginLeft="17dp"
android:background="#color/blue"
android:textSize="28dp"/>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#cccccc" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical" >
<TextView
android:id="#+id/host_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Become a Host"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:textSize="21dp"/>
<!--<ImageView
android:id="#+id/image1"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingBottom="10dp"
android:scaleType="fitXY"
android:src="#drawable/sv" />-->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
/>
<TextView
android:id="#+id/host_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Earn money sharing your extra space"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:textSize="17dp"/>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#cccccc" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical" >
<TextView
android:id="#+id/host_telxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Become a Host"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:textSize="21dp"/>
<!--<ImageView
android:id="#+id/image1"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingBottom="10dp"
android:scaleType="fitXY"
android:src="#drawable/sv" />-->
<TextView
android:id="#+id/host_escription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Earn money sharing your extra space"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:textSize="17dp"/>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#cccccc" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<include
layout="#layout/app_bar_main"
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_main"
app:menu="#menu/activity_main_drawer" />
ImageAdapter
class ImageAdapter extends PagerAdapter {
#Override
public int getCount() {
return IMAGES.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(getApplicationContext());
imageView.setImageResource(IMAGES[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}

You need to implement ViewPager.OnPageChangeListener and write your logic in onPageScrollStateChanged
#Override
public void onPageScrollStateChanged(int state) {
ScrollView.requestDisallowInterceptTouchEvent(!(!lastPage && state == ViewPager.SCROLL_STATE_IDLE));
}
You need to write logic to find if you are on last page or not which is simple.

Solved the problem by customizing layout_height of the ViewPager. Below is the code:
<android.support.v4.view.ViewPager
android:id="#+id/view_pager2"
android:layout_width="match_parent"
android:layout_height="300dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"/>
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageAdapter adapter = new ImageAdapter();
viewPager.setAdapter(adapter);
viewPager.setClipToPadding(false);
viewPager.setPadding(70, 0, 70, 0);
class ImageAdapter extends PagerAdapter {
#Override
public int getCount() {
return IMAGES.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(getApplicationContext());
imageView.setImageResource(IMAGES[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
#Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
setPrimaryItem((View) container, position, object);
// lastPage = IMAGES[position]==object;
}
}

Viewpager With tabLayout and PagerTabStrip

I Experimented a bit in viewPager.
One viewpager with different FragmentAdapter.
For now the code works perfectly but I don't know if its the right way to do that.
For my Activity is this.
public class Navigation extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener, TabHost.OnTabChangeListener, ViewPager.OnPageChangeListener, View.OnClickListener {
private DrawerLayout drawer;
private ViewPager pager;
public static TabHost tabHost;
public static TabWidget tabWidget;
public static FloatingActionMenu fab;
private boolean doubleBackToExitPressedOnce = false;
private String currentTab;
private Button mButton;
private LinearLayout mLinearLayout;
private PagerSlidingTabStrip mTabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().getAttributes().windowAnimations = 0;
setContentView(R.layout.activity_navigation);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
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.setDrawerListener(toggle);
toggle.syncState();
fab = (FloatingActionMenu) findViewById(R.id.fabMenu);
fab.setVisibility(View.GONE);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();
tabHost.setOnTabChangedListener(this);
tabWidget = (TabWidget) findViewById(android.R.id.tabs);
setNewTab(tabHost, "tab1", R.string.textTabTitle1, R.drawable.icon_search, R.id.tab1);
setNewTab(tabHost, "tab2", R.string.textTabTitle1, R.drawable.icon_comment, R.id.tab2);
setNewTab(tabHost, "tab3", R.string.textTabTitle1, R.drawable.icon_car, R.id.tab3);
mTabLayout = (PagerSlidingTabStrip) findViewById(R.id.tab);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new FragmentAdapterSearch(getSupportFragmentManager()));
mTabLayout.setViewPager(pager);
pager.addOnPageChangeListener(this);
mButton = (Button) findViewById(R.id.btnSearch);
mLinearLayout = (LinearLayout) findViewById(R.id.btnSelectLocation);
mButton.setOnClickListener(this);
mLinearLayout.setOnClickListener(this);
TabIcon.setColor(0, mTabLayout, iconSearchOpac, iconSearch);
}
private void setNewTab(TabHost tabHost, String tag, int title, int icon, int contentID) {
TabHost.TabSpec tabSpec = tabHost.newTabSpec(tag);
tabSpec.setIndicator(getTabIndicator(tabHost.getContext(), title, icon));
tabSpec.setContent(contentID);
tabHost.addTab(tabSpec);
}
private View getTabIndicator(Context context, int title, int icon) {
View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
final ImageView iv = (ImageView) view.findViewById(R.id.imageView);
iv.setImageResource(icon);
TextView tv = (TextView) view.findViewById(R.id.textView);
tv.setText(title);
return view;
}
#Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else if (!drawer.isDrawerOpen(GravityCompat.START)) {
if (doubleBackToExitPressedOnce) {
super.onBackPressed();
return;
}
this.doubleBackToExitPressedOnce = true;
Toast.makeText(this, "Tap Again to Exit Toweelo", Toast.LENGTH_SHORT).show();
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
doubleBackToExitPressedOnce = false;
}
}, 2000);
} else {
super.onBackPressed();
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.navigation, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
if (drawer.isDrawerOpen(Gravity.LEFT)) {
drawer.closeDrawer(Gravity.LEFT);
} else {
drawer.openDrawer(Gravity.LEFT);
}
return true;
}
return super.onOptionsItemSelected(item);
}
#SuppressWarnings("StatementWithEmptyBody")
#Override
public boolean onNavigationItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.nav_camera) {
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
#Override
public void onTabChanged(String tabId) {
currentTab = tabId;
if (currentTab.equalsIgnoreCase("tab1")) {
if (pager != null) {
pager.setAdapter(new FragmentAdapterSearch(getSupportFragmentManager()));
mButton.setVisibility(View.VISIBLE);
TabIcon.setColor(0, mTabLayout, iconSearchOpac, iconSearch);
}
}
if (currentTab.equalsIgnoreCase("tab2")) {
if (pager != null) {
pager.setAdapter(new FragmentAdapterComments(getSupportFragmentManager()));
mButton.setVisibility(View.INVISIBLE);
TabIcon.setColor(0, mTabLayout, iconCommentOpac, iconComment);
}
}
if (currentTab.equalsIgnoreCase("tab3")) {
if (pager != null) {
pager.setAdapter(new FragmentAdapterCars(getSupportFragmentManager()));
mButton.setVisibility(View.VISIBLE);
TabIcon.setColor(0, mTabLayout, iconCarOpac, iconCar);
}
}
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
if (currentTab.equalsIgnoreCase("tab1")) {
TabIcon.setColor(position, mTabLayout, iconSearchOpac, iconSearch);
}
if (currentTab.equalsIgnoreCase("tab2")) {
TabIcon.setColor(position, mTabLayout, iconCommentOpac, iconComment);
}
if (currentTab.equalsIgnoreCase("tab3")) {
TabIcon.setColor(position, mTabLayout, iconCarOpac, iconCar);
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnSearch:
startActivity(new Intent(Navigation.this, SelectCategory.class));
break;
case R.id.btnSelectLocation:
startActivity(new Intent(Navigation.this, SelectLocation.class));
}
}
}
And for my XML is this.
<?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:fab="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:background="#color/colorWhite"
android:fitsSystemWindows="true"
tools:context="com.toweelo.Navigation">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:weightSum="10">
<LinearLayout android:id="#+id/btnSelectLocation"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5.5"
android:background="#drawable/ripple_effect"
android:clickable="true"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingLeft="8dp">
<com.toweelo.custom.CustomTextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Quezon City"
android:textColor="#color/colorWhite"
android:textSize="#dimen/title"/>
<ImageView
android:layout_width="24dp"
android:layout_height="match_parent"
android:src="#drawable/ic_down_arrow"/>
</LinearLayout>
<RelativeLayout android:layout_width="0dp"
android:layout_height="36dp"
android:layout_marginLeft="10dp"
android:layout_weight="4.5">
<Button android:id="#+id/btnSearch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/custom_search_button"
android:drawableRight="#drawable/ic_search"
android:text="Search"
android:textColor="#color/colorWhite"
android:textSize="14dp"/>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/colorPrimary"
app:pstsDividerColor="#color/colorPrimary"
app:pstsIndicatorColor="#color/colorWhite"
app:pstsIndicatorHeight="3dp"
app:pstsShouldExpand="true"
app:pstsTextAllCaps="false"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/fabMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
fab:menu_animationDelayPerItem="50"
fab:menu_backgroundColor="#B3FFFFFF"
fab:menu_buttonSpacing="0dp"
fab:menu_colorNormal="#DA4336"
fab:menu_colorPressed="#E75043"
fab:menu_colorRipple="#99FFFFFF"
fab:menu_fab_size="normal"
fab:menu_icon="#drawable/fab_add"
fab:menu_labels_colorNormal="#color/colorWhite"
fab:menu_labels_cornerRadius="3dp"
fab:menu_labels_ellipsize="none"
fab:menu_labels_margin="0dp"
fab:menu_labels_maxLines="-1"
fab:menu_labels_padding="8dp"
fab:menu_labels_paddingBottom="4dp"
fab:menu_labels_paddingLeft="8dp"
fab:menu_labels_paddingRight="8dp"
fab:menu_labels_paddingTop="4dp"
fab:menu_labels_position="left"
fab:menu_labels_showShadow="true"
fab:menu_labels_singleLine="false"
fab:menu_labels_textColor="#color/colorBlack"
fab:menu_labels_textSize="14sp"
fab:menu_openDirection="up"
fab:menu_shadowColor="#66000000"
fab:menu_shadowRadius="4dp"
fab:menu_shadowXOffset="1dp"
fab:menu_shadowYOffset="3dp"
fab:menu_showShadow="true"
>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/menuIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_premium"
fab:fab_colorNormal="#color/colorPremium"
fab:fab_colorPressed="#color/colorPremiumDark"
fab:fab_colorRipple="#color/colorPremiumAccent"
fab:fab_label="Premium"
fab:fab_size="mini"
/>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/menuOut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_saves"
fab:fab_colorNormal="#color/colorSaves"
fab:fab_colorPressed="#color/colorSavesDark"
fab:fab_colorRipple="#color/colorSavesAccent"
fab:fab_label="Saves"
fab:fab_size="mini"/>
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit"
fab:fab_colorNormal="#color/colorPrimary"
fab:fab_colorPressed="#color/colorPrimaryDark"
fab:fab_colorRipple="#color/colorAccent"
fab:fab_label="Write"
fab:fab_size="mini"/>
</com.github.clans.fab.FloatingActionMenu>
<TabHost android:id="#+id/tabHost"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/tab3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:orientation="vertical">
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="52dp"
android:layout_weight="0"
android:showDividers="none"/>
</LinearLayout>
</TabHost>
</android.support.design.widget.CoordinatorLayout>
So I'am wondering if my code will do some errors in the future use?
I mean, will it have out of memory problem since i am using only one viewpager for different adapters.
And for the tab with pagerTabStrip Am i doing it right implemeting it both?
Thanks.

So you are setting a new FragmentPagerAdapter on each TabHost, thus creating 3 new fragments at runtime when the user clicks another tab. This might cause confusion to the user and if the framgments load heavy resources, greater memory consumption and further user annoyance.

Android Design Support Library TabLayout using custom tabs layout but layout wrapping the tabs

In tab custom layout I set its parent element to match_parent and set its background color. When I run it tabs are shown custom layout wrapping the elements imageview and textview. I want this custom layout will fill the tab without any space between tabs.
Check output here:
private void setupTabLayout(ViewPager viewPager, ViewPagerAdapter viewPagerAdapter) {
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
int length = tabLayout.getTabCount();
for (int i = 0; i < length; i++) {
tabLayout.getTabAt(i).setCustomView(viewPagerAdapter.getTabView(i));
}
}
tab_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout"
android:background="#color/grey_accent">
<ImageView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon"
android:src="#drawable/ic_action_home"
android:layout_marginBottom="19dp"
android:layout_above="#+id/title"
android:layout_centerHorizontal="true" />
<TextView
android:layout_gravity="center"
android:textColor="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:id="#+id/title"
android:layout_marginBottom="259dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
ViewPagerAdapter:
public View getTabView(int position) {
View view = LayoutInflater.from(this.context).inflate(R.layout.tab_layout, null);
TextView title = (TextView) view.findViewById(R.id.title);
ImageView icon = (ImageView) view.findViewById(R.id.icon);
ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);
layout.setBackgroundResource(this.mColorList.get(position));
icon.setImageResource(this.mIconList.get(position));
title.setText(this.getPageTitle(position));
return view;
}

Try this
<android.support.design.widget.TabLayout
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"/>
I found it here

You can use material design tablayout and then give custom view to all the tabs.
For full reference visit: Custom Tablayout Example
Custom view for all the tabs can be something 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:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/ll"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher"/>
<TextView
android:id="#+id/tvtab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ONE"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/ll2"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher"/>
<TextView
android:id="#+id/tvtab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TWO"
android:textColor="#26e9dc"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/ll3"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="#+id/tvtab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THREE"
android:textColor="#d8ea2b"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher"/>
</LinearLayout>
</LinearLayout>
code for xml file of activity (activity_main.xml)
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#fff"
app:tabSelectedTextColor="#000"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Finally code for MainActivity.java
import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
public ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.custom_tab, null, false);
LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
LinearLayout linearLayout3 = (LinearLayout) headerView.findViewById(R.id.ll3);
tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
tabLayout.getTabAt(1).setCustomView(linearLayout2);
tabLayout.getTabAt(2).setCustomView(linearLayout3);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new OneFragment(), "ONE");
adapter.addFragment(new TwoFragment(), "TWO");
adapter.addFragment(new ThreeFragment(), "THREE");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(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);
}
}
}

Step 1: Add xml layout code for customtabs
<android.support.design.widget.CoordinatorLayout 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:layout_alignParentBottom="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
android:background="#color/white"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginBottom="50dp"/>
Step 2 : Java code for tabs activity
public class BookingsTabs extends AppCompatActivity {
String url, smobile, snames, semail, sid, stoken, responseServer;
String id, token, did, stsid, processresponse, type, cancelresponse;
TextView tv1;
Button cretedeal;
ViewbookingsAdapter adapter;
ViewbookingsAdapter2 adapter2;
LinearLayout order;
private Tracker mTracker;
ProgressDialog pDialog;
ListView listview;
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
AnalyticsApplication application1;
SessionManagement session;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_bookings);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
if (toolbar != null) {
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setHomeButtonEnabled(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
}
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
int defaultValue = 0;
int page = getIntent().getIntExtra("TAB", defaultValue);
viewPager.setCurrentItem(page);
application1 = (AnalyticsApplication) getApplication();
mTracker = application1.getDefaultTracker();
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.accentColor));
tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.aquablue));
tabLayout.getTabAt(0).setCustomView(R.layout.aquablue);
tabLayout.getTabAt(1).setCustomView(R.layout.orangeprocess);
tabLayout.getTabAt(2).setCustomView(R.layout.shipping);
tabLayout.getTabAt(3).setCustomView(R.layout.deliver);
tabLayout.getTabAt(4).setCustomView(R.layout.completedtxt);
tabLayout.getTabAt(5).setCustomView(R.layout.cancelled);
callAsynchronousTask();
viewPager.setCurrentItem(0);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new OrderplacedFragment(), "Order Placed");
adapter.addFrag(new ProcessingFragment(), "Processing");
adapter.addFrag(new ShippingFragment(), "Shipping");
adapter.addFrag(new DeliveredFragment(), "Delivered");
adapter.addFrag(new CompletedFragment(), "Completed");
adapter.addFrag(new CancelledFragment(), "Cancelled");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
if (position == 0) {
}
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
Step 3 :I added below sample tab code fragment for one tab same as other tabs
Take xml code any listview or some data
public class OrderplacedFragment extends Fragment {
View mMainView;
String url, smobile, snames, semail, sid, stoken, responseServer;
Context context;
ViewbookingsAdapter adapter;
ViewbookingsAdapter2 adapter2;
ListView listview;
LinearLayout tv1;
TextView create;
ArrayList<HashMap<String, String>> processlist, hatfilterslist;
SessionManagement session;
private SwipeRefreshLayout mSwipeRefreshLayout = null;
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mMainView = inflater.inflate(R.layout.listview_orderbookings, container, false);
listview = (ListView) mMainView.findViewById(R.id.listview);
pDialog = new ProgressDialog(getActivity());
pDialog.setMessage("Loading...");
pDialog.setMax(5);
Intent j = getActivity().getIntent();
coupon_code = j.getStringExtra("code");
create = (TextView) mMainView.findViewById(R.id.dealslist);
tv1 = (LinearLayout) mMainView.findViewById(R.id.no_deals_linear);
create = (TextView) mMainView.findViewById(R.id.dealslist);
create.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent i = new Intent(getActivity(), MyDealsActivity.class);
startActivity(i);
}
});
tv1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent i = new Intent(getActivity(), MyDealsActivity.class);
startActivity(i);
}
});
return mMainView;
}
}
In this tabs we can add counts also. If you have any questions about this ask me

When you use inflate(R.layout.tab_layout, null), you are saying there is no parent View at all. This causes all layout_ attributes to be thrown away, as per this pro-tip.
Instead, you should pass in the TabLayout and false (i.e., do not automatically attach the View): this ensures that the attributes are not ignored.
public View getTabView(TabLayout tabLayout, int position) {
View view = LayoutInflater.from(this.context)
.inflate(R.layout.tab_layout, tabLayout, false);
TextView title = (TextView) view.findViewById(R.id.title);
ImageView icon = (ImageView) view.findViewById(R.id.icon);
ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);
layout.setBackgroundResource(this.mColorList.get(position));
icon.setImageResource(this.mIconList.get(position));
title.setText(this.getPageTitle(position));
return view;
}

use
app:tabMaxWidth="44dp"
app:tabMinWidth="44dp"

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Badge notification with Tablayout - android

Related

Android click on view above the view

Unable to arrange android tabs in a proper sequence

viewpager scrollview not working android

Viewpager With tabLayout and PagerTabStrip

Android Design Support Library TabLayout using custom tabs layout but layout wrapping the tabs

Categories

Resources