Full tutorial is given below. Dear Viewer we are working hard to maintain this website. We doesn't want any think from you. Its just a humble request If you thinks that this posts helps you please share this post with your friends.
TabLayout with FrameLayout . So in this tutorial we learn how to create tab layout and and create fragments and show fragments and add content or buttons or images in fragments and then set onclick listener on buttons and images and hide toolbar when scrolling and hide tab layout bar when scrolling and much more .......
So, first of all add this code into main activity layout
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.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" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways|snap" /> <!-- Add this this code to hide tab layout bar when scrolling app:layout_scrollFlags="scroll|enterAlways|snap" --> <com.google.android.material.tabs.TabLayout android:id="@+id/tabs" app:tabMode="scrollable" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.appbar.AppBarLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
And then add this code into your main .java activity
MainActivity.java
package com.usmtip.demoappbyusmtip; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter; import androidx.viewpager.widget.ViewPager; import android.os.Bundle; import com.google.android.material.tabs.TabLayout; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { // declare variables private Toolbar mToolbar; private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //find view by id your toolbar and viewPager and tab layout mToolbar = (Toolbar) findViewById(R.id.toolbar); mViewPager = (ViewPager) findViewById(R.id.viewpager); mTabLayout = (TabLayout) findViewById(R.id.tabs); setSupportActionBar(mToolbar); setupViewPager(mViewPager); mTabLayout.setupWithViewPager(mViewPager); } // Your fragments and title of tabs private void setupViewPager(ViewPager viewPager) { Adapter adapter = new Adapter(getSupportFragmentManager()); adapter.addFragment(new Fragment_1(), "TAB ONE by usmtip"); adapter.addFragment(new Fragment_2(), "TAB TWO"); adapter.addFragment(new Fragment_3(), "TAB THREE"); adapter.addFragment(new Fragment_1(), "TAB Four"); adapter.addFragment(new Fragment_2(), "TAB Five"); adapter.addFragment(new Fragment_3(), "TAB Six"); adapter.addFragment(new Fragment_1(), "TAB Seven"); adapter.addFragment(new Fragment_2(), "TAB Eight"); adapter.addFragment(new Fragment_3(), "TAB Nine"); viewPager.setAdapter(adapter); } static class Adapter extends FragmentPagerAdapter { private final List<Fragment> mFragments = new ArrayList<>(); private final List<String> mFragmentTitles = new ArrayList<>(); public Adapter(FragmentManager fm) { super(fm); } public void addFragment(Fragment fragment, String title) { mFragments.add(fragment); mFragmentTitles.add(title); } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitles.get(position); } } }
Now to create new fragment right click on
>> App
>> then New
>> then Fragment
>> then Fragment (Blank)
>> then give name to fragment and click on OK.
Now put this code in fragment layout
fragment_1.xml
<?xml version="1.0" encoding="utf-8"?> <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=".Fragment_1"> <androidx.core.widget.NestedScrollView android:id="@+id/textScrollView" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="28sp" android:lineSpacingExtra="8dp" android:text=" usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip\n usmtip" android:padding="20dp" /> </androidx.core.widget.NestedScrollView> </RelativeLayout>
Now put this code into your Fragment .java file
Fragment_1.java
package com.usmtip.demoappbyusmtip; import android.os.Bundle; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment_1 extends Fragment { @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_1, container, false); } }
Now create new fragment and do it again
fragment_2.xml
<?xml version="1.0" encoding="utf-8"?> <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" android:orientation="vertical" tools:context=".Fragment_2"> <androidx.core.widget.NestedScrollView android:id="@+id/textScrollView" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btnOneFragment2" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button by usmtip" /> </androidx.core.widget.NestedScrollView> </RelativeLayout>
Fragment_2.java
package com.usmtip.demoappbyusmtip; import android.os.Bundle; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.Toast; public class Fragment_2 extends Fragment { //Declare Button Button button1; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_2, container, false); // find buttons by id button1 = (Button) view.findViewById(R.id.btnOneFragment2); // set onclick listener on buttons button1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // perform any action on button click Toast.makeText(getActivity(), "Button 1 Clicked of Fragment 2", Toast.LENGTH_SHORT).show(); } }); // Inflate the layout for this fragment return view; } }
fragment_3.xml
<?xml version="1.0" encoding="utf-8"?> <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" tools:context=".Fragment_3"> <androidx.core.widget.NestedScrollView android:id="@+id/textScrollView" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_gravity="center" android:id="@+id/imgFragment3" android:layout_width="300dp" android:layout_height="200dp" android:src="@drawable/usmtip_1_croped"/> </androidx.core.widget.NestedScrollView> </RelativeLayout>
Fragment_3.java
package com.usmtip.demoappbyusmtip; import android.os.Bundle; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.ImageView; import android.widget.Toast; public class Fragment_3 extends Fragment { //Declare image ImageView imageView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_3, container, false); // find imageView by id imageView = (ImageView) view.findViewById(R.id.imgFragment3); // set onclick listener on imageView imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getActivity(), "ImageView Clicked of Fragment 3", Toast.LENGTH_SHORT).show(); } }); // Inflate the layout for this fragment return view; } }
Extra Tip :
To import image click on
>> Resource Manager
>> then drag and drop your image/images into drawable section
>> then click on Project and start your coding
That's it now run you app
0 Comments: