Hey guys I have already made few apps and doing exactly the same this time though I am getting errors. Please check my logcat below
Code:
05-04 07:35:41.888: E/AndroidRuntime(1066): android.content.ActivityNotFoundException: No Activity found to handle Intent { act=com.droidacid.count.COUNT }
This is my java code of main class
Code:
package com.droidacid.count;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class mainMenu extends Activity {
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_menu);
Button count = (Button) findViewById(R.id.count);
try{
bapticalc.setOnClickListener(new View.OnClickListener() {
[user=439709]@override[/user]
public void onClick(View v) {
// TODO Auto-generated method stub
startActivity(new Intent("com.droidacid.count.COUNT"));
}
});
}
catch(Exception e)
{
e.printStackTrace();
}
}
}
this is my count class code
Code:
package com.droidacid.count;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class system extends Activity{
Button system;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.apticalc);
system = (Button) findViewById(R.id.system);
system.setOnClickListener(new View.OnClickListener() {
[user=439709]@override[/user]
public void onClick(View v) {
// TODO Auto-generated method stub
startActivity(new Intent("com.droidacid.count.SYSTEM"));
}
});
}
}
And atlast this is my android manifest code
Code:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.droidacid.count"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".mainMenu"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".count"
android:label="@string/app_name"
>
<intent-filter>
<action android:name="com.example.sweet_memories.COUNT" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
</application>
</manifest>
I am really sorry for such a long question guys but really wanted to state everything happening with me...Also I would really appreciate if someone would help me on how to check logcat properly for errors?
So, from your mainMenu you are sending an intent to start the "count", is that the activity that you have named system?
Code:
public class system extends Activity
and in the "system" activity you are trying to start itself? And you also have a button named system?
I think you should rename the class "system" to "count", eclipse will offer you to change the compilation unit to count automatically. And I shouldn't name a button system, maybe mBtnSystem or something like that.
thanks problem solved
coolbud012 said:
thanks problem solved
Click to expand...
Click to collapse
Great. Please add [solved] to the thread title.
IF YOU MAKE USE OF THIS GUIDE AND YOU WILL MAKE PUBLIC YOUR APPLICATION, PLEASE THANK THE OP AND GIVE ME & ENRICOCID CREDITS/MENTION . THANK YOU
1) Set Up Jake Wharton ViewPagerIndicator
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
IF YOU WANNA DOWNLOAD MY SAMPLE APP GO HERE:
http://forum.xda-developers.com/showpost.php?p=45742129&postcount=4
SITE>>>http://viewpagerindicator.com/<<<SITE
1 - Download JakeWharton ViewPagerIndicator:
Download from here: JakeWharton ViewPagerIndicator download
Or from the website: http://viewpagerindicator.com/
2 - OPEN ECLIPSE
First you need to extract "library" folder from the zip and save it in your documents folder, like the picture below:
Now drag & drop "library" folder to your Documents directory:
- Import downloaded ViewPagerIndicator Library to your workspace:
GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE:
- Click next button and browse directory (1) to select the downloaded ViewPagerIndicator Library (2):
(1) CLICK BROWSE...
(2) AND SELECT "LIBRARY" FOLDER, GO TO Libraries > My Documents > Library, click OK.
Now give a name to this project (for example "ViewPagerIndicator") and check "Copy project into workspace", like the picture:
Click "Finish"
If you like my work don't Forget To Hit Thanks, five star
:good: or offer me a beer :good:
Make a donation
2) How to load VievPagerIndicator to Your Project
- Create a new Android Application Project:
- Give a name to your project (for example "ViewPagerTest"), like the picture below:
- Go next and click finish to create the project
- Now navigate to your project properties:
- Go to Android and Click "Add" to load the library into your project:
You will receive an error:
To fix this error you have two options:
- 1) delete the libs folder of your project:
- 2) [RECOMENDED]The best way is to copy the android-support-v4.jar from sdk/extras/android/support/v4 to your workspace/ViewPagerIndicator/libs folder, without deleting libs folder of your project!!!
If you have other errors like this:
go to ViewPagerIndicator properties and change the "Project Build Target". This must be equal to that of the ViewPagerTest project:
---------- Post added at 08:28 PM ---------- Previous post was at 08:27 PM ----------
3) Create Layouts
Blue = Add
Red = Delete
- Now go to res > layout
and edit activity_main.xml deleting the entire code:
Code:
[COLOR="red"]<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: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=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</RelativeLayout>[/COLOR]
Copy & paste the code below to your activity_main.xml
Code:
[COLOR="Blue"]<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.viewpagerindicator.TitlePageIndicator
android:id="@+id/indicator"
android:padding="10dip"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="#000000"
android:textColor="#2FB3E3"
app:footerColor="#2FB3E3"
app:footerLineHeight="1dp"
app:footerIndicatorHeight="3dp"
app:footerIndicatorStyle="underline"
app:selectedColor="#FFFFFF"
app:selectedBold="true"
/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>[/COLOR]
Now create new .xml files in your layout folder (I will create 3 layouts for example). Go to New > other
and select "Android XML file":
Give a name to your xml file (for example "layout1") and select linear layout, click finish. See the picture:
Create two other layouts and call them "layout2" and "layout3":
4)Implement ViewPager using fragments
Blue = Add
Red = Delete
Now go to src > com.example.viewpagertest and edit MainActivity.java
Delete the content marked in red:
Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]
[COLOR="Red"]import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
[user=439709]@override[/user]
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;
}
}[/COLOR]
and add the following code:
Code:
[COLOR="blue"]import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
[user=439709]@override[/user]
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;
}
}[/COLOR]
The result:
Code:
package com.example.viewpagertest;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
[user=439709]@override[/user]
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;
}
}
Now you have to create three fragments into src > com.example.viewpagertest folder:
- go to new > other:
and create three classes named "FirstActivity", "SecondActivity" and "ThirdActivity" like the picture below:
Now edit FirstActivity.java in src > com.example.viewpagertest folder and delete the red code:
Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]
[COLOR="Red"]public class FragmentAdapter {
}[/COLOR]
and add the following code:
Code:
package com.example.viewpagertest;
[COLOR="Blue"]import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FirstActivity extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v = inflater.inflate(R.layout.layout1, null);
return v;
}
}
[/COLOR]
For the SecondActivity class:
Code:
package com.example.viewpagertest;
import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SecondActivity extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v = inflater.inflate(R.layout.layout2, null);
return v;
}
}
For the ThirdActivity class:
Code:
package com.example.viewpagertest;
import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ThirdActivity extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View v = inflater.inflate(R.layout.layout3, null);
return v;
}
}
Now we need to create a new class called "FragmentAdapter.java" into src > com.example.viewpagertest folder:
- go to new > other:
and create a new class called "FragmentAdapter" like the pictures:
click finish.
Now edit the FragmentAdapter.java in src > com.example.viewpagertest folder and delete the red code:
Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]
[COLOR="Red"]public class FragmentAdapter {
}[/COLOR]
and add the following code:
Code:
package com.example.viewpagertest;
[COLOR="blue"]import com.viewpagerindicator.IconPagerAdapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatPagerAdapter;
public class FragmentAdapter extends FragmentStatPagerAdapter implements IconPagerAdapter{
public FragmentAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
[user=439709]@override[/user]
public int getIconResId(int index) {
// TODO Auto-generated method stub
return 0;
}
[user=439709]@override[/user]
public Fragment getItem(int position)
{
// TODO Auto-generated method stub
Fragment fragment = new FirstActivity();
switch(position){
case 0:
fragment = new FirstActivity();
break;
case 1:
fragment = new SecondActivity();
break;
case 2:
fragment = new ThirdActivity();
break;
}
return fragment;
}
[user=439709]@override[/user]
public int getCount() {
// TODO Auto-generated method stub
return 3;
}
[user=439709]@override[/user]
public CharSequence getPageTitle(int position){
String title = "";
switch(position){
case 0:
title = "First";
break;
case 1:
title = "Second";
break;
case 2:
title = "Third";
break;
}
return title;
}
}[/COLOR]
Save the entire project! Enjoy your App!!!
SAMPLE APP:
>>>DOWNLOAD<<<
JAKE WHARTON VIEW PAGER INDICATOR GITHUB:
https://github.com/JakeWharton/Android-ViewPagerIndicator
CREDITS:
- me
- enricocid
- Jake Warthon
Thanks to Xda!
ivn888 said:
CREDITS:
- me
- enricocid
- Jake Warthon
Thanks to Xda!
Click to expand...
Click to collapse
grandi ,ottimo lavoro
Awesome!! I badly needed this.. Thanks for the guide
Suppose I want to add pics and some strings for each layout, how do I do that?? Can you give an example for this also..?? thanks
rakz992 said:
Awesome!! I badly needed this.. Thanks for the guide
Suppose I want to add pics and some strings for each layout, how do I do that?? Can you give an example for this also..?? thanks
Click to expand...
Click to collapse
You can use the ImageView to display images in your Application.There are many different configuration options and many screens from different devices that you should take into account. I write a little guide using my viewer app.
EXAMPLE:
First to use imageview you have to add resources, in Eclipse navigate to res/values/strings.xml.
Edit the strings.xml
This is the content of string.xml:
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ViewPagerTest</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
</resources>
Add the following string:
Code:
[COLOR="Blue"]<string name="content">image</string>[/COLOR]
Like this:
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ViewPagerTest</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
[COLOR="blue"]<string name="content">image</string>[/COLOR]
</resources>
Now you have to add a picture in the appropriate project folder, as you would have noticed there are 5 folders that contain the image resources of the project :
res/drawable-hdpi
res/drawable-ldpi
res/drawable-mdpi
res/drawable-xhdpi
res/drawable-xxhdpi
You can copy the images you want to put in you’re application in any one of these folders. Android SDK will automatically recognize any images you put on any one of these folders as drawable resources. Refer to official Android’s Drawable Resource and Screen Support to understand of how image works in Android.
Inside these folder there are default project .pngs. Now i use them to show you on how to add pict. The pictures are named ic_launcher.png
Now open layout1.xml
This is the blank layout:
Code:
<?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" >
</LinearLayout>
and add the following code:
Code:
[COLOR="Blue"]<ImageView
android:id="@+id/image"
android:contentDescription="@string/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />[/COLOR]
Like this:
Code:
<?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" >
[COLOR="blue"]<ImageView
android:id="@+id/image"
android:contentDescription="@string/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />[/COLOR]
</LinearLayout>
Now you may open the Graphical layout editor to preview your UI:
--------------------------------------------------------------------------------------------------------------
1) Resources: string.xml, <string name="content">image</string>
2) Your_image
3) Use imageview to image to your layout:
<ImageView
android:id="@+id/image"
android:contentDescription="@string/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/Your_image" />[/COLOR]
@ivn888: We cannot see your pictures. You ran out of bandwidth.
nikwen said:
@ivn888: We cannot see your pictures. You ran out of bandwidth.
Click to expand...
Click to collapse
we are working to fix this problem... thanks
bro another help here
i want to add Zoom-out page transformer animation for slide from one layout to other..
should i replace mAdapter with this
pager.setPageTransformer(true, new ZoomOutPageTransformer());
can you help me on how to do it ?
thank you
rakz992 said:
bro another help here
i want to add Zoom-out page transformer animation for slide from one layout to other..
should i replace mAdapter with this
pager.setPageTransformer(true, new ZoomOutPageTransformer());
can you help me on how to do it ?
thank you
Click to expand...
Click to collapse
Tomorrow i will release a short guide on how to add this animation...
ivn888 said:
Tomorrow i will release a short guide on how to add this animation...
Click to expand...
Click to collapse
:highfive:
ivn888 said:
Tomorrow i will release a short guide on how to add this animation...
Click to expand...
Click to collapse
Thanks a lot
Customize the Animation with PageTransformer - How to add Zoom-out page transformer
Reference here: http://developer.android.com/training/animation/screen-slide.html#pagetransformer
- What you need:
- NineOldAndroids library:
>>>Download here<<<
Site>>>http://nineoldandroids.com/<<<Site
- ZoomOutPageTransformer.java
>>>Download here<<<
1) First you need to extract "library" folder from the zip and save it in your documents folder, like the picture below:
2) Now drag & drop "library" folder to your Documents directory,i will rename it "library_1":
3) Import downloaded NineOld Library to your workspace:
GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE
4) Click next button and browse directory to select the downloaded Library:
(1) CLICK BROWSE...
(2) AND SELECT "LIBRARY" FOLDER, GO TO Libraries > My Documents > Library_1, click OK.
5) Now give a name to this project (for example "Library_1 or "NineOld") and check "Copy project into workspace"
follow the first post to understand "how import libs": http://forum.xda-developers.com/showpost.php?p=45742000&postcount=1
EXAMPLE APP:
Copy the ZoomOutPageTransformer.java to your src/com.example.viewpagertest/ folder or create a class named ZoomOutPageTransformer:
Code:
package com.example.viewpagertest;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
[COLOR="green"]import com.nineoldandroids.view.ViewHelper;[/COLOR]
public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.85f;
private static float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
[COLOR="green"]ViewHelper[/COLOR].setAlpha(view, 0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
[COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, horzMargin - vertMargin / 2);
} else {
[COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, -horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
[COLOR="green"]ViewHelper[/COLOR].setScaleX(view, scaleFactor);
[COLOR="green"]ViewHelper[/COLOR].setScaleY(view, scaleFactor);
// Fade the page relative to its size.
[COLOR="green"]ViewHelper[/COLOR].setAlpha(view, MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
[COLOR="green"]ViewHelper[/COLOR].setAlpha(view, 0);
}
}
}
If you have deleted the "libs" folder of your project, go to workspace/ViewPagerTest/ make a new folder called "libs" and put the android-support-v4.jar (you will find it in sdk/extras/android/support/v4 folder), copy the same file (android-support-v4.jar) in workspace/ViewPagerIndicator/libs folder.
Now go to library_1 options and check the correct project build target and "Is library":
Load the library into your project.
THE CODE
blue = add
red = delete
Now i will make an xml file called "colors" in res/values folder:
Code:
[COLOR="Blue"]<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="red">#F75D59</color>
<color name="blue">#0000FF</color>
<color name="orange">#dc5a1e</color>
</resources>[/COLOR]
add the following code to layout1:
Code:
<?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"
[COLOR="blue"]android:background="@color/red"[/COLOR]>
</LinearLayout>
layout2:
Code:
<?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"
[COLOR="blue"]android:background="@color/blue" >[/COLOR]
</LinearLayout>
layout3:
Code:
<?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"
[COLOR="blue"]android:background="@color/orange">[/COLOR]
</LinearLayout>
Now open the MainActivity.java:
Code:
package com.example.viewpagertest;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
[user=439709]@override[/user]
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;
}
}
and add the blue lines like this:
Code:
package com.example.viewpagertest;
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;
public class MainActivity extends FragmentActivity {
FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new FragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
[COLOR="blue"]mPager.setPageTransformer(true, new ZoomOutPageTransformer ());[/COLOR]
}
[user=439709]@override[/user]
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;
}
}
ZoomOutPageTransformer example app - ViewPagerTest+zoomout.apk
>>>DOWNLOAD ZoomOutPageTransformer example app here <<<
If you wanna try other animations please go here: http://developer.android.com/training/animation/screen-slide.html
or use other libs like transitionviewpager and JazzyViewPager
Using DepthPageTransformer
Create a class called DepthPageTransformer in src/.../ folder and add the following:
Code:
package com.example.viewpagertest;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
//import com.nineoldandroids.view.ViewHelper;
public class DepthPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
In your MainActivity.java add the blue code:
Code:
[user=439709]@override[/user]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
...
[COLOR="Blue"] mPager.setPageTransformer(true, new DepthPageTransformer ());[/COLOR]
...
...
}
How to use addPreferencesFromResource(R.xml.preferences); in these fragments with action bar sherlock? I tried to make work, but... But implented ABS in my app.
ivn888 said:
4)Implement ViewPager using fragments code:
[package com.example.viewpagertest;
[import com.viewpagerindicator.IconPagerAdapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatPagerAdapter;
public class FragmentAdapter extends FragmentStatPagerAdapter implements IconPagerAdapter{
Click to expand...
Click to collapse
its FragmentStatePagerAdapter (instead of FragmentStatPagerAdapter) and Override (instead of override)
i think u made these two small mistakes. bt the tutorial is awesome.. was looking for this
Adding Aminations To Give Your Application A Cool Strike :good:
Here I have mentioned some Cool Animations Effects.
[Note: Assuming the package name to be package.name.here and created a folder named anim in /res/.
Blink Effect
Code:
[QUOTE]
[B]Java Code[/B] [BlinkActivity.java]
package package.name.here;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
public class BlinkActivity extends Activity implements AnimationListener {
TextView txtMessage;
Button btnStart;
// Animation
Animation animBlink;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_blink);
txtMessage = (TextView) findViewById(R.id.txtMessage);
btnStart = (Button) findViewById(R.id.btnStart);
// load the animation
animBlink = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.blink);
// set animation listener
animBlink.setAnimationListener(this);
// button click event
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animBlink);
}
});
}
@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// check for blink animation
if (animation == animBlink) {
}
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationStart(Animation animation) {
}
}
[B]XML Code[/B] [activity_blink.xml in [COLOR="green"]res/layout/[/COLOR] folder]
<?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">
<TextView android:id="@+id/txtMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is fadein animation"
android:layout_centerInParent="true"
android:textSize="25dp"
android:padding="20dp"
android:background="#000000"
android:visibility="gone"/>
<Button android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:layout_marginTop="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"/>
</RelativeLayout>
[B]XML Code[/B] [Blink.xml in [COLOR="green"]res/anim/[/COLOR] folder]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>
[/QUOTE]
FadeOut Effect
Code:
[QUOTE]
[B]Java Code[/B] [FadeOutActivity.java]
package info.androidhive.androidanimations;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
public class FadeOutActivity extends Activity implements AnimationListener {
TextView txtMessage;
Button btnStart;
// Animation
Animation animFadeOut;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fadeout);
txtMessage = (TextView) findViewById(R.id.txtMessage);
btnStart = (Button) findViewById(R.id.btnStart);
// load the animation
animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_out);
// set animation listener
animFadeOut.setAnimationListener(this);
// button click event
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// start the animation
txtMessage.startAnimation(animFadeOut);
}
});
}
@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// check for fade out animation
if (animation == animFadeOut) {
Toast.makeText(getApplicationContext(), "Animation Stopped",
Toast.LENGTH_SHORT).show();
}
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
}
[B]XML Code[/B] [activity_fadeout.xml in [COLOR="green"]res/layout/[/COLOR] folder]
<?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">
<TextView android:id="@+id/txtMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is fadeout animation"
android:layout_centerInParent="true"
android:textSize="25dp"/>
<Button android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start Animation"
android:layout_marginTop="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"/>
</RelativeLayout>
[B]XML Code[/B] [fade_out.xml in [COLOR="green"]res/anim[/COLOR] folder]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
[/QUOTE]
CrossFade Effect
Code:
[QUOTE]
[B]Java Code[/B] [CrossFadeActivity.java]
package package.name.here;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
public class CrossfadeActivity extends Activity implements AnimationListener {
TextView txtMessage1, txtMessage2;
Button btnStart;
// Animation
Animation animFadeIn, animFadeOut;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crossfade);
txtMessage1 = (TextView) findViewById(R.id.txtMessage1);
txtMessage2 = (TextView) findViewById(R.id.txtMessage2);
btnStart = (Button) findViewById(R.id.btnStart);
// load animations
animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_out);
// set animation listeners
animFadeIn.setAnimationListener(this);
animFadeOut.setAnimationListener(this);
// button click event
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// make fade in element visible
txtMessage2.setVisibility(View.VISIBLE);
// start fade in animation
txtMessage2.startAnimation(animFadeIn);
// start fade out animation
txtMessage1.startAnimation(animFadeOut);
}
});
}
@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// if animation is fade out hide them after completing animation
if (animation == animFadeOut) {
// hide faded out element
txtMessage1.setVisibility(View.GONE);
}
if(animation == animFadeIn){
// do something after fade in completed
// set visibility of fade in element
txtMessage2.setVisibility(View.VISIBLE);
}
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
}
[B]XML Code[/B] [activity_crossfade.xml in [COLOR="green"]res/layout/[/COLOR] folder]
<?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">
<TextView android:id="@+id/txtMessage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This text will fade out"
android:layout_centerInParent="true"
android:textSize="25dp"/>
<TextView android:id="@+id/txtMessage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This text will fade in"
android:layout_centerInParent="true"
android:textSize="25dp"
android:visibility="gone"/>
<Button android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start Animation"
android:layout_marginTop="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"/>
</RelativeLayout>
[B]NOTE:No need to create any xml in anim folder for crossfade because it uses fadein and fadeout xml files from anim folder][/B]
[/QUOTE]
FadeIn Effect
Code:
[QUOTE]
[B]Java Code[/B] [FadeInActivity.java]
package package.name.here;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
public class FadeInActivity extends Activity implements AnimationListener {
TextView txtMessage;
Button btnStart;
// Animation
Animation animFadein;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fadein);
txtMessage = (TextView) findViewById(R.id.txtMessage);
btnStart = (Button) findViewById(R.id.btnStart);
// load the animation
animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
// set animation listener
animFadein.setAnimationListener(this);
// button click event
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animFadein);
}
});
}
@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// check for fade in animation
if (animation == animFadein) {
Toast.makeText(getApplicationContext(), "Animation Stopped",
Toast.LENGTH_SHORT).show();
}
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
}
[B]XML Code[/B] [activity_fadein.xml in [COLOR="green"]res/layout/[/COLOR] folder]
<?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">
<TextView android:id="@+id/txtMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is fadein animation"
android:layout_centerInParent="true"
android:textSize="25dp"
android:visibility="gone"/>
<Button android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start Animation"
android:layout_marginTop="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"/>
</RelativeLayout>
[B]XML Code[/B] [fade_in.xml in [COLOR="green"]res/anim/[/COLOR] folder]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
[/QUOTE]
Also Check Out Adding Animations To Your Application [Part 2]:victory:
Please correct me if the code goes wrong somewhere.
Saurabh Shah
----------------------------------------------------------------
Hit Thanks :good:
a-ssassi-n said:
Adding Aminations To Give Your Application A Cool Strike :good:
Here I have mentioned some Cool Animations Effects.
Blink Effect
Code:
FadeOut Effect
Code:
CrossFade Effect
Code:
FadeIn Effect
Code:
More Effects coming soon on my next Post :victory: .
Please correct me if the code goes wrong somewhere.
A-ssassi-N
----------------------------------------------------------------
Hit Thanks :good:
Click to expand...
Click to collapse
nice :good:
Sorry, do not understand how to use your codes?
I'm confused
yvesadriel said:
nice :good:
Click to expand...
Click to collapse
English> Wanted a tutorial teaching best to apply the animations do not quite understand! sorry my bad english. Thanks
Portugues Brazil> Queria um tutorial ensinando melhor a aplicar as animações, não entendi muito bem ! desculpe meu mau ingles. Obrigada
Very nice OP!
I use these animations in my app.
Slide in left:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="-100%p" android:toXDelta="0%p" android:duration="250" />
</set>
Slide in right:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="100%p" android:toXDelta="0%p" android:duration="250" />
</set>
Slide out left:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="0%p" android:toXDelta="-100%p" android:duration="250" />
</set>
Slide out right:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="250" />
</set>
I call them like so in base activity:
Code:
void slideInLeft(final View view) {
leftAnim = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
leftAnim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(final Animation animation) {
}
@Override
public void onAnimationRepeat(final Animation animation) {
}
@Override
public void onAnimationEnd(final Animation animation) {
}
});
view.startAnimation(leftAnim);
}
Nice guide! :good:
but there are already a couple of open source animations available like PropertyAnimation or the Android3DFlipTransition for instance. Maybe you can include those, too!
And also, you might want to make a section for animations in a list view as well (like the ListViewAnimations or the SugaredListAnimations)
agentdr8 said:
Very nice OP!
Click to expand...
Click to collapse
Thanks
blinoff82 said:
Sorry, do not understand how to use your codes?
Click to expand...
Click to collapse
Choose the animation you would like to use for you application.
Create a Android application project with blank activity.
[Note: Assuming that your package name is example.package]
Copy the Java Code to src/example.package/MainActivity.java
Copy the XML Code to res/layout/activity_main.xml
BUILD. DONE.
Saurabh Shah
----------------------------------------------------------------
Hit Thanks :good:
SimplicityApks said:
Nice guide! :good:
but there are already a couple of open source animations available like PropertyAnimation or the Android3DFlipTransition for instance. Maybe you can include those, too!
And also, you might want to make a section for animations in a list view as well (like the ListViewAnimations or the SugaredListAnimations)
Click to expand...
Click to collapse
Android3DFlipTransition is Awesome man
Thankyou for suggestion
i would realy like to see some viewager animations /transitions we can apply in transfromPage()
Thanks for making this guide. I look forward to seeing more animations in the future. I've posted this guide to the XDA Portal.
Thanks
willverduzco said:
Thanks for making this guide. I look forward to seeing more animations in the future. I've posted this guide to the XDA Portal.
Click to expand...
Click to collapse
Thank you very much.
Thank you for that!!
But what is that empty if (anim == ...) for??
You have to add Property Animations(and NineOldAndroids library), they are really significant to animating applications nowadays.
Thanks for the guide! Very useful and easy to follow, all in one place! :thumbup:
noted to self thrice
Nevermind managed to fix it
Here are the problems
1.progressbar doesnt shows up even toast is showing
2.toast vanishes after 47%
3.actionbar doesnt hides as expected
4.how to make an update method so that when user clicks link progressbar again starts from 0-100
Code:
package com.me.myblog;
import android.app.*;
import android.os.*;
import android.view.*;
import android.webkit.*;
import android.widget.*;
public class MainActivity extends Activity
{WebView mWebView;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient());
ProgressBar p=(ProgressBar) findViewById(R.id.p);
mWebView.loadUrl("http://www.samsunggalaxyminiroms.blogspot.com");
for(double i=0.0;i<=mWebView.getProgress();i++){Toast.makeText(MainActivity.this,"loading \n"+i+"%",5000).show();p.setProgress(Math.round(Math.round(i)));if(i>=50.0){requestWindowFeature(Window.FEATURE_NO_TITLE);}}
}@Override // Detect when the back button is pressed
public void onBackPressed() { if(mWebView.canGoBack()) { mWebView.goBack(); } else { // Let the system handle the back button
super.onBackPressed();
} }
}
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ProgressBar
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="@+id/p"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<WebView android:id="@+id/activity_main_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
Sent from my GT-S5570 using XDA Premium 4 mobile app
Problems solved
Another problem
Is it possible to load posts of blog in cards ui?if yes how?
Sent from my GT-S5570 using XDA Premium 4 mobile app
Final Output would look like this(gif) : http://imgur.com/mVcQv1l
(Or have a look in the attachments)
A Simple Tutorial on using CollapsingToolbarLayout with ViewPager.I'll try to keep it in brief.
So,first of all add the following to your dependencies in build.gradle(Module: app)
compile 'com.android.support:design:23.4.0'
Click to expand...
Click to collapse
Open your activity_main.xml and write this:-
<?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"
android:id="@+id/maincontent"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
>
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
/></android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
Click to expand...
Click to collapse
Note:-
●You can change the color of scrim by changing "app:contentScrim" in the above xml or dynamically in the MainActivity.java by,
Code:
collapsingToolbar.setContentScrimColor(getResources().getColor(R.color.COLORYOUWANT));
●To change the position of CollapsingToolbarLayout,you can change the following attributes:
Code:
app:expandedTitleMarginStart="SIZEYOUWANTdp"
app:expandedTitleMarginEnd="SIZEYOUWANTdp"
Now create new xml files,that'll be the pages of your ViewPager
For Example,create page1.xml and page2.xml
Keep the contents of the pages in NestedScrollView otherwise CollapsingToolbarLayout will not be collapsing when using ViewPager (You can use RecyclerView also.)
page1.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android: orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_gravity="fill_vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="PAGE 1"
android:textAlignment="center"
android:textSize="40sp"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginTop="210dp" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
Click to expand...
Click to collapse
*Assuming you know the basics about ViewPager*
Now create Adapter and Model for your ViewPager.
Create a new class,named customadapter.
customadapter.java
Code:
import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by theprakhar on 04-06-2017.
*/
public class customadaptar extends PagerAdapter
{
private Context mContext;
public customadaptar(Context context) {
mContext = context;
}
@Override
public Object instantiateItem(ViewGroup collection, int position) {
custommodel modelObject = custommodel.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
collection.addView(layout);
return layout;
}
@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
@Override
public int getCount() {
return custommodel.values().length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
custommodel customPagerEnum = custommodel.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());}
public Parcelable saveState() {
// Do Nothing
return null;
}
}
Now create an enum,name it custommodel.That'll be the model for the viewpager where we'll link the layouts of the different pages.
custommodel.java
Code:
public enum custommodel {
PAGEONE(R.string.pageone, R.layout.page1),
PAGETWO(R.string.pagetwo, R.layout.page2);
private int mTitleResId;
private int mLayoutResId;
custommodel(int titleResId, int layoutResId) {
mTitleResId = titleResId;
mLayoutResId = layoutResId;
}
public int getTitleResId() {
return mTitleResId;
}
public int getLayoutResId() {
return mLayoutResId;
}
}
Now place the header image in the drawable folder,and now we'll dynamically set image in ImageView in MainActivity (Though you can directly do in that xml)
*If you do not want an image in your Collapsing Toolbar,simply remove the ImageView inside CollapsingToolbarLayout.*
**TIP:-Try to keep the size of the image below 100KB for smooth scroll**
Now head on to MainActivity.java and set up ViewPager and CollapsingToolbar.
MainActivity.java
Code:
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
CollapsingToolbarLayout collapsingToolbar;
ImageView image;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(new customadaptar(this));
image = (ImageView)findViewById(R.id.header);
image.setImageResource(R.drawable.header);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.htab_collapse_toolbar);
collapsingToolbar.setTitle("Collapsing Toolbar Example");
}
}
Go run and test your code.You did it,bruh.
Github(Download Source Code) :-https://github.com/theprakhar/collapsingtoolbarlayoutexample
Hit that thanks button if it helped.Feel free to ask if you have any questions regarding this.