GDG presentation hollywood action bar (Leonardo,vingle.inc)

Hollywood ActionBar

13th April, 2013

Vingle

NEVER-ENDING SOCIAL MAGAZINE • WWW.VINGLE.NET

Intro

Kim Tae Hwan25 Software Engineer

SSHS 17th

KAIST CS 07 (1 semester left)

Done Military Service

VINGLE.IncVingleTaeHwan KimPRODUCT COORDINATOR+82 10 7755 [email protected]/THEFINESTARTIST

GET TO KNOWTAEHWAN KIM.

HIS INTERESTS ARECOMPOSING MUSIC.UX DESIGN.SWIMMING.GIRLs.

AND...

LeonardoMusic Off, I'm Sleeping (Android)

Total 2,500,000 Downloads

From Jun, 2011

Music Off, I'm Sleeping (iOS)Total 40,000 Downloads

From Sep, 2012

The Finest ArtistMusiCon (iOS)

Playful Music Player

UX - Design

Not yet launched (80% Done)

We need new members!!

VINGLE • NEVER-ENDING SOCIAL MAGAZINE • WWW.VINGLE.NET

Kim Tae Hwan Leonardo The Finest ArtistKim Tae Hwan Leonardo The Finest ArtistKim Tae Hwan Leonardo The Finest Artist

VINGLE

GOOGLE PLUS

FACEBOOK

TWITTER

EMAIL

vingle.net/TheFinestArtist

plus.google.com/+TheFinestArtist

facebook.com/TheFinestArtist

twitter.com/TheFinestArtist

[email protected]

Intro

Content

Code

Custom

Q&A



Content 어떻게 반복되는 Action을 빠르게 할것인가?

반복되는 Action○ 검색

○ 새로고침

○ 작성

○ 공유하기

○ 노티

○ etc

뒤로가기

& Top of the Screen



Content ActionBar is a branded Top bar of App



Content 액션바의 구성

Main ActionBarTop Bar

Bottom Bar



Code 액션바 추가

<application

android:name="com.example.android"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/SampleTheme">

</application>

<resources>

<style name="SampleTheme" parent="@android:style/Theme">

<item name="android:actionBarStyle">@style/SampleTheme.ActionBar</item>

</style>

<style name="SampleTheme.ActionBar" parent="@android:style/Widget.ActionBar">

<item name="android:background">@color/actionbar_transparency</item>

<item name="android:windowActionBarOverlay">true</item>

<item name="android:displayOptions">useLogo|showHome</item>

</style>

</resources>

Icon & Logo



Content 액션바의 구성

View Control

App Icon Action Button

Action Overflow



Code 홈버튼

public class MainActivity extends FragmentActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

getActionBar().setHomeButtonEnabled(true);

getActionBar().setDisplayHomeAsUpEnabled(true);

getActionBar().setHomeButtonEnabled(false);

getActionBar().setDisplayHomeAsUpEnabled(false);

}

}


Custom 홈버튼


if (actionBar.getCustomView() != null) {

ViewGroup parent = (ViewGroup) actionBar.getCustomView().getParent();

ViewGroup homeView = (ViewGroup) parent.getChildAt(0);

homeView.setBackgroundResource(R.drawable.selected_button_background);

View up = homeView.getChildAt(0);

up.setVisibility(View.INVISIBLE);

} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {

ViewGroup parent = (ViewGroup) activity.getWindow().getDecorView();

ViewGroup child1 = (ViewGroup) parent.getChildAt(0);

ViewGroup child2 = (ViewGroup) child1.getChildAt(1);



ViewGroup homeView = (ViewGroup) child4.getChildAt(0);




} else {

ViewGroup parent = (ViewGroup) activity.getWindow().getDecorView();

ViewGroup child1 = (ViewGroup) parent.getChildAt(0);




ViewGroup homeView = (ViewGroup) child4.getChildAt(0);




}

}VINGLE • NEVER-ENDING SOCIAL MAGAZINE • WWW.VINGLE.NET


Code 타이틀

getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE

|ActionBar.DISPLAY_HOME_AS_UP);



Content 타이틀

POSSIBLE?



Content 타이틀


Custom 타이틀

getActionBar().setLogo(writeOnDrawable(R.drawable.star, "ActionBar"));

public BitmapDrawable writeOnDrawable(int drawableId, String text){

Bitmap bm = BitmapFactory.decodeResource(getResources(),drawableId).

copy(Bitmap.Config.ARGB_8888, true);

Paint paint = new Paint();

paint.setColor(Color.WHITE);

paint.setTextSize(40f);

paint.setAntiAlias(true);

paint.setFakeBoldText(false);

paint.setShadowLayer(2f, 0, 0, Color.GRAY);

paint.setStyle(Paint.Style.STROKE);

paint.setTextAlign(Paint.Align.LEFT);

paint.setTypeface(Typeface.SANS_SERIF);

Bitmap bmBack = Bitmap.createBitmap(270, 67, Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bmBack);

canvas.drawText(text, 79f, (float) (bm.getHeight()/(1.35)), paint);

canvas.drawBitmap(bm, new Matrix(), null);

return new BitmapDrawable(getResources(), bmBack);

}

VINGLE • NEVER-ENDING SOCIAL MAGAZINE • WWW.VINGLE.NETVINGLE • NEVER-ENDING SOCIAL MAGAZINE • WWW.VINGLE.NET


Code 타이틀

