Develop Reference

Tabs with Icons using ViewPager, How to layout them? by Attaching Some Layout File

I am new to Android, Designing an Android Application that contains "Tabs".
I have designed this:
But I want to design like this,
I think there must be way, as like of populating lists using Custom Adapters, But I am not finding any thing to do this, the tutorials that are available on Android Web are out of scope of my mind, because I am new..
My code:
Tabs.xml
Tabs.java
package com.example.medbleep;
import TabsManager.TabPagerAdapter;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.widget.ImageView;
import android.widget.TextView;
public class Tabs extends FragmentActivity implements ActionBar.TabListener {
private ViewPager viewPager;
private TabPagerAdapter mAdapter;
private android.app.ActionBar actionBar;
private int numberOfTabs = 5;
// Tab titles
private int[] tabIcons = {R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home};
private String[] tabText = { "Home", "units", "conferences", "couses", "more" };
ImageView imageView;
TextView textView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabs);
imageView = (ImageView)findViewById(R.id.tab_icon);
textView = (TextView)findViewById(R.id.tab_title);
// Initialization
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setBackgroundColor(getResources().getColor(R.color.darkLoginBlue));
actionBar = getActionBar();
mAdapter = new TabPagerAdapter(getSupportFragmentManager(),
numberOfTabs);
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (int i = 0; i<5 ; i++) {
actionBar.addTab(actionBar.newTab().setText(tabText[i])
.setIcon(getResources().getDrawable(tabIcons[i]))
.setTabListener(this));
//actionBar.addTab(actionBar.newTab().setCustomView(R.layout.tab_layout).setText(tabText[i]).setIcon(tabIcons[i]).setTabListener(this));
//actionBar.setLogo(tabIcons[4]);
//actionBar.setIcon(tabIcons[i]);
//actionBar.setTitle(tabText[i]);
}
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction arg1) {
// TODO Auto-generated method stub
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub
}
}
TabPagerAdapter.java
package TabsManager;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class TabPagerAdapter extends FragmentStatePagerAdapter{
int mNumOfTabs;
public TabPagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
HomeTabFragment homeTabFragment = new HomeTabFragment();
return homeTabFragment;
case 1:
UnitTabFragment unitTabFragment = new UnitTabFragment();
return unitTabFragment;
case 2:
ConferencesTabFragment conferencesTabFragment = new ConferencesTabFragment();
return conferencesTabFragment;
case 3:
CoursesTabFragment coursesTabFragment = new CoursesTabFragment();
return coursesTabFragment;
case 4:
MoreTabFragment moreTabFragment = new MoreTabFragment();
return moreTabFragment;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}

For making this, your have to create Custom Adaptor and set width and height According to your requirement of each tab.
Please Follow this:
http://mobikul.com/make-custom-tabs-icons-android/

ActionBar error "incompatible types"

I am stuck with making tabs using ActionBar. When I make it to run app with some code changes, my app crashes instantly without even starting. The current code is closest to working where I could get. This is MainActivity here:
import android.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.Menu;
import android.support.v4.app.FragmentActivity;
import android.support.v7.app.ActionBar.Tab;
import android.app.ActionBar;
public class MainActivity extends FragmentActivity implements ActionBar.TabListener {
ActionBar actionbar;
ViewPager viewpager;
FragmentPageAdapter ft;
FragmentPageAdapter mAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.pager);
ft = new FragmentPageAdapter(getSupportFragmentManager());
mAdapter = new FragmentPageAdapter(getSupportFragmentManager());
//final ActionBar actionBar = getActionBar();
//final ActionBar actionBar = getSupportActionBar();
actionbar = getActionBar();
viewpager.setAdapter(ft);
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionbar.addTab(actionbar.newTab().setText("DotNet").setTabListener(this));
actionbar.addTab(actionbar.newTab().setText("Eal").setTabListener(this));
actionbar.addTab(actionbar.newTab().setText("Neowin").setTabListener(this));
actionbar.addTab(actionbar.newTab().setText("PcWorld").setTabListener(this));
viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int arg0) {
actionbar.setSelectedNavigationItem(arg0);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
#Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
#Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
#Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
#Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}

Add a dynamic listview to a fragment

In my app I need the possibility to create a dynamic listview populated by elements extracted from the db.
This in itself wouldn't be a big problem (there are a lot of tutorials about it, like this one), problem is, my activity is divided in tabs and, therefore, I have a Fragment for each tab (the code it's basically this).
There are lots of methods that I can't use in a Fragmentand I'm honestly pretty stuck.
How can I implement a dynamic layout solution inside a fragment?
Edit: code for clarity:
Fragment:
package it.sii.mywaiter;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class AllerFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.aller_layout, container, false);
return rootView;
}
}
Activity:
package it.sii.mywaiter;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
//import android.widget.*;
import android.app.ActionBar;
public class UserPrefActivity extends FragmentActivity implements ActionBar.TabListener {
private ViewPager viewPager;
private PrefPagerAdapter mAdapter;
private ActionBar actionBar;
// Tab titles
private String[] tabs = { "Ingredienti preferiti", "Allergie e Intolleranze" };
int tabsnum = tabs.length;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.user_pref_layout);
// Initilization
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new PrefPagerAdapter(getSupportFragmentManager());
mAdapter.setCount(tabsnum);
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
}
Adapter
package it.sii.mywaiter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class PrefPagerAdapter extends FragmentPagerAdapter {
private int count = 0;
public PrefPagerAdapter(FragmentManager fm) {
super(fm);
}
public void setCount(int count){
this.count = count;
}
#Override
public Fragment getItem(int index) {
switch (index) {
case 0:
return new PrefFragment();
case 1:
return new AllerFragment();
}
return null;
}
#Override
public int getCount() {
return count;
}
}
Fragment's layout:
<?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"
android:orientation="vertical"
android:background="#fa6a6a" >
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test test"
android:textSize="20sp"
android:layout_centerInParent="true"/>
</RelativeLayout>

