Develop Reference

How to implement the avatar selection screen like this in android without using any library?

this is my first question here. I am trying implement similar avatar selection screen for my college project. I searched almost everywhere and it seems like it can be done using viewpager. I tried but cant achieve similar effect. I have problem is showing all child in at the same time. and also i cant able to achieve the select avatar scaled in high and rest in low. Please help me out, i want to implement quickly as possible without using any library because i want to understand how it can be implemented without it as of now. Thanks in advance.
I have tried to create a viewpager with 3 images. This is my implementation.
MainActivity.java with MyPagerAdapter
public class MainActivity extends AppCompatActivity {
FragmentPagerAdapter pagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.myViewPager);
pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
}
public static class MyPagerAdapter extends FragmentPagerAdapter {
private static int NUM_ITEMS = 3;
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return FirstFragment.newInstance(R.drawable.a);
case 1:
return SecondFragment.newInstance(R.drawable.b);
case 2:
return ThirdFragment.newInstance(R.drawable.c);
default:
return null;
}
}
#Override
public int getCount() {
return NUM_ITEMS;
}
}
}
activity_main.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:id="#+id/activity_main"
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">
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</RelativeLayout>
I have 3 Fragements. This is one of the fragement.
FirstFragment.java
public class FirstFragment extends Fragment {
private int image;
public FirstFragment() {
}
public static FirstFragment newInstance(int resImage) {
FirstFragment fragment = new FirstFragment();
Bundle args = new Bundle();
args.putInt("image", resImage);
fragment.setArguments(args);
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
image = getArguments().getInt("image", 0);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_first, container, false);
ImageView imageView = (ImageView) view.findViewById(R.id.firstImg);
imageView.setImageResource(image);
return view;
}
}
This is fragment_first.xml
<FrameLayout 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">
<!-- TODO: Update blank fragment layout -->
<ImageView
android:id="#+id/firstImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>

Android Fragment Layout is not replacing a view using Linear Layout

I am facing some issues for fragment in Android.
I completed a implementation of ViewPager using two fragment class with its xml layout, An MainActivity and An Adapter.
First Fragment : Linear Layout is Parent as well in second fragment, Linear Layout is parent. I have a button in my first fragment, i want to replace first fragment means switch fragment from first to second.
I am using ViewPager. Kindly Look on my source code.
PagerActivity.java
public class PagerActivity extends FragmentActivity {
ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pager);
mViewPager=(ViewPager)findViewById(R.id.viewpager);
/** set the adapter for ViewPager */
mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
// mViewPager.notify();
}
}
PagerAdapter.java
public class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
/** Show a Fragment based on the position of the current screen */
if (position == 0) {
return new Welcome();
}else{
return new Locate();
}
}
#Override
public int getCount() {
return 2;
}
}
Welcome.java
Fragment 1
public class Welcome extends Fragment implements GlobalInterFace, View.OnClickListener{
private Button welcomeBtn;
private View v;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.activity_welcome, container, false);
welcomeBtn=(Button)v.findViewById(R.id.welcomeBtn);
findViewById();
setOnClickListener();
return v;
#Override
public void onClick(View v) {
switch (v.getId()){
case R.id.welcomeBtn:{
Log.e("click", "click");
Fragment fragment = new Locate();
FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.parent_linear, fragment);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
break;
}
}
}
Locate.java
Fragment 2
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.activity_welcome_pager_two, container, false);
locateMe=(Button)v.findViewById(R.id.locateBtn);
locateMe.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent i = new Intent(getActivity(), SignUpActivity.class);
startActivity(i);
((Activity) getActivity()).overridePendingTransition(0,0);
}
});
return v;
}
welcome xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parent_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/splash_color"
android:weightSum="100">
<RelativeLayout
android:id="#+id/rel1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<com.rey.material.widget.ImageView
android:id="#+id/welcome_Image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/welcome"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/welcomeRelativeTwo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:padding="#dimen/universal_margin4"
>
<com.rey.material.widget.TextView
android:id="#+id/Ready"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_ready"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="#dimen/universal_margin2"
android:layout_centerInParent="true"
/>
<com.rey.material.widget.TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_descrition"
android:layout_below="#+id/Ready"
android:textAlignment="center"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/universal_margin"
/>
<com.rey.material.widget.Button
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/welcomeBtn"
app:rd_enable="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/description"
android:text="#string/welcome_btntext"
android:textColor="#color/splash_color"
android:background="#color/colorAccent"
android:layout_marginTop="#dimen/universal_margin2"
/>
</RelativeLayout>
<!-- Your RelativeLayout Items -->
</LinearLayout>
Locate.xml
same as welcome layout only layout id is changed.
When I click on WelcomeBtn, the fragment replacement is not working.mentioned this one in my source code in Welcome.java
please help me.

Your parent parent_linearis instance of LinearLayout if you want to put fragment inside this view you should change your LinearLayout to FrameLayout something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parent_linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/splash_color">
//... your other layout goes here
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
And change following part of your code:
fragmentTransaction.replace(R.id.fragment_container, fragment);

Disable view pager sliding and make it slide on button click

