Android basic 4 Navigation Drawer

Navigation Drawer

by Eakapong Kattiya

http://developer.android.com/training/implementing-navigation/nav-drawer.html

Monday, July 15, 13



by Eakapong Kattiya

Navigation Drawer : Add ActionbarSherlock Library

Source : MyNavigationDrawer.zip

Monday, July 15, 13

by Eakapong Kattiya

Navigation Drawer : Add ActionbarSherlock Library

Monday, July 15, 13

by Eakapong Kattiya

(1)Theme.Sherlock : styles.xml

<resources>

<style name="AppBaseTheme" parent="Theme.Sherlock.Light"> </style>

<style name="AppTheme" parent="AppBaseTheme"> </style> </resources>

Change AppBaseTheme in styles.xml

Monday, July 15, 13

by Eakapong Kattiya

(2)Theme.Sherlock : AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"

//.. <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >

<activity android:name="com.example.mydrawerlayout.MainActivity" android:label="@string/app_name" android:theme="@style/Theme.Sherlock" > <intent-filter> <action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application>

</manifest>

Monday, July 15, 13

http://schemas.android.com/apk/res/android


by Eakapong Kattiya

Navigation Drawer : activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" //..

<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" >  <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF00FF" />  <ListView android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#FFFFFF" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" /> </android.support.v4.widget.DrawerLayout>

</RelativeLayout>

Monday, July 15, 13

by Eakapong Kattiya

Navigation Drawer : main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_settings" android:orderInCategory="100" android:showAsAction="never" android:title="@string/action_settings"/> <item android:id="@+id/action_websearch" android:icon="@drawable/action_search" android:showAsAction="ifRoom|withText" android:title="Search"/>

</menu>

Monday, July 15, 13



import com.actionbarsherlock.app.SherlockFragmentActivity; //import android.app.Activity;

public class MainActivity extends SherlockFragmentActivity implements OnItemClickListener{ List<Integer> images = new ArrayList<Integer>(); List<String> items = new ArrayList<String>(); private ListView mDrawerList; private DrawerLayout mDrawerLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); images.add(android.R.drawable.ic_menu_gallery); images.add(android.R.drawable.ic_menu_camera);

items.add("Earth"); items.add("Jupiter");

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START); // Set Shadow mDrawerList = (ListView) findViewById(R.id.left_drawer);

ListAdapter adapter = new CustomArrayAdapter(this, items, images); // Set the adapter for the list view mDrawerList.setAdapter(adapter); mDrawerList.setOnItemClickListener(this);

if (savedInstanceState == null) { selectItem(0); }

}}

by Eakapong Kattiya

Navigation Drawer : MainActivity.java

Monday, July 15, 13

import com.actionbarsherlock.view.Menu; //import android.view.Menu;public class MainActivity extends SherlockFragmentActivity implements OnItemClickListener{

//..

@Override public boolean onCreateOptionsMenu(Menu menu) { //getMenuInflater().inflate(R.menu.main, menu); getSupportMenuInflater().inflate(R.menu.main, menu); return true; }

}

by Eakapong Kattiya


Monday, July 15, 13


//..

@Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { selectItem(arg2); }

private void selectItem(int arg0) { // update the main content by replacing fragments PlanetFragment fragment = new PlanetFragment(); fragment.setPlanet(items.get(arg0)); FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

// update selected item and title, then close the drawer mDrawerList.setItemChecked(position, true); mDrawerLayout.closeDrawer(mDrawerList); }

}

by Eakapong Kattiya


Monday, July 15, 13


//..

