D. Design your Offerwall

2. Incentive Ad‎ > ‎1) Publisher API‎ > ‎1.2 Android Integration‎ > ‎

AdListView itself is good to use in default style but you may want to change the style or layout of AdListView in order to match your app's UI.

There are two ways to change UI style of AdListView. One is TnkStyle and the other is TnkLayout. By TnkStyle, you can change background images, text color or text size, but you cannot change the layout itself. Using TnkLayout, you can change everything in AdListView, but you have to write down your own Layout XML files to replace with.

1) TnkStyle

TnkStyle can change images, text color or text size while keeping the layout itself.

Below images are sample of AdListView with TnkStyle applied.

[Default Style]

[Changed Style]

a) TnkStyle Object

To change the style of AdListView, assign your values to the fields of TnkStyle object.

TnkStyle has common fields belows and some additional fields according to the type of components in AdListView.

Field name	Description
background	Background image (resource ID of Drawable)
backgroundColor	Background color in ARGB value (Not used when background field is assgiend.)
textColor	Text color in ARGB value
textSize	Text size in DIP

b) TnkStyle in List View

TnkStyle Object	Description
TnkStyle.AdWall	Topmost style of Ad List
TnkStyle.AdWall.Header	Header area above Ad List
TnkStyle.AdWall.Section	Message section area below Header
TnkStyle.AdWall.Footer	Footer area below Ad List
TnkStyle.AdWall.Item	Topmost style of Ad Item
TnkStyle.AdWall.Item.Title	Title of item
TnkStyle.AdWall.Item.Subtitle	Subtitle of item
TnkStyle.AdWall.Item.Tag	Tag text of item
TnkStyle.AdWall.Item.Tag.Free	Style of free item
TnkStyle.AdWall.Item.Tag.Paid	Style of paid item
TnkStyle.AdWall.Item.Tag.Web	Style of web event item
TnkStyle.AdWall.Item.Tag.Confirm	Style of joined item.
TnkStyle.AdWall.CloseButton	Close button in Header area. (Only shown in popup style)

Additional fields

TnkStyle.AdWall.dividerHeight : divider height of ListView (pixel)
TnkStyle.AdWall.dividerColor : divider color value of ListView (ARGB value)
TnkStyle.AdWall.Item.backgroundStrip : background image of odd-numbered items. Set this value if you want to set different style on odd-numbered item from even-numbered ones. (Resource Id of Drawable)
TnkStyle.AdWall.Item.backgroundColor : background color of odd-numbered items.

c) TnkStyle in Detail View

TnkStyle Object	Description
TnkStyle.AdWall.Detail	Topmost style of detail view
TnkStyle.AdWall.Detail.Header	Header area of detail view
TnkStyle.AdWall.Detail.Header.Title	Item title in Header area
TnkStyle.AdWall.Detail.Header.Subtitle	Item subtitle in Header area
TnkStyle.AdWall.Detail.Body	Body area
TnkStyle.AdWall.Detail.Body.Tag	Tag text in body area
TnkStyle.AdWall.Detail.Footer	Footer area
TnkStyle.AdWall.Detail.Footer.ConfirmButton	Confirm button in Footer area
TnkStyle.AdWall.Detail.Footer.CancelButton	Cancel button in Footer area

d) Sample code

Sample Code

private void setTnkStyle() {

TnkStyle.clear(); // clear previous style

TnkStyle.AdWall.backgroundColor = 0xff505050;

TnkStyle.AdWall.background = R.drawable.contents_title_bg;

TnkStyle.AdWall.dividerHeight = 1;

TnkStyle.AdWall.CloseButton.background = R.drawable.bt_close;

TnkStyle.AdWall.Header.background = R.drawable.contents_title_bg;

TnkStyle.AdWall.Header.textColor = 0xffffffff;

TnkStyle.AdWall.Header.textSize = 22;

TnkStyle.AdWall.Section.backgroundColor = 0xff505050;

TnkStyle.AdWall.Section.textColor = 0xffffffff;

TnkStyle.AdWall.Section.textSize = 15;

TnkStyle.AdWall.Footer.background = R.drawable.contents_title_bg;

TnkStyle.AdWall.Footer.textColor = 0xffffffff;

TnkStyle.AdWall.Footer.height = 25;

TnkStyle.AdWall.Item.background = R.drawable.list_item_bg;

TnkStyle.AdWall.Item.backgroundStripe = R.drawable.list_item_bg2;

TnkStyle.AdWall.Item.Title.textColor = 0xff50ff50;

TnkStyle.AdWall.Item.Subtitle.textColor = 0xff2c2c7c;

TnkStyle.AdWall.Item.Subtitle.textColor = 0xffff871c;

TnkStyle.AdWall.Item.Tag.Free.background = R.drawable.az_list_bt_free;

TnkStyle.AdWall.Item.Tag.Free.textColor = 0xffffffff;

TnkStyle.AdWall.Item.Tag.Paid.background = R.drawable.az_list_bt_pay;

TnkStyle.AdWall.Item.Tag.Paid.textColor = 0xffffffff;

TnkStyle.AdWall.Item.Tag.Web.background = R.drawable.az_list_bt_web;

TnkStyle.AdWall.Item.Tag.Web.textColor = 0xffffffff;

TnkStyle.AdWall.Item.Tag.Confirm.background = R.drawable.az_list_bt_install;

TnkStyle.AdWall.Item.Tag.Confirm.textColor = 0xffffffff;

TnkStyle.AdWall.Detail.Header.background = R.drawable.contents_title_bg;

TnkStyle.AdWall.Detail.Header.Title.textColor = 0xffffffff;

TnkStyle.AdWall.Detail.Header.Subtitle.textColor = 0xff000000;

TnkStyle.AdWall.Detail.Footer.background = R.drawable.contents_title_bg;

TnkStyle.AdWall.Detail.Footer.ConfirmButton.background = R.drawable.btn_top_navi;

TnkStyle.AdWall.Detail.Footer.ConfirmButton.textColor = 0xffff5050;

TnkStyle.AdWall.Detail.Footer.CancelButton.background = R.drawable.btn_top_navi;

TnkStyle.AdWall.Detail.Body.backgroundColor = 0xffff871c;

TnkStyle.AdWall.Detail.Body.textColor = 0xffffffff;

TnkStyle.AdWall.Detail.Body.Tag.Free.background = R.drawable.az_list_bt_free;

TnkStyle.AdWall.Detail.Body.Tag.Free.textColor = 0xffffffff;

TnkStyle.AdWall.Detail.Body.Tag.Paid.background = R.drawable.az_list_bt_pay;

TnkStyle.AdWall.Detail.Body.Tag.Paid.textColor = 0xffffffff;

TnkStyle.AdWall.Detail.Body.Tag.Web.background = R.drawable.az_list_bt_web;

TnkStyle.AdWall.Detail.Body.Tag.Web.textColor = 0xffffffff;

TnkStyle.AdWall.Detail.Body.Tag.Confirm.background = R.drawable.az_list_bt_install;

TnkStyle.AdWall.Detail.Body.Tag.Confirm.textColor = 0xffffffff;

}

// Set tnk style before showing adlist

setTnkStyle();

TnkSession.showAdList(MainActivity.this, getResources().getString(R.string.tnk_title));

2) TnkLayout

You can change everything in AdListView using TnkLayout.

Below images are sample of AdListView with TnkLayout applied.

[Default Style]

[Layout changed using TnkLayout]

Follow these 3 step to apply TnkLayout.

Write down your own Layout XML files. AdListView consists of 3 Views: AdList, AdItem, DetailView. You don't need to write all 3 layouts. Write only layouts you want to change.
Map your layout Ids to TnkLayout fields.
Show or popup AdListView with your TnkLayout object.

a) TnkLayout Object

Create a new TnkLayout object and assign values of your Layout. You don't have to assign every field below.

Ad List Layout	Description
adwall	Layout object for Ad List.
adwall.numColumnsPortrait	number of columns in portrait screen (default : 1)
adwall.numColumnsLandscape	number of columns in landscape screen (default : 2)
adwall.layout	Layout ID of Ad List XML
adwall.idTitle	ID of Title TextView
adwall.idList	ID of ListView
adwall.idClose	ID of close Button
adwall.idHelpdesk	ID of help desk Button
adwall.idPrivacy	ID of privacy policy Button

Ad Item Layout	Description
adwall.item	Layout object for Ad Item.
adwall.item.layout	Layout ID of Ad Item XML
adwall.item.height	Height of Ad Item (DIP)
adwall.item.idIcon	ID of Icon ImageView
adwall.item.idTitle	ID of title TextView
adwall.item.idSubtitle	ID of subtitle TextView
adwall.item.idTag	ID of tag TextView
adwall.item.bgItemEven	Drawable Id of background image Used when set different style in even-numbered item.
adwall.item.bgItemOdd	Drawable Id of background image Used when set different style in odd-numbered item.
adwall.item.colorBg	Background color of Item (ARGB 값)
adwall.item.tag	Layout object for Tags.

Detail View Layout	Description
adwall.detail	Layout object for Detail view
adwall.detail.layout	Layout ID of Detail View XML
adwall.detail.idIcon	ID of Icon ImageView
adwall.detail.idTitle	ID of title TextView
adwall.detail.idSubtitle	ID of subtitle TextView
adwall.detail.idTag	ID of tag TextView
adwall.detail.idAction	ID of TextView for describing user action.
adwall.detail.idConfirm	ID of confirm Button
adwall.detail.idCancel	ID of cancel Button
adwall.item.tag	Layout object for Tags.

Header Layout in Ad List	Description
adwall.header	Layout object for Message section
adwall.header.layout	Layout ID of Message section XML
adwall.header.idText	ID of message TextView

Footer Layout in Ad List	Description
adwall.footer	Layout object for Footer view
adwall.footer.layout	Layout ID of Footer View XML
adwall.footer.idHelpdesk	ID of help desk Button
adwall.footer.idPrivacy	ID of privacy policy Button

Tag	Description
bgTagFree	Drawable ID of background Image for Free item
bgTagPaid	Drawable ID of background Image for Paid item
bgTagWeb	Drawable ID of background Image for Web event item
bgTagCheck	Drawable ID of background Image for Joined item
tcTagFree	Text Color for Free item (ARGB)
tcTagPaid	Text Color for Paid item (ARGB)
tcTagWeb	Text Color for Web event item (ARGB)
tcTagCheck	Text Color for Joined item (ARGB)

b) Sample code

Write down Ad List layout XML

myofferwall_popup.xml

<?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:background="#80000000"

<LinearLayout

android:id="@+id/main_layout"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center"

android:layout_margin="30dp"

android:background="@android:color/white"

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="50dp"

android:background="@drawable/myofferwall_title_bg">

<TextView

android:id="@+id/offerwall_title"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:textColor="#ffffffff"

android:textSize="18sp"

<Button

android:id="@+id/close_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_centerVertical="true"

android:text="Close"

</RelativeLayout>

<ListView

android:id="@+id/offerwall_adlist"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:divider="#ffe5e5e5"

android:dividerHeight="0dp"

android:background="#ffe5e5e5"

</LinearLayout>

</RelativeLayout>

Write down Ad Item layout XML

myofferwall_item.xml

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

android:background="@drawable/list_item"

<ImageView

android:id="@+id/ad_icon"

android:layout_width="72dp"

android:layout_height="72dp"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:padding="4dp"

android:scaleType="fitXY"

<ImageView

android:id="@+id/ad_icon_frame"

android:layout_width="72dp"

android:layout_height="72dp"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:background="@drawable/myofferwall_ad_icon_frame"

<TextView

android:id="@+id/ad_tag"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_alignParentRight="true"

android:layout_alignBottom="@id/ad_icon"

android:gravity="center"

android:textSize="13sp"

<TextView

android:id="@+id/ad_title"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/ad_icon_frame"

android:layout_marginTop="3dp"

android:layout_marginLeft="8dp"

android:gravity="center_vertical"

android:textColor="#ff020202"

android:textSize="15sp"

android:maxLines="1"

<TextView

android:id="@+id/ad_desc"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/ad_title"

android:layout_marginLeft="8dp"

android:layout_marginTop="8dp"

android:gravity="center_vertical"

android:textColor="#ff179dce"

android:textSize="12sp"

android:maxLines="2"

</RelativeLayout>

Write down Detail View layout XML

myofferwall_detail.xml

<?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:background="#80000000">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="40dp"

android:layout_centerVertical="true"

