CODEWITHSUNDEEP
androidandroid-layoutandroid-tablayout
Annie
Annie

Reputation: 2587

Strange behavior of tabs

I have used normal tabLayout with viewpager. I am using custom tabs for the tabLayout. But some strange behavior happens in tabs.

enter image description here

As you can see there is space between first two tabs but there is no space between second and third tabs.

Note : In third tab I have set the visibility of arrow imageview to gone. That is not an issue.

My tablayout screen layout file :

<LinearLayout 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.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabIndicatorHeight="3dp"
        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp"
        android:layout_marginTop="@dimen/margin_15"
        app:tabIndicatorColor="@color/colorTransperent"
        app:tabMode="fixed"
        app:tabTextAppearance="?android:attr/textAppearanceMedium" />

    <com.smartcompliant.views.CustomPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Custom tabs :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/tvTabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="@tools:sample/lorem"
        android:textSize="@dimen/font_14"/>

    <ImageView
        android:id="@+id/ivArrow"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_right"/>

</LinearLayout>

In java file inflating tabs like :

View v =  LayoutInflater.from(getContext()).inflate(R.layout.cust_tabs, null);
tabForm = (TextView) v.findViewById(R.id.tvTabTitle);
tabForm.setText(getResources().getString(R.string.form));
tabForm.setTextColor(getContext().getResources().getColor(R.color.colorGreen));
tabLayout.getTabAt(0).setCustomView(v);

So basically two issues :

  1. Space between tabs to be equal.
  2. In some small device screen tab gravity center is not working.

Let me know if any code required. Thank you :)

Upvotes: 1

Views: 462

Answers (2)

silentsudo
silentsudo

Reputation: 6973

EDITED For fixed tabMode to work, you need to make imageview invisible and not gone.

GONE will not take any space in you UI hierarchy, where are INVISIBLE will still be there in UI hierarchy but not visible. In your original implementation can you please replace GONE => INVISIBLE based on your logic

MainActivity.java

package in.silentsudo.shoppingcardnavigation;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    private ViewPager viewPager;
    private TabLayout tabLayout;
    private String[] titles = new String[]{
            "File details", "Select Photo", "Submit"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);

        final FormDetailsViewAdapter adapter = new FormDetailsViewAdapter(getSupportFragmentManager());
        adapter.addPage(new PlaceHolderFragment());
        adapter.addPage(new PlaceHolderFragment());
        adapter.addPage(new PlaceHolderFragment());

        viewPager.setAdapter(adapter);

        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());

        tabLayout.setupWithViewPager(viewPager);

        final LayoutInflater inflater = LayoutInflater.from(this);
        for (int i = 0; i < 3; i++) {
            View v = inflater.inflate(R.layout.item_tab, tabLayout, false);
            TextView txtView = (TextView) v.findViewById(R.id.txt);
            ImageView img = (ImageView) v.findViewById(R.id.img);
            txtView.setText(titles[i]);
            txtView.setTextColor(ContextCompat.getColor(this, R.color.tab_color_unselected));
            img.setImageResource(R.drawable.ic_right_unselected);
            if(i == 2) {
                img.setVisibility(View.INVISIBLE);
            }
            tabLayout.getTabAt(i).setCustomView(v);
        }

        tabLayout.getTabAt(0).select();

        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.addOnTabSelectedListener(this);
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                onTabSelected(tabLayout.getTabAt(0));
            }
        });
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        System.out.println("Tab selected : " + tab.getPosition());
        View customView = tab.getCustomView();
        TextView txtView = (TextView) customView.findViewById(R.id.txt);
        ImageView img = (ImageView) customView.findViewById(R.id.img);
        txtView.setTextColor(ContextCompat.getColor(this, R.color.tab_color_selected));
        img.setImageResource(R.drawable.ic_right_selected);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        System.out.println("Tab unselected : " + tab.getPosition());
        View customView = tab.getCustomView();
        TextView txtView = (TextView) customView.findViewById(R.id.txt);
        ImageView img = (ImageView) customView.findViewById(R.id.img);
        txtView.setTextColor(ContextCompat.getColor(this, R.color.tab_color_unselected));
        img.setImageResource(R.drawable.ic_right_unselected);

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
        System.out.println("Tab reselected : " + tab.getPosition());
    }
}

class FormDetailsViewAdapter extends FragmentStatePagerAdapter {

    private List<Fragment> list;

    public FormDetailsViewAdapter(FragmentManager fm) {
        super(fm);
        list = new ArrayList<>();
    }

    public void addPage(Fragment fragment) {
        list.add(fragment);
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "Fragment " + position;
    }
}

activity_main.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"
    tools:context="in.silentsudo.shoppingcardnavigation.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabMode="fixed" />
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent" />
</LinearLayout>

item_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:padding="4dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:text="This is text" />

    <ImageView
        android:id="@+id/img"
        android:layout_width="18dp"
        android:layout_height="18dp"
        android:layout_marginStart="8dp"
        android:src="@drawable/ic_right_selected" />

</LinearLayout>

PlaceHolderFragment.java

public class PlaceHolderFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.layout_fragment_place_holder, container, false);
    }
}

fragment_place_holder.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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="This is place holder fragment" />
</RelativeLayout>

ic_right_selected.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="18dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="18dp">
    <path android:fillColor="#1DE9B6" android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z"/>
</vector>

ic_right_unselected.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="18dp"
    android:height="18dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#BDBDBD"
        android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z" />
</vector>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="tab_color_selected">#1DE9B6</color>
    <color name="tab_color_unselected">#BDBDBD</color>
</resources>

Upvotes: 1

AskNilesh
AskNilesh

Reputation: 69699

Try this

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabIndicatorHeight="3dp"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"
    android:layout_marginTop="15dp"
    app:tabIndicatorColor="@android:color/transparent"
    app:tabMode="scrollable"
    app:tabTextAppearance="?android:attr/textAppearanceMedium" />

custom tab layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/tvTabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        tools:text="@tools:sample/lorem" />

    <ImageView
        android:id="@+id/ivArrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_right" />

</LinearLayout>

set tab icon

  public void setTab(){
        View v =  LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        TextView tabForm = (TextView) v.findViewById(R.id.tvTabTitle);
        tabForm.setText("Fill details");
        tabLayout.getTabAt(0).setCustomView(v);


        View v2 =  LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        TextView tabForm2 = (TextView) v2.findViewById(R.id.tvTabTitle);
        tabForm2.setText("Select photo");
        tabLayout.getTabAt(1).setCustomView(v2);

        View v3 =  LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        TextView tabForm3 = (TextView) v3.findViewById(R.id.tvTabTitle);
        tabForm3.setText("submit");
        ImageView imageView=v3.findViewById(R.id.ivArrow);
        imageView.setVisibility(View.INVISIBLE);
        tabLayout.getTabAt(2).setCustomView(v3);
    }

Upvotes: 1

Related Questions