As you said, you have Fragments. Every Fragment has its own class so you can create a CustomArrayAdapter and the use it in the Fragments onCreate Method. Inside the Fragment get your ListView, which you defined in the xml File for this Fragment, with findViewByID and then set its Adapter with setAdapter(new YourCustomAdapterClass()); then you have your custom dynamic ListView in a Fragment.

i am using action bar tabs,i want to switch from one activity to another activity,how can i call the activity with in tabs

//I am using action bar tabs in my app,I want to switch from one activity to another activity with in tabs when I press on tabs,how can I call the activity with in tabs. I want to display any activity with in actionbar tabs.
public class MainActivity extends Activity implements TabListener {
// Refresh menu item
private MenuItem action_search;
Tab tab1, tab2, tab3;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//creating tabs
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//adding tabs to actionbar
tab1 = actionBar.newTab();
tab1.setText("camera");
tab1.setTabListener(this);
actionBar.addTab(tab1);
tab2 = actionBar.newTab();
tab2.setText("contacts");
tab2.setTabListener(this);
actionBar.addTab(tab2);
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
switch (tab.getPosition()) {
case 0:
Intent i = new Intent(getApplicationContext(), MainActivity2.class);
startActivity(i);
break;
case 1:
Intent i = new Intent(getApplicationContext(), MainActivity2.class);
startActivity(i);
break;
}
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}

MainActivity.java
package com.example.moviesswipe;
import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.view.Menu;
#SuppressWarnings("unused")
#SuppressLint("NewApi")
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
private String[] tabs = { "English", "Tamil", "Hindi" };
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {
// TODO Auto-generated method stub
}
#Override
public void onTabSelected(Tab tab, android.app.FragmentTransaction ft) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
TabsPagerAdapter.java
package com.example.moviesswipe;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class TabsPagerAdapter extends FragmentPagerAdapter {
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
#Override
public Fragment getItem(int index) {
switch (index) {
case 0:
return new English();
case 1:
return new Tamil();
case 2:
return new Hindi();
}
return null;
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return 3;
}
}
Here i placed three tabs , for each tab i created three activity.
English.java , Tamil.java and Hindi.java
sample one:
package com.example.moviesswipe;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
#SuppressWarnings("unused")
public class English extends Fragment{
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.english, container, false);
return rootView;
}
}
For each class you need to create a layout:
No need to entry these classes in your manifest coz these are all fragments.
Try it like this dude :) Happy coding :)
Say if there any queries.

Button SetOnClickListener NullPointerException in swipe layout

I get an error whenever I run the app with the setOnClickListener method. Otherwise it works fine. Can you guys please help me?
package com.grozav.meetmeup;
import com.grozav.meetmeup.R;
import com.grozav.meetmeup.library.UserFunctions;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.FragmentTransaction;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.widget.Button;
public class DashboardActivity extends FragmentActivity implements TabListener {
UserFunctions userFunctions;
ViewPager viewPager;
ActionBar actionBar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dashboard);
userFunctions = new UserFunctions();
if (!userFunctions.isUserLoggedIn(getApplicationContext())) {
// user is not logged in show login screen
Intent login = new Intent(getApplicationContext(),
LoginActivity.class);
login.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(login);
// Closing dashboard screen
finish();
}
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageSelected(int arg0) {
actionBar.setSelectedNavigationItem(arg0);
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.Tab tabA = actionBar.newTab();
tabA.setText("My Profile");
tabA.setTabListener(this);
ActionBar.Tab tabB = actionBar.newTab();
tabB.setText("Meet Me Up");
tabB.setTabListener(this);
actionBar.addTab(tabA);
actionBar.addTab(tabB);
/*********************************
I GET THE ERROR HERE
*********************************/
Button logout = (Button) findViewById(R.id.btnLogout);
logout.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Intent myIntent = new Intent(getApplicationContext(), LoginActivity.class); // fix View.getContext() to getContext()
startActivity(myIntent); // change to startActivity
}
});
}
public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub
}
public void onTabSelected(Tab arg0, FragmentTransaction arg1) {
viewPager.setCurrentItem(arg0.getPosition());
}
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub
}
}
class MyAdapter extends FragmentPagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
#Override
public Fragment getItem(int arg0) {
Fragment fragment = null;
if (arg0 == 0) {
fragment = new FragmentA();
}
if (arg0 == 1) {
fragment = new FragmentB();
}
return fragment;
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return 2;
}
}
dashboard.xml file
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity" />
fragment_a.xml file
<FrameLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".FragmentA" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/btnLogout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Logout" />
</LinearLayout>
</FrameLayout>
This is my first android project so please don't be too harsh. Your help is greatly appreciated! Thank you very much!

You need to write your UI events within according fragment, try this,
public class FragmentA extends Fragment{
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment_a.xml, null);
Button logout = (Button)view.findViewById(R.id.btnLogout);
logout.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Intent myIntent = new Intent(getActivity(), LoginActivity.class);
startActivity(myIntent); // change to startActivity
}
});
return view;
}
}

try this..
logout.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent myIntent = new Intent(getApplicationContext(), LoginActivity.class); // fix View.getContext() to getContext()
startActivity(myIntent); /
}});
If you still face problem then change the button id in XML and try again.