VIEWPAGER IN ANDROID

Oleh Unknown

Thursday, 25 August 2016

Bagikan :

Tweet

1. File/Project Structure. Select app/Dependencies/ +. Search with key word "design" and select package "android.support:design:xx.x.x" --> OK.

2. Create an new project: EmptyActivity

<RelativeLayout 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"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout

        android:background="#c8c8c9"

        android:layout_alignParentTop="true"

        android:id="@+id/tab_layout"

        android:layout_width="match_parent"

        android:layout_height="48dp"

        app:tabSelectedTextColor="#e66d6d"

        app:tabTextColor="#7c6854"

        >

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager

        android:layout_below="@id/tab_layout"

        android:id="@+id/view_pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        />

</RelativeLayout>

3. Create 3 files xml: fragment_android.xml, fragment_ios.xml, fragment_windows.xml

– fragment_android.xml:

<div id="inner-editor"> <br class="Apple-interchange-newline"><linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:gravity="center" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:src="@drawable/devpro" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="I am Devpro Android" /> </LinearLayout></div>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:gravity="center"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <ImageView

        android:src="@drawable/devpro"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello Android" />

 </LinearLayout>

– fragment_ios.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:gravity="center"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <!-- TODO: Update blank fragment layout -->

    <ImageView

        android:src="@drawable/devpro"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="hello IOS" />

 </LinearLayout>

– fragment_windows.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:gravity="center"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <!-- TODO: Update blank fragment layout -->

    <ImageView

        android:src="@drawable/devpro"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello Windows" />

 </LinearLayout>

4. Create 3 files: AndroidFragment.java, IosFragment.java, WindowsFragment.java.

– AndroidFragment.java:

public class AndroidFragment extends Fragment {

  

    public AndroidFragment() {

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_android, container, false);

    }

}

– IOSFragment.java:

public class IOSFragment extends Fragment {

    public IOSFragment() {

    }

    

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_ios, container, false);

    }

}

– WindowsFragment.java: 

public class PHPFragment extends Fragment {

    

    public PHPFragment() {

      

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_windows, container, false);

    }

}

5.  Create an PagerAdapter.java to show fragments and title on tabLayout. 

public class PagerAdapter  extends FragmentStatePagerAdapter {

    public PagerAdapter(FragmentManager fm) {

        super(fm);

    }

    @Override

    public Fragment getItem(int position) {

        Fragment fragment=null;

        switch (position){

            case 0:

                fragment=new AndroidFragment();

                break;

            case 1:

                fragment=new IosFragment();

                break;

            case 2:

                fragment=new WindowsFragment();

                break;

        }

        return fragment;

    }

    @Override

    public int getCount() {

        return 3;

    }

    @Override

    public CharSequence getPageTitle(int position) {

        String title = "";

        switch (position){

            case 0:

                title="Android";

                break;

            case 1:

                title="Ios";

                break;

            case 2:

                title="Windows";

                break;

        }

        return title;

    }

}

 6. MainActivity.java:

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;

    TabLayout tabLayout;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        getSupportActionBar().hide();

        viewPager = (ViewPager) findViewById(R.id.view_pager);

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);

        FragmentManager manager = getSupportFragmentManager();

        PagerAdapter adapter = new PagerAdapter(manager);

        viewPager.setAdapter(adapter);

        tabLayout.setupWithViewPager(viewPager);

        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.setTabsFromPagerAdapter(adapter);

    }

}

DONE!!!

Tag : Android Studio, Fragment, ViewPager