I am making page signup page that contains page indicator and make it slid-able on button click.I am using view pager to show different fragments.Thus i am using view pager it slide-able on page swipe.I want to stop it and make it slide-able on button click.
public class MainActivity extends FragmentActivity
{
ViewPager pager;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager)findViewById(R.id.view_pager);
pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener()
{
});
pager.setAdapter(new IntroPagerAdapter(getSupportFragmentManager()));
CirPageIndicator indicator = (CirPageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
}
public class IntroPagerAdapter extends FragmentPagerAdapter
{
public IntroPagerAdapter(FragmentManager fm)
{
super(fm);
}
#Override
public Fragment getItem(int position)
{
return new MyFragment();
}
#Override
public int getCount() { return 5; }
#Override
public CharSequence getPageTitle(int position) { return ""; }
}
}
And XML file for this code is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#F4F4F4">
<view
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="android.support.v4.view.ViewPager"
android:id="#+id/view_pager"
android:layout_alignParentBottom="false"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="false" />
<view
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.dacer.cirpageindicator.CirPageIndicator"
android:id="#+id/indicator"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp" />
can some one help me out .
its important.
thanks in advance.

listview in a viewpager based on fragments

I'm using a viewpager based on fragments, and it works amazingly. My viewpager shows a button on each page (since it's what I put in the layout xml file of each fragment).
Now I want to have a listview with different data on each page instead of the buttons. And that's why in the first place I opted to use fragments.
The problem is that I didn't find a way to integrate listviews in my viewpager.
Any ideas please?
Here is my code :
MainActivity.java
public class MainActivity extends FragmentActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
List<Fragment> fragments = new Vector<Fragment>();
fragments.add(Fragment.instantiate(this, FragmentA.class.getName()));
fragments.add(Fragment.instantiate(this, FragmentB.class.getName()));
fragments.add(Fragment.instantiate(this, FragmentC.class.getName()));
ViewPagerAdapter adapter = new ViewPagerAdapter(super.getSupportFragmentManager(), fragments);
ViewPager pager = (ViewPager)super.findViewById(R.id.viewpager);
pager.setAdapter(adapter);
pager.setOffscreenPageLimit(2);
pager.setCurrentItem(1);
}
}
main.xml declaring the viewpager
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<android.support.v4.view.PagerTabStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
ViewPagerAdapter.java
public class ViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
private static String[] titles = new String[] {"A", "B", "C"};
public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
#Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
#Override
public int getCount() {
return this.fragments.size();
}
#Override
public String getPageTitle( int position )
{
return titles[ position ];
}
}
FragmentA.java
public class FragmentA extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_a, container, false);
}
}
fragment_a.xml only contains a button
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button android:text="#string/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Check out ListFragments and the official ListView tutorial. The tutorial uses a ListActivity, but you can essentially substitute it with a ListFragment.

you can replace your button in xml with a ListView (or keep both).
In your fragment class, create an arrayAdapter and set it to the list view
mListView = (ListView) rootView.findViewById(R.id.lv_list);
mListView.setAdapter(mAdapter);
You can create a custom adapter and set whatever you need in getView function

ViewPager with Fragment with different layouts

I am new to using ViewPagers and Fragments together. My app has a ListView on startup, which bring the user to a details view based on a id that is passed. The problem I'm running into is that the details view has a different layout then the list view. The ViewPager is on the intial screen's layout, so when using the ViewPager the layout retains the inital layout, which is basically just a status bar at the bottom, which should go away when the user is on the details view.
This is what I have so far:
Main.xml (initial layout on startup, with a status bar)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
>
<!-- Footer -->
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
<!-- Footer -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_above="#id/status
/>
</RelativeLayout>
Main.class
public class Main extends SherlockFragmentActivity
{
private static int NUMBER_OF_PAGES;
private ViewPager mViewPager;
private MyFragmentPagerAdapter mMyFragmentPagerAdapter;
private static List<Fragment> fragments;
#Override
public void onCreate(final Bundle icicle)
{
super.onCreate(icicle);
setContentView(R.layout.main);
mViewPager = (ViewPager)findViewById(R.id.viewpager);
mMyFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mMyFragmentPagerAdapter);
NUMBER_OF_PAGES = 5;
fragments = new ArrayList<Fragment>();
fragments.add(new ListingFragment()); //initial screen that just a ListView
fragments.add(DetailsFragment.newInstance(1));
fragments.add(DetailsFragment.newInstance(2));
fragments.add(DetailsFragment.newInstance(3));
fragments.add(DetailsFragment.newInstance(4));
}
private static class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int index) {
return fragments.get(index);
}
#Override
public int getCount() {
return NUMBER_OF_PAGES;
}
}
}
Details.xml (details view with no status bar)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
/>
</RelativeLayout>
DetailsFragment.class
public class DetailsFragment extends SherlockFragmentActivity
{
private int detailId;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
}
#Override
public void onActivityCreated(final Bundle icicle)
{
super.onActivityCreated(icicle);
}
public static DetailsFragment newInstance(int id) {
DetailsFragment lf = new DetailsFragment();
Bundle bundle = new Bundle();
bundle.putInt("id", id);
lf.setArguments(bundle);
return lf;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.details, container, false);
detailId = getArguments().getInt("id");
return view;
}
}

The ViewPager is on the intial screen's layout, so when using the
ViewPager the layout retains the inital layout, which is basically
just a status bar at the bottom, which should go away when the user is
on the details view.
Then don't put it in the main layout file. If the status is tied to the first fragment then it belong in its view, especially if the DetailsFragment doesn't need to show that status TextView.
So remove the status TextView from main.xml and add it to the layout file used in the ListingFragment. If ListingFragment extends ListFragment then create a layout file which contains a ListView with the id(android:id="#android:id/list") + the status TextView and inflate this layout file in the onCreateView.