@Override public boolean onOptionsItemSelected(final MenuItem item) { // Handle action buttons switch (item.getItemId()) { case R.id.action_websearch: // create intent to perform web search for this planet Intent intent = new Intent(Intent.ACTION_WEB_SEARCH); intent.putExtra(SearchManager.QUERY, getSupportActionBar().getTitle()); startActivity(intent); return true; default: return super.onOptionsItemSelected(item); } }}

by Eakapong Kattiya


Monday, July 15, 13

public class CustomArrayAdapter extends ArrayAdapter<String> {

private List<Integer> images; private List<String> items; private Context context;

public CustomArrayAdapter(Context context, List<String> items, List<Integer> images) { super(context, R.layout.drawer_list_item, items); this.context = context; this.images = images; this.items = items ; } @Override public View getView(int arg0, View convertView, ViewGroup parent) { /* create a new view of my layout and inflate it in the row */ LayoutInflater inflator = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = inflator.inflate(R.layout.drawer_list_item, null); TextView textView = (TextView) view.findViewById(R.id.cityName); textView.setText(items.get(arg0)); ImageView imageCity = (ImageView) view.findViewById(R.id.imageCity); String packageName = context.getPackageName(); String imageName = items.get(position).toLowerCase(); int resId = context.getResources().getIdentifier(imageName,"drawable", packageName); imageCity.setImageResource(resId); return view; }}

by Eakapong Kattiya

Navigation Drawer : CustomArrayAdapter.java

Monday, July 15, 13

<?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="80dip" android:background="#222222" >

<ImageView android:id="@+id/imageCity" android:layout_width="50dp" android:layout_height="50dp" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_toRightOf="@id/imageCity" android:orientation="vertical" android:paddingLeft="10dp" > <TextView android:id="@+id/cityName" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#FFFFFF" android:textSize="18dp" /> <TextView android:id="@+id/cityLink" android:layout_width="fill_parent" android:layout_height="wrap_content" android:autoLink="web" android:textColor="#FFFFFF" android:textSize="14dp" /> </LinearLayout>

</RelativeLayout>

by Eakapong Kattiya

Navigation Drawer : drawer_list_item.xml

Monday, July 15, 13



by Eakapong Kattiya

List vs ArrayList vs LinkedList

List is interface , not a concrete class.List cannot be instantiated.

List<String> items = new List<String>() ;

ArrayList is an implementation of List.

List<String> items = new ArrayList<String>();items.add("Earth");items.add("Jupiter");

LinkedList is an implementation of List.

List<String> items = new LinkedList<String>();items.add("Earth");items.add("Jupiter");

Monday, July 15, 13

http://developer.android.com/reference/java/util/List.html












by Eakapong Kattiya

ArrayList vs LinkedList

- ส่วนใหญ่แล้วใช้ ArrayList - ใช้ LinkedList เมื่อข้อมูลใหญ่มากเช่น เกิน 1 ล้านแถวจะทํางานเร็วกว่า(Big-Oh น้อยกว่าเมื่อมีการเพิ่มข้อมูล)http://leepoint.net/notes-java/algorithms/big-oh/bigoh.html

Algorithm arrayArrayList LinkedList

access front O(1) O(1)

access back O(1) O(1)

access middle O(1) O(N)

insert at front O(N) O(1)

insert at back O(1) O(1)

insert in middle O(N) O(1)

Monday, July 15, 13

http://leepoint.net/notes-java/algorithms/big-oh/bigoh.html

http://leepoint.net/notes-java/algorithms/big-oh/bigoh.html

by Eakapong Kattiya

Sort ArrayList

List<String> items = new ArrayList<String>();items.add("Earth");items.add("Jupiter");

Collections.sort(items); //Ascending Sort

Comparator<String> comparator = Collections.reverseOrder();Collections.sort(items,comparator); //Descending Sort

Monday, July 15, 13

-Fragment is a chunk of user interface with its own life cycle.-Fragment must exist within an Activity.-Interaction with fragments is done through FragmentManager.-Fragment API was introduced in API 11-Use SherlockFragmentActivity , SherlockFragment instead of native Fragment API

by Eakapong Kattiya

Fragment (>API 11)

Monday, July 15, 13

http://developer.android.com/reference/android/app/FragmentManager.html

http://developer.android.com/reference/android/app/FragmentManager.html

by Eakapong Kattiya

Fragment (>API 11)

Monday, July 15, 13

by Eakapong Kattiya

Navigation Drawer : fragment_planet.xml

<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" tools:context=".MainActivity" >

<ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:gravity="center" android:padding="32dp" /></RelativeLayout>

Monday, July 15, 13



http://schemas.android.com/tools

http://schemas.android.com/tools

public class PlanetFragment extends SherlockFragment { private String planet ; public PlanetFragment() { } public String getPlanet() { return planet; } public void setPlanet(String planet) { this.planet = planet; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_planet, container, false);

String packageName = getActivity().getPackageName(); String imageName = planet.toLowerCase(); int imageId = getResources().getIdentifier(imageName,"drawable", packageName); ImageView imageView = (ImageView)view.findViewById(R.id.image); imageView.setImageResource(imageId); getActivity().setTitle(planet);

return view; }}

by Eakapong Kattiya

Navigation Drawer : PlanetFragment.java

Monday, July 15, 13

ImageView imageCity = (ImageView) view.findViewById(R.id.imageCity);

Drawable image = context.getResources().getDrawable(android.R.drawable.ic_dialog_email);imageCity.setImageDrawable(image);

by Eakapong Kattiya

ImageView

List<Integer> images = new ArrayList<Integer>();images.add(android.R.drawable.ic_menu_gallery);images.add(android.R.drawable.ic_menu_camera);


Drawable image = context.getResources().getDrawable(images.get(0));imageCity.setImageDrawable(image);


String packageName = context.getPackageName();String imageName = items.get(position).toLowerCase();int resId = context.getResources().getIdentifier(imageName,"drawable", packageName);imageCity.setImageResource(resId);

Fixed Resource id

Dynamic Resource id

Choose image name

Monday, July 15, 13

by Eakapong Kattiya

Nine-patch Image

Monday, July 15, 13

by Eakapong Kattiya

Nine-patch Image

res/drawable/drawer_shadow.9.png

Monday, July 15, 13

by Eakapong Kattiya

Navigation Drawer with ActionBarDrawerToggle

Source : MyNavigationDrawerToggle.zip

Monday, July 15, 13

Android basic 4 Navigation Drawer

Technology

Transcript of Android basic 4 Navigation Drawer