Android Fragments not showing up Text view and internal elements

Android Fragments not showing up Text view and internal elements - android

I am new to android.I created a tablayout and a viewpager with two fragments.I have elements/items in my created Detail Fragment and a TextView in my measure fragment but when i run the code on my mobile,nothing is shown in my fragment.I haven't java code of my fragment.Everything works fine on the tablayout..i can switch between the tab but nothing is being shown in my fragments...why is that happening?
My Activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
tools:context="com.example.update">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<!--<include android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"/>-->
<include
android:id="#+id/update_screen_toolbar"
layout="#layout/toolbar_layout"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:id="#+id/name_age_gender"
android:background="#d3d3d3"
android:layout_below="#+id/update_screen_toolbar"/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabLayout"
app:tabMode="fixed"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPager">
</android.support.v4.view.ViewPager>
</RelativeLayout>
JAVA code for activity
package com.example.update;
import android.content.Intent;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class UpdateDetail extends AppCompatActivity {
TabLayout tabLayout;
ViewPager viewPager;
ViewPagerAdapter viewPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
tabLayout=(TabLayout)findViewById(R.id.tabLayout);
viewPager=(ViewPager)findViewById(R.id.viewPager);
viewPagerAdapter=new ViewPagerAdapter(getSupportFragmentManager());
viewPagerAdapter.addFragments(new DetailFragment()," DETAIL");
viewPagerAdapter.addFragments(new MeasureFragment(),"MEASURE");
viewPager.setAdapter(viewPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
}
code for DetailFragment:
<FrameLayout 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"
tools:context="com.example.DetailFragment">
<!-- TODO: Update blank fragment layout -->
<Button
android:id="#+id/expandableButton4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#066da1"
android:drawableRight="#android:drawable/arrow_down_float"
android:onClick="expandableButton4"
android:paddingRight="10dp"
android:text="Expand/Collapse Android Example"
android:textColor="#fff" />
<com.github.aakira.expandablelayout.ExpandableRelativeLayout
android:id="#+id/expandableLayout4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/expandableButton4"
android:background="#90066da1"
android:padding="16dp"
app:ael_duration="400"
app:ael_expanded="false"
app:ael_interpolator="bounce"
app:ael_orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Implements the expand and collapse by sliding logic for a top or a bottom view in a two children view or layout or any widgets composition.
Implements the expand and collapse by sliding logic for a top or a bottom view in a two children view or layout or any widgets composition." />
</com.github.aakira.expandablelayout.ExpandableRelativeLayout>
</FrameLayout>

Try this one:
public class FriendshipParentFragment extends Fragment {
#BindView(R.id.tabs)
TabLayout tabs;
#BindView(R.id.viewpager)
ViewPager viewPager;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_friendship_parent, container, false);
ButterKnife.bind(this, view);
initTabs();
return view;
}
private void initTabs(){
viewPager.setAdapter(new TabsAdapter(getChildFragmentManager()));
tabs.setupWithViewPager(viewPager);
tabs.getTabAt(0).setText("Tab1");
tabs.getTabAt(1).setText("Tab2");
tabs.setTabTextColors(ContextCompat.getColor(getActivity(), R.color.colorAccent), ContextCompat.getColor(getActivity(), R.color.colorBottomNavigationPrimary));
tabs.setSelectedTabIndicatorColor(ContextCompat.getColor(getActivity(), R.color.white));
tabs.setSelectedTabIndicatorHeight(4);
}
public class TabsAdapter extends FragmentPagerAdapter {
public TabsAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new FollowersFragment();
case 1:
return new FollowFragment();
}
return null;
}
#Override
public int getCount() {
return 2;
}
}
}
xml file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="owo.owocar.driver.OrdersParentFragment">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:elevation="4dp"
app:tabGravity="fill" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:id="#+id/viewpager"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>

Related

Fragment components are invisible in actual running app