getActionBar().setCustomView(R.layout.custom_actionbar);

getActionBar().setDisplayShowCustomEnabled(true);

<?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" >

<ImageView

android:id="@+id/hidden_menu_icon"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_marginRight="16dp"

android:background="@drawable/ad_button_001_sidemenu"

android:visibility="invisible" />

<TextView

android:id="@+id/title"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_toLeftOf="@id/hidden_menu_icon"

android:gravity="center" />

</RelativeLayout>

8+4+Home+4UP

Content View Control


Code View Control


ActionBar actionbar = getSupportActionBar();

actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

ActionBar.Tab TabA = actionbar.newTab().setText("Fragment A");

ActionBar.Tab TabB = actionbar.newTab().setText("Fragment B");

Fragment FragmentA = new Fragment();

Fragment FragmentB = new Fragment();

TabA.setTabListener(new MyTabsListener(FragmentA));

TabB.setTabListener(new MyTabsListener(FragmentB));

actionbar.addTab(TabA);

actionbar.addTab(TabB);


Content Action Button


Code Action Button


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

<item

android:id="@+id/menu_search"

android:actionViewClass="android.widget.SearchView"

android:icon="@android:drawable/ic_menu_search"

android:showAsAction="always|collapseActionView"

android:title="@string/menu_search"/>

<item

android:id="@+id/menu_share"

android:actionProviderClass="android.widget.ShareActionProvider"

android:showAsAction="ifRoom"

android:title="@string/menu_share"/>

<item

android:id="@+id/action_add"

android:icon="@android:drawable/ic_menu_add"

android:showAsAction="ifRoom"

android:title="@string/menu_add"/>

</menu>


Code Action Button


@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

ShareActionProvider shareActionProvider

= (ShareActionProvider)menu.findItem(R.id.menu_share).getActionProvider();

Intent shareIntent = new Intent();

shareIntent.setAction(Intent.ACTION_SEND);

shareIntent.putExtra(Intent.EXTRA_TEXT, "http://www.vingle.net");

shareIntent.setType("text/plain");

shareActionProvider.setShareIntent(shareIntent);

return super.onCreateOptionsMenu(menu);

}



Content ActionBar & Fragment



Content ActionBar & Fragment

Activity Frag A

Style A

Frag B

Style BFrag C

Style C

ActionBar

ActionBarStyle


Custom ActionBar & Fragment

ActionBarStyle

public static class ActionBarStyle {

public enum Home {

SIDE_NAVI,

BACK,

NONE

}

public enum Title {

LOGO,

TITLE,

NONE

}

public enum Right {

NOTI,

DONE,

NONE

}

public ActionBarStyle(Home home, Title title, Right button) {

this.home = home;

this.title = title;

this.button = button;

}

}



public abstract class ActionBarFragment extends Fragment {

public ActionBarStyle getActionBarStyle() {

return new ActionBarStyle(Home.SIDE_NAVI, Title.LOGO, Right.NOTI);

}

}

Frag A

Style A



Activity

ActionBar

private void addFragment() {

final FragmentManager fm = getFragmentManager();

final ActionBarFragment frag = new ActionBarFragment();

final OnBackStackChangedListener listener = new OnBackStackChangedListener(){

@Override

public void onBackStackChanged() {

setActionBarStyle(frag.getActionBarStyle());

fm.removeOnBackStackChangedListener(listener);

}

};

fm.addOnBackStackChangedListener(listener);

FragmentTransaction ft = fm.beginTransaction();

ft.add(frag, frag.getClass().getSimpleName());

ft.commit();

}



@Override

public void onBackPressed() {

final FragmentManager fm = getFragmentManager();

final OnBackStackChangedListener listener = new OnBackStackChangedListener(){

@Override

public void onBackStackChanged() {

ActionBarFragment frag = (ActionBarFragment)fm.findFragmentById(id);

setActionBarStyle(frag.getActionBarStyle());

fm.removeOnBackStackChangedListener(listener);

}

};

fm.addOnBackStackChangedListener(listener);

super.onBackPressed();

}


Activity

ActionBar

Custom ActionBar & Fragmentpublic void setActionBarStyle(ActionBarStyle style) {

ActionBar actionBar = getActionBar();

switch (style.getHome()) {

case SIDE_NAVI:

actionBar.setHomeButtonEnabled(true);

actionBar.setDisplayShowHomeEnabled(true);

actionBar.setLogo(R.drawable.side_navi);

break;

case BACK:

actionBar.setHomeButtonEnabled(true);

actionBar.setDisplayShowHomeEnabled(true);

actionBar.setLogo(R.drawable.back);

break;

case NONE:

actionBar.setHomeButtonEnabled(false);

actionBar.setDisplayShowHomeEnabled(false);

actionBar.setLogo(R.drawable.none);

break;

default:

break;

}

}VINGLE • NEVER-ENDING SOCIAL MAGAZINE • WWW.VINGLE.NETVINGLE • NEVER-ENDING SOCIAL MAGAZINE • WWW.VINGLE.NET

Activity

ActionBar


Content ActionBar Sherlock

https://github.com/JakeWharton/ActionBarSherlock

Android API 7~



Content ActionBar Style Generator

http://jgilfelt.github.io/android-actionbarstylegenerator/



Q&A Question & Answer


GDG presentation hollywood action bar (Leonardo,vingle.inc)

Engineering

Transcript of GDG presentation hollywood action bar (Leonardo,vingle.inc)