This is an idea I’ve been having for a while now, Its basically an app that displays the news locally, (Kenyan News). Also still in design phase… but I tried out a Horizontal ListView, ViewPager, Alot off internet stuff, downloading images….SQlite. Here are the screenshots of the progress so far:
Day 0/14
Day 1/14:
Day 2/14 – added a header and some more animations and colors.
So we found out how to use the ViewPager here and so next is how to customise the ViewPager indicator to match with your app’s theme – all the colors and stuff. If you haven’t already, please check the previous blog post. This is the continuation
We are going to build a style, which we will reference in the manifest as the Activity’s theme.
<resources>
<style name="StyledIndicators" parent="@android:style/Theme.Light.NoTitleBar">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">@drawable/custom_tab_indicator</item>
<item name="android:textColor">#FF555555</item>
</style>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:drawable="@drawable/custom_tab_indicator_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/custom_tab_indicator_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
<!-- Focused states -->
<item android:drawable="@drawable/custom_tab_indicator_unselected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/custom_tab_indicator_selected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
<!-- Pressed -->
<!-- Non focused states -->
<item android:drawable="@drawable/custom_tab_indicator_unselected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/custom_tab_indicator_selected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>
<!-- Focused states -->
<item android:drawable="@drawable/custom_tab_indicator_unselected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/custom_tab_indicator_selected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>
</selector>
The images are here. Download them and place in your drawable folder. You can photoshop them to get the right color you want.
Lastly at the manifest, add the following theme in your activity tag.
android:theme="@style/StyledIndicators"
And So you should have:
<activity
android:name=".MainActivity"
android:theme="@style/StyledIndicators"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Here is a screenshot.
So this is the first on the series on android open source libraries that I have come across. The ViewPager is used in alot of apps. It allows you to swipe across the screen to change the layout or move to the next page, sort of like tabs but not really. Its used in alot of apps, Google play store app uses it.
Im going to use Jake Wharton ViewPagerIndicator.
Click on the ‘Add’ button then choose Library – the folder we imported into your workspace.We are now good to go. There are two things involved here: a ViewPager and an Indicator. The ViewPager is the main page while the indicator is sort of like the tab (in this case).
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
<!-- page.xml -->
<?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" >
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<a href="https://mycodeandlife.files.wordpress.com/2012/09/device-2012-09-27-204357.png"><img src="https://mycodeandlife.files.wordpress.com/2012/09/device-2012-09-27-204357.png?w=200" alt="" title="device-2012-09-27-204357" width="200" height="300" class="aligncenter size-medium wp-image-300" /></a>
<TextView
android:id="@+id/tvdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Description" />
</LinearLayout>
On the java side we have MainActivity.java
package com.gilo.viewpagerexample;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import com.viewpagerindicator.TabPageIndicator;
public class MainActivity extends Activity{
//these are the titles that will appear on the "tabs"
final String[] page_titles = new String[]{"Home", "Me", "Apps", "Android", "About"};
//this will go the description TextView
final String[] desc = new String[]{
"This is the homepage the first one you will see.",
"I'm pretty much me for now I run this really cool blog you should check it out at mycodeandlife.wordpress.com",
"I build appps mostly for fun. If you ever want an app just holla",
"This is the android section",
"This blog is my journal through life in code and development"
};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Instantiating the adapter
GiloAdapter mAdapter = new GiloAdapter(this);
//instantiate the Views
ViewPager mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
TabPageIndicator mIndicator = (TabPageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
private class GiloAdapter extends PagerAdapter{
Context context;
public GiloAdapter(Context c){
this.context = c;
}
//This is the number of pages -- 5
@Override
public int getCount() {
// TODO Auto-generated method stub
return page_titles.length;
}
@Override
public boolean isViewFromObject(View v, Object o) {
// TODO Auto-generated method stub
return v.equals(o);
}
//This is the title of the page that will apppear on the "tab"
public CharSequence getPageTitle(int position) {
return page_titles[position];
}
//This is where all the magic happen
public Object instantiateItem(View pager, int position) {
final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.page, null, false);
TextView title = (TextView)v.findViewById(R.id.tvTitle);
TextView description = (TextView) v.findViewById(R.id.tvdesc);
title.setText(page_titles[position]);
description.setText(desc[position]);
//This is very important
( (ViewPager) pager ).addView( v, 0 );
return v;
}
@Override
public void destroyItem(View pager, int position, Object view) {
((ViewPager) pager).removeView((View) view);
}
@Override
public void finishUpdate(View view) {
}
@Override
public void restoreState(Parcelable p, ClassLoader c) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(View view) {
}
}
}
The ViewPage takes an Adapter in this case I’ve written GiloAdapter. The most important method is instantiateItem(View pager, int position) which selects which Layoout to use. I used a LayoutInflator but with only one Layout.(The current library uses fragments). If you are familiar with Adapters from ListViews then its almost the same idea. The destroyItem() is also important that you override or your app will force close with weird error messages.
Lastly we are going to use the default style in the library, so in the manifest add this in the manifest in your Activity tag:
android:theme="@style/Theme.PageIndicatorDefaults"
The .MainActivity in my app
<activity
android:name=".MainActivity"
android:theme="@style/Theme.PageIndicatorDefaults"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
And we have
Thats it, next blogposts we’ll change the colors(customise), maybe look at another indicator.
Drop a comment if you found this helpful or if you got some error you can’t figure out, and I’ll try and have a look.
The past few weeks, almost a month now, has an eye opener. I’ve learn alot. Straight to the point now: I’m starting a series on customised Views, all the good stuff that make android look good. Alot of it will be on a look at open source android libraries. I’ll categorize them according to Views like Tabs, etc.
I’ll try and update frequently.
see ya.
This is an app I built for a friend of mine whose blog is at http://technosavvykenyans.wordpress.com/ Its currently on its design stage. But i liked the iphone nav-bar on top.
TextView and views and Buttons have a method setTpeface that allows you to set a font. But first download a font or if you already have one thats alright. Place the font file (.otf , .ttf) into the assets folder of your project.
We create a font object by accessing the assets folder. So at the onCreate method (or just when you want it):
Typeface font = Typeface.createFromAsset(this.getAssets(),"AnnabelScript.ttf");
Make sure you have the full name of the font including the extension.
Next just apply the font to the Views that you want.
TextView tv1 = (TextView) findViewById(R.id.textView1);
TextView tv2 = (TextView) findViewById(R.id.textView2);
TextView tv3 = (TextView) findViewById(R.id.textView3);
TextView tv4 = (TextView) findViewById(R.id.textView4);
tv1.setTypeface(font);
tv2.setTypeface(font);
tv3.setTypeface(font);
tv4.setTypeface(font);
The whole page:
package com.example.myblog;
import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView tv1 = (TextView) findViewById(R.id.textView1);
TextView tv2 = (TextView) findViewById(R.id.textView2);
TextView tv3 = (TextView) findViewById(R.id.textView3);
TextView tv4 = (TextView) findViewById(R.id.textView4);
Typeface font = Typeface.createFromAsset(this.getAssets(),"AnnabelScript.ttf");
tv1.setTypeface(font);
tv2.setTypeface(font);
tv3.setTypeface(font);
tv4.setTypeface(font);
}
}
The end-result is
Starting at the xml, create a new xml file. This xml file will contain a listview.
gallery.xml
<!---gallery.xml--->
<?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"
android:background="@drawable/bag_cake"
>
<ListView
android:id="@+id/lvdata"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginBottom="1dp"
android:layout_weight="1"
android:cacheColorHint="#251e1b" android:layout_marginTop="1dp">
</ListView>
</LinearLayout>
Next the row-item. This will be used by the photoAdapter and define how each row item should be placed.
row_photo.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1" >
<ImageView
android:id="@+id/iv1"
android:layout_width="80dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="0.25"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher" />
<ImageView
android:id="@+id/iv2"
android:layout_width="80dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="0.25"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher" />
<ImageView
android:id="@+id/iv3"
android:layout_width="80dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="0.25"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher" />
<ImageView
android:id="@+id/iv4"
android:layout_width="80dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="0.25"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
Thats it for the xml. There java files, one that defines the row as an object(Photo class), the PhotoAdapter Class and the implementation – (Gallery.java).
Photo.java
package com.gilo.zosi;
public class Photo {
private int iv1;
private int iv2;
private int iv3;
private int iv4;
public Photo(int iv1, int iv2, int iv3, int iv4) {
//The constructor takes the ids of three images and initiliases them
super();
this.iv1 = iv1;
this.iv2 = iv2;
this.iv3 = iv3;
this.iv4 = iv4;
}
public int getIv1() {
return iv1;
}
public void setIv1(int iv1) {
this.iv1 = iv1;
}
public int getIv2() {
return iv2;
}
public void setIv2(int iv2) {
this.iv2 = iv2;
}
public int getIv3() {
return iv3;
}
public void setIv3(int iv3) {
this.iv3 = iv3;
}
public int getIv4() {
return iv4;
}
public void setIv4(int iv4) {
this.iv4 = iv4;
}
}
and for PhotoAdapter.java
package com.gilo.zosi;
import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
public class PhotoAdapter extends BaseAdapter {
private ArrayList<Photo> list;
private LayoutInflater mInflater;
public PhotoAdapter(Context context, ArrayList<Photo> list) {
this.list = list;
this.mInflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.row_photo, null);
holder = new ViewHolder();
holder.iv1 = (ImageView) convertView.findViewById(R.id.iv1);
holder.iv2 = (ImageView) convertView.findViewById(R.id.iv2);
holder.iv3 = (ImageView) convertView.findViewById(R.id.iv3);
holder.iv4 = (ImageView) convertView.findViewById(R.id.iv4);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.iv1.setImageResource(list.get(position).getIv1());
holder.iv2.setImageResource(list.get(position).getIv2());
holder.iv3.setImageResource(list.get(position).getIv3());
holder.iv4.setImageResource(list.get(position).getIv4());
return convertView;
}
private static class ViewHolder {
private ImageView iv1, iv2, iv3, iv4;
}
}
package com.gilo.zosi;
import java.util.ArrayList;
import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
public class Gallery extends Activity{
ListView gallery;
ArrayList<Photo> row = new ArrayList<Photo>();
protected void onCreate(Bundle icicle){
super.onCreate(icicle);
setContentView(R.layout.gallery);
gallery = (ListView) findViewById(R.id.lvdata);
init();
gallery.setAdapter(new PhotoAdapter(getBaseContext(), row));
}
private void init(){
Photo p1 = new Photo(R.drawable.p1, R.drawable.p2, R.drawable.p3, R.drawable.p4);
Photo p2 = new Photo(R.drawable.p5, R.drawable.p6, R.drawable.p7, R.drawable.p8);
Photo p3 = new Photo(R.drawable.p9, R.drawable.p10, R.drawable.p11, R.drawable.p12);
row.add(p1);
row.add(p2);
row.add(p3);
row.add(p2);
row.add(p1);
row.add(p3);
row.add(p2);
}
}
The source code 