I wanna create an activity that consist of 3 fragments. Problem is after adding views to fragment, in xml design section it shows normally but after running in actual device or emulator, views go invisible.I can click on (for example) EditText and keyboard shows itself, but i can not see that EditText!
fragment.xml code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context=".ProfileTab">
<EditText
android:id="#+id/edtProfileName"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="20dp"
android:layout_marginTop="65dp"
android:layout_marginEnd="20dp"
android:background="#drawable/et_profiletab_custom"
android:ems="10"
android:hint="Profile Name"
android:inputType="textPersonName"
android:padding="15dp"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
.
.
.
activity.xml code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:id="#+id/fragment_holder"
tools:context=".SocialMediaActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<include
android:id="#+id/myToolbar"
layout="#layout/my_toolbar" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purple_500"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabSelectedTextColor="#AEA0A0"
app:tabTextColor="#fff" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment.java code:
public class ProfileTab extends Fragment {
private EditText edtProfileName;
public ProfileTab() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_profile_tab, container, false);
edtProfileName = view.findViewById(R.id.edtProfileName);
//....
return view;
activity.java
public class SocialMediaActivity extends AppCompatActivity {
private Toolbar toolbar;
private ViewPager viewPager;
private TabLayout tabLayout;
private TabAdapter tabAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_social_media);
setTitle("Social Media App!!!");
toolbar = findViewById(R.id.myToolbar);
setSupportActionBar(toolbar);
viewPager = findViewById(R.id.viewPager);
tabAdapter = new TabAdapter(getSupportFragmentManager());
//get the data from tab that we have created from fragments and put it to viewPager
viewPager.setAdapter(tabAdapter);
tabLayout = findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager, false);
}
TabAdapter.java code: // java says that FragmentPagerAapter is deprecetad
public class TabAdapter extends FragmentPagerAdapter {
public TabAdapter(#NonNull FragmentManager fm) {
super(fm);
}
#NonNull
#Override
public Fragment getItem(int tabPosition) {
switch (tabPosition){
case 0:
return new ProfileTab();
.
.
.
}
}
#Override
public int getCount() {
return 3;
}
#Nullable
#Override
public CharSequence getPageTitle(int position) {
switch (position){
case 0:
return "Profile";
.
.
.
}
}
}
I try fragment.xml root layout with RelativeLayout or disable actionbar replacement with toolbar or change theme of tablayout and toolbar but problem is exist.
How can i solve the problem?

change these lines in XML activity layout
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
and also in AppBarLayout set layout height to:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">

Fragment content not visible on adding it to view pager of an activity?

