2015-01-04

【Android Studio】置入 AdMob 播廣告 - 橫幅廣告(banner)篇

參考資料 ----
Table 1. Individual APIs and corresponding build.gradle descriptions.
橫幅廣告 II
智慧型橫幅廣告


先下載安裝 Google Repository



開一個新專案，其中 Activity 類型選擇 Blank Activity with Fragment



左上角，由 Android 變更為 Project，並展開專案的結構樹，會看到 build.gradle，



雙擊 build.gradle 開啟，看到檔案最末的 dependencies，原本如下 ----


dependencies 
{
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.0'
}


更新為 ----

dependencies 
{
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.0'
    compile 'com.google.android.gms:play-services-ads:8.1.0'
}


存檔，並按一下 工具列 的 Sync Project with Gradle Files


編輯 AndroidManifest.xml 

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

    <!-- 取得可顯示 AdMob 廣告的權限 -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <application
        ...
        ... >

        <!-- 這段 meta-data 為必需 -->
        <meta-data 
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

        <!-- AdMob 的 AdActivity -->
        <activity 
            android:name="com.google.android.gms.ads.AdActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
            android:theme="@android:style/Theme.Translucent" />
    </application>

</manifest>


開啟 app > src > main > res > values > strings.xml，加入要播的廣告 AdUnitID，這個 ID 是 Google 提供給我們測試用的，Google 強烈建議，在 app 開發時期，以這個 ID 進行您程式的測試，驗證您的 app 是否可正常顯示廣告，等到 app 要上架前再換上您的實際 ID，以免觸犯 Google AdMob 的規定。 


...
...

<string name="banner_ad_unit_id">ca-app-pub-3940256099942544/6300978111</string>

...
...


新增一個 fragment layout


修改內容為如下 ---- 


<?xml version="1.0" encoding="utf-8"?>

<!-- 插入 xmlns:ads= ... -->
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/banner_ad_unit_id">
    </com.google.android.gms.ads.AdView>

</RelativeLayout>


adSize  除了 BANNER 外，另有其他值可填入(參考 橫幅廣告 II)
大小 (寬 x 高)說明 適用裝置 AdSize 常值
320x50 標準橫幅廣告 手機和平板電腦 BANNER
320x100 大横幅 手機和平板電腦 LARGE_BANNER
300x250 IAB 中矩形廣告 手機和平板電腦 MEDIUM_RECTANGLE
468x60 IAB 完整橫幅廣告 平板電腦 FULL_BANNER
728x90 IAB 超級橫幅廣告 平板電腦 LEADERBOARD
查看表格 智慧型橫幅廣告 手機和平板電腦 SMART_BANNER


開啟 MainActivity，增加兩個 import，並在 Placeholder 後面新建一個 AdFragment

...
...
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;

...
...

public static class PlaceholderFragment extends Fragment
{
    ...
    ...
}

// 播 AdMob 的 fragment
public static class AdFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.fragment_ad, container, false);
    }

    @Override
    public void onActivityCreated(Bundle bundle)
    {
        super.onActivityCreated(bundle);
        AdView mAdView = (AdView) getView().findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder().build();
        mAdView.loadAd(adRequest);
    }
}


修改 activity_main.xml，將原本的 FragmentLayout 變更為 RelativeLayout，並加入 PlaceholderFragment 和 AdFragment，如下 ----

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="MergeRootFrame" >

    <fragment 
        android:name="com.google.android.gms.example.bannerexample.MainActivity$PlaceholderFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/adFragment" />

    <fragment
        android:id="@+id/adFragment"
        android:name="com.google.android.gms.example.bannerexample.MainActivity$AdFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />

</RelativeLayout>


修改 MainActivity.java 的 onCreate()，如下 ----

...
...

@Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}


執行程式，就可以看到在畫面下方播放廣告了。



相關筆記 ----
【Android Studio】置入 AdMob 播廣告 - 插頁式廣告(InterstitialAd)篇
【Android】app 置入 Admob 廣告賺錢



Labels: