D. Design your Offerwall

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 ObjectDescription 
 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.
  1. 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.
  2. Map your layout Ids to TnkLayout fields.
  3. 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 LayoutDescription
 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>

</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 layoutmakePopupLayout();

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

Comments