I have put viewpager in an activity and view pager contains 3 fragments but on running app it doesn't show the fragment related data.Following is the aatached code, please help.
Its not throwing any error but the fragment content is not visible though the tab-titles are visible. I saw certain links where they ask you to add getChildFragmentManager() but after searching i got to know that its not supported in activity.
MainActivity.java
package kbg.com.kbgpos;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
DrawerLayout drawerLayout;
ActionBarDrawerToggle actionBarDrawerToggle;
TabLayout tabLayout;
ViewPager viewPager;
ViewPagerAdapter viewPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close);
actionBarDrawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.hamburgerColor));
drawerLayout.setDrawerListener(actionBarDrawerToggle);
tabLayout=(TabLayout) findViewById(R.id.tabLayout);
viewPager=(ViewPager) findViewById(R.id.viewPager);
viewPagerAdapter=new ViewPagerAdapter(getSupportFragmentManager());
viewPagerAdapter.addFragments(new Personal_Info_Fragment(),"Personal Info");
viewPagerAdapter.addFragments(new EducationalExperience_Info_Fragment(),"Edu & Exp Info");
viewPagerAdapter.addFragments(new OtherInfo_Fragment(),"Official Info");
viewPager.setAdapter(viewPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
#Override
protected void onPostCreate(#Nullable Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
actionBarDrawerToggle.syncState();
}
}
activity_main.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="#+id/drawer_layout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"
android:id="#+id/toolbar"></include>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabLayout"
app:tabMode="fixed"
app:tabGravity="fill"
android:background="#b3d9ff"
app:tabTextAppearance="#style/TabLayoutStyle">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPager">
</android.support.v4.view.ViewPager>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navigation_view"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_drawer_header"
app:itemIconTint="#006699"
app:menu="#menu/drawer_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Personal_Info_Fragment
package kbg.com.kbgpos;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Personal_Info_Fragment extends Fragment {
public Personal_Info_Fragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_personal__info_, container, false);
}
}
ViewPagerAdapter.java
package kbg.com.kbgpos;
import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
public class ViewPagerAdapter extends FragmentPagerAdapter {
ArrayList<Fragment> fragments=new ArrayList<>();
ArrayList<String> tabTitles=new ArrayList<>();
public void addFragments(Fragment fragments,String titles){
this.fragments.add(fragments);
this.tabTitles.add(titles);
}
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return fragments.size();
}
#Nullable
#Override
public CharSequence getPageTitle(int position) {
return tabTitles.get(position);
}
}
fragment_personal__info_.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Personal_Info_Fragment">
<android.support.v7.widget.CardView
android:id="#+id/info_cardView"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="5dp"
card_view:cardElevation="2dp"
card_view:contentPadding="5dp"
card_view:cardCornerRadius="2dp"
card_view:cardBackgroundColor="#e5c68b">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/infoIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_info_black_24dp"
android:layout_centerVertical="true"
android:layout_marginRight="2dp"/>
<TextView
android:layout_toRightOf="#id/infoIcon"
android:layout_marginLeft="4dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Please Enter Complete and Valid Information Within the Forms As This Will Be Treated As Final Info"
android:textColor="#android:color/white"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Please help as how can i see the content of fragments on viewpager tabs which are shown empty at the moment.

A DrawerLayout is supposed to have 2 children, the main content and the navigation view.
In your case you have 3 children:
<DrawerLayout ...>
<AppBarLayout />
<ViewPager />
<NavigationView />
</DrawerLayout>
So try to wrap the AppBarLayout and ViewPager into a LinearLayout so that in the end the DrawerLayout to have just 2 children as expected.
<DrawerLayout ...>
<LinearLayout orientation="vertical">
<AppBarLayout />
<ViewPager />
</LinearLayout>
<NavigationView />
</DrawerLayout>

View Pager is not working inside nested scroll view in android

Hello people I'm a newbie to android development and I'm stuck at this point where my view pager is not working as expected.
What I want to achieve is a tab layout scrolling up along with a collapsing toolbar layout. Thanks a lot :)
Without the nested scroll view the problem is that that collapsing toolbar is not collapsing.This is the code :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/black"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/bottom_nav_home_icon"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/temp_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/TabLayoutTheme" />
<android.support.v4.view.ViewPager
android:id="#+id/temp_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
This is working well for view pager but the collapsing toolbar is not collapsing.When I tried to keep it inside a nested scroll view the collapsing toolbar layout is collapsing but view pager is not working. It is not sliding the tabs.
The java code for view pager is
import android.support.design.widget.AppBarLayout;
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.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class Tabs extends AppCompatActivity {
TabLayout tabLayout;
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_service_history_tabs);
tabLayout=(TabLayout)findViewById(R.id.temp_tab);
viewPager=(ViewPager)findViewById(R.id.temp_view_pager);
tabLayout.setupWithViewPager(viewPager);
viewPager.setAdapter(new PageAdapter(getSupportFragmentManager()));
}
class PageAdapter extends FragmentPagerAdapter{
public PageAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return new TabFragment1();
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position){
case 0:return "A";
default:return "B";
}
}
}
}

Try putting your LinearLayout inside a NestedScrollView,
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/nsv">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/temp_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/temp_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
and setting android:fillViewport to true for the NestedScrollView.
NestedScrollView nestedScrollView = (NestedScrollView) findViewById (R.id.nsv);
nestedScrollView.setFillViewport (true);

