I have Created an Image Slider using View Pager by following some tutorials.
So my problems is I wanted my slider to have a transparent toolbar.
And when i clicked on the screen the toolbar will hide.
Here's my code together with the output(I made), and the output i Want.
My Activity
public class viewInfo extends AppCompatActivity{
private ViewPager viewPager;
private Toolbar toolbar;
private CustomSwipeAdapter adapter;
PhotoViewAttacher mAttacher;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_info);
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
viewPager = (ViewPager) findViewById(R.id.view_pager);
adapter = new CustomSwipeAdapter(this);
viewPager.setAdapter(adapter);
}
public class CustomSwipeAdapter extends PagerAdapter {
private int[] image_resources = {R.drawable.bsu, R.drawable.gameover2};
private Context context;
private LayoutInflater layoutInflater;
public CustomSwipeAdapter(Context context) {
this.context = context;
}
#Override
public int getCount() {
return image_resources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == (LinearLayout) object);
}
#Override
public Object instantiateItem(View container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View item_view = layoutInflater.inflate(R.layout.swipe_layout, (ViewGroup) container, false);
ImageView imageView = (ImageView) item_view.findViewById(R.id.image_view);
imageView.setPadding(5, 5, 5, 5);
imageView.setImageResource(image_resources[position]);
((ViewGroup) container).addView(item_view);
mAttacher = new PhotoViewAttacher(imageView);
mAttacher.update();
return item_view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
}
2.XML(swipe_layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#000"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
/>
</LinearLayout>
3.XML(My Activity's XML)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#FFF"
android:orientation="vertical"
tools:context="com.thesis.juandirection.juandirectionfinale.viewInfos.viewInfo">
<include
android:id="#id/app_bar"
layout="#layout/app_bar" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
What i want Is this effect..
Transparent toolbar.
I tried to put a listener to Linearlayout that when the user
clicked the layout it will hide the toolbar, but no luck.
Related
I try to made a example simple ViewPager app but Ive got error. I thought it was the image resolution fault but after changing ImageView as TextView and writing example text on it Ive got the same error. (after commented the ViewPAger implementation works fine)
channel '2d5df67 com.example.k.myapplication/com.example.k.myapplication.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
public class MainActivity extends AppCompatActivity {
List<String> list;
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = new ArrayList<>();
list.add("https://www.w3schools.com/css/trolltunga.jpg");
list.add("http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/1488980395_548_image.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/image.png");
list.add("https://www.w3schools.com/css/trolltunga.jpg");
list.add("http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/1488980395_548_image.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/image.png");
viewPager = (ViewPager)findViewById(R.id.viewPAger);
ViewPAgerAdapter adapter = new ViewPAgerAdapter(MainActivity.this,list);
viewPager.setAdapter(adapter);
}}
Adapter Class
public class ViewPAgerAdapter extends PagerAdapter {
private List<String> record;
private Context context;
private LayoutInflater inflater;
public ViewPAgerAdapter(Context context, List<String>record) {
this.record=record;
this.context=context;
inflater=(LayoutInflater)context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View view = inflater.inflate(R.layout.item,container);
ImageView img = (ImageView)view.findViewById(R.id.image);
Glide.with(context).load(record.get(position)).fitCenter().into(img);
container.addView(view);
return view;
}
#Override
public int getCount() {
return record.size();
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
}
Item layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/image"
/>
</LinearLayout>
activity layout
<LinearLayout 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"
tools:context="com.example.k.myapplication.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPAger"/>
</LinearLayout>
try adding this to your manifest -- android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize|mcc|mnc"
I need some advice. ViewPager showing just white page. I have searched much, but I couldn't find solution for my case.
I tried to make simple button, but I got same output. I think it's not image problem.
Here's my code.
public class IntroduceArticleFragment extends Fragment {
View view;
String depart;
String path;
int num;
CustomPagerAdapter customPagerAdapter;
ViewPager viewPager;
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_introduce_article, container, false);
view.setBackgroundColor(Color.WHITE);
depart = getArguments().getString("depart");
create();
//customPagerAdapter = new CustomPagerAdapter(getActivity());
viewPager = (ViewPager)view.findViewById(R.id.pager);
viewPager.setAdapter(customPagerAdapter);
return view;
}
void create(){
DBHelper dbHelper = new DBHelper(getActivity());
path = dbHelper.getContentsPath(depart);
num = dbHelper.getNum(depart);
customPagerAdapter = new CustomPagerAdapter(getActivity());
customPagerAdapter.mResources = new int[num];
for(int i=0;i<num;i++) {
String uri = "#drawable/" + path + "_" + Integer.toString(i);
int imageResource = getActivity().getResources().getIdentifier(uri, "drawabale", getActivity().getPackageName());
customPagerAdapter.mResources[i] = imageResource;
}
}
}
public class CustomPagerAdapter extends PagerAdapter {
Context mContext;
public int[] mResources;
public CustomPagerAdapter(Context context) {
super();
mContext = context;
}
#Override
public int getCount() {
return mResources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
LayoutInflater mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = mLayoutInflater.inflate(R.layout.pager_item_0, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.pagerimageView_0);
imageView.setImageResource(mResources[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
#Override
public void startUpdate(ViewGroup container) {
super.startUpdate(container);
}
#Override
public void finishUpdate(ViewGroup container) {
super.finishUpdate(container);
}
}
and here's xml code for ArticleFragment
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="visible">
</android.support.v4.view.ViewPager>
</LinearLayout>
</ScrollView>
</LinearLayout>
and here's xml code for
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:id="#+id/pagerimageView_0" />
</LinearLayout>
Ok... First of all you must set the android:layout_height of the ScrollView's child to wrap_content.
Second, Consider that you can't set android:layout_height of ViewPager to wrap_content. Unless you use a custom ViewPager. For Example you can check this answer
By setting android:fillViewport to true in ScrollView, The height of ScrollView's Child automatically will set to match_parent until its height become taller than screen.
And I don't get it why you set the height of ViewPager to 0dp and expect that it shows something!
Now your layout should be like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_pranet"
android:visibility="visible">
</android.support.v4.view.ViewPager>
</LinearLayout>
</ScrollView>
</LinearLayout>
I've spent half of day solving it and gets that my ViewPager have the same id with another ViewPager in another module in my app, so I've simply gave it another id.
You Have got it all wrong, use this code
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class CustomPagerAdapter extends FragmentStatePagerAdapter {
public int[] mResources;
public NewsAdapter(FragmentManager fm, int[] mResources) {
super(fm);
this.mNumOfTabs = mResources.length();
this.mResources = mResources;
}
#Override
public Fragment getItem(int position) {
return ContentFragment.newInstance(mResources[position]);
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
public class ContentFragment extends Fragment {
private Context context;
private int resource_id;
public static ContentFragment newInstance(int resourdid) {
Bundle args = new Bundle();
args.putInt("resource_id", resourdid);
ContentFragment fragment = new ContentFragment();
fragment.setArguments(args);
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
resource_id = getArguments().getInt("resource_id");
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(in.newswallet.R.layout.content_row, container, false);
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
initalize();
}
private void initalize(){
View itemView = getView();
ImageView imageView = (ImageView) itemView.findViewById(R.id.pagerimageView_0);
imageView.setImageResource(resource_id);
}
#Override
public void onAttach(Context context) {
super.onAttach(context);
this.context=context;
}
}
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="visible">
</android.support.v4.view.ViewPager>
try to change the android:layout_height = "0dp" to some value like android:layout_height = "50dp" or
give weight to the layout
android:layout_weight = "1"
Change:
container.removeView((LinearLayout) object);
With:
container.removeView((ConstraintLayout) object);
[ http://i.stack.imgur.com/Re29U.png]
left right swipe center value automatically checked and related table show in layout.
try this
MainActivity.java
public class MainActivity extends AppCompatActivity {
private TextView[] dots;
private LinearLayout dotsLayout;
// Declare Variables
ViewPager viewPager;
String[] CustomerNameList;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
CustomerNameList = new String[]{"xxxxx", "sssss", "aaaaaa", "ffffff", "gggggggg", "jjjjj"};
dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
addBottomDots(0);
// Locate the ViewPager in viewpager_main.xml
viewPager = (ViewPager) findViewById(R.id.first_customer_popup_view_pager);
// Pass results to ViewPagerAdapter Class
CustomPagerAdapter adapter = new CustomPagerAdapter(this, CustomerNameList);
// Binds the Adapter to the ViewPager
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
}
private void addBottomDots(int currentPage) {
dots = new TextView[CustomerNameList.length];
int colorsActive = Color.rgb(102, 41, 125);
int colorsInactive = Color.rgb(217, 217, 217);
dotsLayout.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(100);
dots[i].setTextColor(colorsInactive);
dotsLayout.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(colorsActive);
}
// viewpager change listener
ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
addBottomDots(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
};
}
CustomPagerAdapter.java
public class CustomPagerAdapter extends PagerAdapter {
private Context context;
private String[] CustomerNameList;
LayoutInflater inflater;
public CustomPagerAdapter(Context context,String[] CustomerNameList) {
this.context = context;
this.CustomerNameList = CustomerNameList;
}
#Override
public int getCount() {
return CustomerNameList.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
// Declare Variables
TextView AO_investments_list_popup_name;
TextView AO_investments_list_popup_na;
ListView all_listView;
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = inflater.inflate(R.layout.adapter_single_page, container, false);
// Locate the TextViews in viewpager_item.xml
AO_investments_list_popup_name = (TextView) itemView.findViewById(R.id.display);
AO_investments_list_popup_name.setText(CustomerNameList[position]);
((ViewPager) container).addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
// Remove viewpager_item.xml from ViewPager
((ViewPager) container).removeView((LinearLayout) object);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.agthamays.sof_1.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/first_customer_popup_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorAccent"
android:gravity="center|center_vertical"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
</LinearLayout>
adapter_single_page.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:id="#+id/display"
android:layout_width="wrap_content"
android:text="xxxx"
android:textSize="24dp"
android:paddingLeft="100dp"
android:textStyle="bold"
android:textColor="#color/colorAccent"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
I'm using ViewPager as image slider. I'm using Android Studio. Everything works fine, I can slide between images. However beneath my images I have for some reason white space. I know that you can't call wrap_content on ViewPager and I've tried to put the fragment which contains the image slider into an Activity with another fragment below the image-slider-fragment, but between them is still some weird white space and within the white space I can also swipe to another image, which would of course cause only problems later on:
fragment_home.xml:
<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"
tools:context="HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ImageSliderFragment"
android:id="#+id/fragment1"
tools:layout="#layout/fragment_image_slider"
android:layout_weight="2"/>
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="BottomFragment"
tools:layout="#layout/fragment_bottom"
android:id="#+id/fragment2"
android:layout_weight="2"/>
</LinearLayout>
</FrameLayout>
swipe_layout.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_view_of_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<!-- adjustviewBounds prevents non-defined padding -->
<TextView
android:id="#+id/text_view_of_swipe_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
</RelativeLayout>
fragment_image_slider.xml:
<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="wrap_content"
tools:context="ImageSliderFragment"
android:id="#+id/image_slide_id">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_of_image_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!--height="wrap_content/match_parent" both have the same result -->
</FrameLayout>
CustomSliderAdapter.java:
public class CustomSliderAdapter extends PagerAdapter {
private int[] image_res = {R.drawable.a,R.drawable.b,
R.drawable.c, R.drawable.d};
private String[] image_names = {"a", "b", "c", "d"};
private Context ctx;
private LayoutInflater layoutInflater;
public CustomSliderAdapter(Context ctx) {
this.ctx = ctx;
}
#Override
public int getCount() {
return image_res.length;
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == (RelativeLayout) object);
}
#Override
public Object instantiateItem(final ViewGroup container, final int position) {
layoutInflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.swipe_layout, container, false);
ImageView imageView = (ImageView) view.findViewById(R.id.image_view_of_slider);
TextView textView = (TextView) view.findViewById(R.id.text_view_of_swipe_layout);
imageView.setImageResource(image_res[position]);
textView.setText(image_names[position]);
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((RelativeLayout) object);
}
}
ImageSliderFragment.class:
public class ImageSliderFragment extends Fragment {
ViewPager viewPager;
CustomSliderAdapter adapter;
View myView;
public static int imageHeight;
public ImageSliderFragment() {}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if(myView==null) {
myView = inflater.inflate(R.layout.fragment_image_slider, container, false);
viewPager = (ViewPager) myView.findViewById(R.id.view_pager_of_image_slider);
adapter = new CustomSliderAdapter(getActivity());
//With this I could set height of ViewPager manually
ViewGroup.LayoutParams params = viewPager.getLayoutParams();
params.height = imageHeight;
viewPager.setLayoutParams(params);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
viewPager.setAdapter(adapter);
} else {
((ViewGroup) myView.getParent()).removeView(myView);
}
return myView;
}
}
How activity looks
I've also tried to change the height of my xml file with numbers (f.e.200dp), which works, but there are so many different device screens that at some point it would get at some point messed up
So again my problem is: make ViewPager fit to Imageview,because I can swipe between images also in the white space.
Help is much appreciated!
You can try like this on your imageview for viewpager image ....
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" />
I am trying to put a carousel on my top half of Android screen.
I like Bootstrap carousels like:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
I am not sure the best way to approach this? Do I use a GridView in top half of my screen??
First you must create a Viewpager into your xml like:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#+id/relativeLayout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
For a custom Adapter you need to create a res/layout/pager_item.xml which will be used to inflate and generate a view into Adapter:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView" />
</LinearLayout>
After that, you can create the custom Adapter to set your ViewPager:
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
private LayoutInflater mLayoutInflater;
private int[] mResources;
public CustomPagerAdapter(Context context, int[] resources) {
mContext = context;
mResources = resources;
mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mResources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
imageView.setImageResource(mResources[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
Then put the following code into onCreate in your Activity:
mViewPager = (ViewPager) findViewById(R.id.pager);
// This is just an example. You can use whatever collection of images.
int[] mResources = {
R.drawable.first,
R.drawable.second,
R.drawable.third,
R.drawable.fourth,
R.drawable.fifth,
R.drawable.sixth
};
CustomPagerAdapter mCustomPagerAdapter = new CustomPagerAdapter(this, mResources);
mViewPager.setAdapter(mCustomPagerAdapter);
Take a look the following tutorial for more details: http://codetheory.in/android-image-slideshow-using-viewpager-pageradapter/
Of simply use Android Image Slider, it's a beautiful and simple to use Library :
https://github.com/daimajia/AndroidImageSlider