android:padding="6dp"

android:background="@drawable/list_item_bg"

<RelativeLayout

android:id="@+id/header_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

<TextView

android:id="@+id/ad_tag"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:gravity="center"

android:textSize="13sp"

<ImageView

android:id="@+id/ad_icon"

android:layout_width="72dp"

android:layout_height="72dp"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:padding="4dp"

android:scaleType="fitXY"

<ImageView

android:id="@+id/ad_icon_frame"

android:layout_width="72dp"

android:layout_height="72dp"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:background="@drawable/myofferwall_ad_icon_frame"

<TextView

android:id="@+id/ad_desc"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/ad_icon_frame"

android:layout_toLeftOf="@id/ad_tag"

android:layout_alignParentTop="true"

android:layout_marginLeft="8dp"

android:layout_marginTop="8dp"

android:gravity="center_vertical"

android:textColor="#ff179dce"

android:textSize="13sp"

<TextView

android:id="@+id/ad_title"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/ad_icon_frame"

android:layout_toLeftOf="@id/ad_tag"

android:layout_below="@id/ad_desc"

android:layout_marginTop="3dp"

android:layout_marginLeft="8dp"

android:gravity="center_vertical"

android:textColor="#ff020202"

android:textSize="17sp"

</RelativeLayout>

<TextView

android:id="@+id/ad_action"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/header_layout"

android:layout_marginTop="10dp"

android:gravity="center_vertical"

android:textColor="#ff020202"

android:textSize="17sp"

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/ad_action"

android:orientation="horizontal"

android:padding="10dp"

<Button

android:id="@+id/ad_ok"

android:layout_width="10dp"

android:layout_height="50dp"

android:layout_weight="1"

android:text="Confirm"

<Button

android:id="@+id/ad_cancel"

android:layout_width="10dp"

android:layout_height="50dp"

android:layout_weight="1"

android:text="Cancel"

</LinearLayout>

</RelativeLayout>

Create TnkLayout object and popup AdListView

TnkLayout object

private TnkLayout makePopupLayout() {

TnkLayout res = new TnkLayout();

res.adwall.numColumnsPortrait = 2;

res.adwall.numColumnsLandscape = 3;

res.adwall.layout = R.layout.myofferwall_popup;

res.adwall.idTitle = R.id.offerwall_title;

res.adwall.idList = R.id.offerwall_adlist;

res.adwall.idClose = R.id.close_button;

res.adwall.item.layout = R.layout.myofferwall_item;

res.adwall.item.height = 150;

res.adwall.item.idIcon = R.id.ad_icon;

res.adwall.item.idTitle = R.id.ad_title;

res.adwall.item.idSubtitle = R.id.ad_desc;

res.adwall.item.idTag = R.id.ad_tag;

//res.adwall.item.bgItemEven = R.drawable.list_item_bg;

//res.adwall.item.bgItemOdd = R.drawable.list_item_bg2;

res.adwall.item.tag.bgTagFree = R.drawable.az_list_bt_free;

res.adwall.item.tag.bgTagPaid = R.drawable.az_list_bt_pay;

res.adwall.item.tag.bgTagWeb = R.drawable.az_list_bt_web;

res.adwall.item.tag.bgTagCheck = R.drawable.az_list_bt_install;

res.adwall.item.tag.tcTagFree = 0xffffffff;

res.adwall.item.tag.tcTagPaid = 0xffffffff;

res.adwall.item.tag.tcTagWeb = 0xffffffff;

res.adwall.item.tag.tcTagCheck = 0xffffffff;

res.adwall.detail.layout = R.layout.myofferwall_detail;

res.adwall.detail.idIcon = R.id.ad_icon;

res.adwall.detail.idTitle = R.id.ad_title;

res.adwall.detail.idSubtitle = R.id.ad_desc;

res.adwall.detail.idTag = R.id.ad_tag;

res.adwall.detail.idAction = R.id.ad_action;

res.adwall.detail.idConfirm = R.id.ad_ok;

res.adwall.detail.idCancel = R.id.ad_cancel;

return res;

}

// Popup AdListView using your own layout

TnkLayout layout = makePopupLayout();

TnkSession.popupAdList(MainActivity.this,"Your title here", null, layout);

Comments

Recent site activity