i think
android:fitsSystemWindows="true" is the cause. Remove this line.May solve your issue.

Add image on 3 tabs

How can I add images into tab ? Currently I'm able to move the tab to bottom but have no idea on how to change the LL Tab1, LL Tab2, LL Tab3 to icon.Am I on the right path ? Any help would be greatly appreciated.
xml code
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/ll_tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
<LinearLayout
android:id="#+id/ll_tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
<LinearLayout
android:id="#+id/ll_tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:background="#color/light_gray"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
Anyone can help? Thanks a lot !

Try using TabLayout from Android Design Support Library to meet material design guidelines for tabs.
The Design library’s TabLayout implements both fixed tabs, where the
view’s width is divided equally between all of the tabs, as well as
scrollable tabs, where the tabs are not a uniform size and can scroll
horizontally.
To implement TabLayout check this guide and how to add the icon for swipeable tabs to set icons to tabs using setIcon.
final int[] ICONS = new int[]{
R.drawable.ic_action_document,
R.drawable.ic_action_tick,
R.drawable.ic_action_trash};
....
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
tabLayout.getTabAt(0).setIcon(ICONS[0]);
tabLayout.getTabAt(1).setIcon(ICONS[1]);
tabLayout.getTabAt(2).setIcon(ICONS[2]);
To set the tabs at the bottom in a TabLayout check - How can I set tabs at the bottom and also hide top actionbar? where you put the TabLayout in a relativeLayout and align it to parent bottom:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
app:tabTextColor="#d3d3d3"
app:tabSelectedTextColor="#ffffff"
app:tabIndicatorColor="#ff00ff"
android:minHeight="?attr/actionBarSize"
android:layout_alignParentBottom="true"
/>
Although you can put your tab layout at the bottom, try not to use bottom tab bars if possible as per the Pure Android guide.
Other platforms use the bottom tab bar to switch between the app's
views. Per platform convention, Android's tabs for view control are
shown in action bars at the top of the screen instead.

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.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
R.drawable.ic_tab_favourite,
R.drawable.ic_tab_call,
R.drawable.ic_tab_contacts
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
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]);
}
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);
}
}
}
Layout for Tab
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.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="fixed"
app:tabGravity="fill"/>
</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>
Fragments(Class) used in this tab
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class OneFragment extends Fragment{
public OneFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_one, container, false);
}
}
Xml file
fragment_one.xml
<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=".fragments.OneFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/one"
android:textSize="40dp"
android:textStyle="bold"
android:layout_centerInParent="true"/>
</RelativeLayout>
TwoFragment.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TwoFragment extends Fragment{
public TwoFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_two, container, false);
}
}
fragment_two.xml
<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=".fragments.TwoFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/one"
android:textSize="40dp"
android:textStyle="bold"
android:layout_centerInParent="true"/>
</RelativeLayout>
You can create third fragment class, and layout as i have done above.
Run it. Hope this would work

Try this,
puth this activity_main.xml and set the custom height to TabLayout.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
app:tabMode="fixed"
app:tabGravity="fill"/>
Create an xml layout named custom_tab.xml under res ⇒ layout. In this layout we have defined the custom view for the tab.
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab"
android:textColor="#color/colorAccent"
android:textSize="#dimen/tab_label"
android:fontFamily="#string/font_fontFamily_medium"/>
Open MainActivity.java and modify the code as below. Here if you observe setupTabIcons() method, I have rendered custom_tab.xml layout in each tab using below lines of code.
TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabOne.setText("ONE");
tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 0, 0);
tabLayout.getTabAt(0).setCustomView(tabOne);
TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("TWO");
tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_call, 0, 0);
tabLayout.getTabAt(1).setCustomView(tabTwo);
TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabThree.setText("THREE");
tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_contacts, 0, 0);
tabLayout.getTabAt(2).setCustomView(tabThree);

Try this,Really interesting.Must be the solution
http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Well you can either place an ImageView in your Linearlayout that is each tab, or you can set an drawable as a background for your LinearLayout. If your image will act a background then you will obviously want to add that image as a background and not add an ImageView as a child to your LinearLayout. If it is going to be content though, not a background, you should add an ImageView to each LinearLayout like you would add a child of any other type to a parent View.

Android UI Elements in tabbed view not loading

I'm using a FragmentStatePagerAdapter to manage three tabbed Fragments that each have a ListView and a button. When the parent Fragment loads the via the ViewPager and PagerAdapter, the Button is missing but the ListView still shows. Switching to another tab in the Fragment causes the buttons to show up as they were supposed to.
Why isn't the button showing on the first view load?
public class DetailsPagerAdapter extends FragmentStatePagerAdapter {
private Creature creature;
public DetailsPagerAdapter(FragmentManager fm, Creature creature) {
super(fm);
this.creature = creature;
}
#Override
public Fragment getItem(int position) {
switch(position) {
case 0:
return StatFragment.newInstance(creature);
case 1:
return ModFragment.newInstance(creature);
case 2:
return ResourceFragment.newInstance(creature);
}
return new Fragment();
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
switch(position) {
case 0:
return "Stats";
case 1:
return "Mods";
case 2:
return "Resources";
}
return "";
}
}
Details Fragment - Contains the tabs
public class CreatureDetailFragment extends Fragment {
private Creature creature;
private DetailsPagerAdapter detailsPagerAdapter;
private ViewPager viewPager;
private TabLayout tabs;
public CreatureDetailFragment() {
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments().containsKey(Creature.ID_INTENT_MESSAGE)) {
this.creature = Creature.get(this.getContext(), getArguments().getLong(Creature.ID_INTENT_MESSAGE, 0l));
Activity activity = this.getActivity();
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) activity.findViewById(R.id.toolbar_layout);
if (collapsingToolbarLayout != null) {
collapsingToolbarLayout.setTitle(this.creature.name);
}
this.detailsPagerAdapter = new DetailsPagerAdapter(this.getActivity().getSupportFragmentManager(), creature);
}
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.fragment_creature_details_tabbed, container, false);
this.viewPager = (ViewPager) view.findViewById(R.id.viewPager);
this.viewPager.setAdapter(this.detailsPagerAdapter);
this.tabs = (TabLayout) view.findViewById(R.id.tabLayout);
this.tabs.setupWithViewPager(this.viewPager);
return view;
}
}
Parent layout that contains tabs
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:id="#+id/main_content"
android:layout_width="match_parent" android:layout_height="match_parent"
android:fitsSystemWindows="true" tools:context=".DetailActivity">
<android.support.design.widget.AppBarLayout android:id="#+id/appbar"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar android:id="#+id/detail_toolbar"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay"
/>
<android.support.design.widget.TabLayout android:id="#+id/tabLayout"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:fillViewport="false" />
</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>
Tab Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabListView"
android:layout_alignParentTop="true"
android:layout_above="#+id/btnAddItem" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/btnAddItem"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:textColor="#d5d5d5"
android:background="#000"
android:textSize="24dp"
android:alpha=".7"
android:src="#drawable/ic_action_add" />
</RelativeLayout>

It seems that CoordinatorLayout wasn't the best layout to use for my tab fragment. The ListView was pushing the button out of the viewable space on first load and, for some reason, was only being rendered when redrawing the view.
I switched it to RelativeLayout and added some attributes to the ViewPager:
<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_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_below="#+id/appbar" />

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.

Android Fragments not showing up Text view and internal elements - android

Related

Fragment components are invisible in actual running app

Fragment content not visible on adding it to view pager of an activity?

View Pager is not working inside nested scroll view in android

Add image on 3 tabs

Android UI Elements in tabbed view not loading

Categories

Resources