BANNER VÀ CÁC TÙY CHỈNH VỀ KÍCH THƯỚC

Hầu hết người sử dụng đều ngao ngán khi nhắc đến quảng cáo trên các ứng dụng với lí do chúng cản trở tầm nhìn khi sử dụng ứng dụng. Vậy nên, đó là một vấn đề cần khắc phục để nâng cao chất lượng của ứng dụng và sản phẩm được người sử dụng chú ý mà không gây cản trở tầm nhìn.

Banner là loại hình dễ dàng tích hợp vào ứng dụng. Ở bài trước chúng ta đã tìm hiểu cách tích hợp banner vào ứng dụng android như thế nào, còn ở bài này, chúng ta sẽ tìm hiểu cách tùy chỉnh kích thước của banner sao cho phù hợp với màn hình ứng dụng.

Các kích thước của banner.

Hiện nay, Google AdMob hỗ trợ các kích thước của banner cho các loại màn hình khác nhau ở cả trên điện thoại và máy tính bảng.

Banner sẽ chiếm một phần diện tích của màn hình

Tích hợp và tùy chỉnh size banner.

Cách tích hợp và tùy chỉnh về kích thước của banner cũng khá đơn giản.

• Trước tiên tạo một giao diện đơn giản để thấy rõ về sự thay đổi kích thước và chiếm diện tích màn hình của các loại banner.

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

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

    xmlns:app="http://schemas.android.com/apk/res-auto"    

    xmlns:tools="http://schemas.android.com/tools"    

    android:layout_width="match_parent"    

    android:layout_height="match_parent"    

    tools:context="com.example.tranganhthi.demobannersize.MainActivity">

    <TextView        

       android:id="@+id/bannersizes_tv_title"        

       android:layout_width="wrap_content"        

       android:layout_height="wrap_content"        

       android:layout_centerHorizontal="true"        

       android:paddingBottom="16dp"        

       android:paddingTop="16dp"        

       android:text="AdMob Banner Sizes"        

       android:textAppearance="@android:style/TextAppearance.Large" />

    <LinearLayout        

       android:id="@+id/bannersizes_ll_inner"        

       android:layout_width="match_parent"        

       android:layout_height="wrap_content"        

       android:layout_below="@id/bannersizes_tv_title"        

       android:layout_marginEnd="64dp"        

       android:layout_marginLeft="64dp"        

       android:layout_marginRight="64dp"        

       android:layout_marginStart="64dp"        

       android:layout_marginTop="64dp"        

       android:orientation="vertical">

        <TextView            

           android:id="@+id/bannersizes_tv_size"            

           android:layout_width="wrap_content"            

           android:layout_height="wrap_content"            

           android:text="Size"            

           android:textAppearance="?android:attr/textAppearanceMedium" />

        <Spinner            

           android:id="@+id/bannersizes_spn_size"            

           android:layout_width="wrap_content"            

           android:layout_height="wrap_content"            

           android:layout_marginTop="10dp" />

        <Button            

           android:id="@+id/bannersizes_btn_loadad"            

           android:layout_width="wrap_content"            

           android:layout_height="wrap_content"            

           android:layout_gravity="center_horizontal"            

           android:layout_marginTop="30dp"            

           android:textColor="#ffffff"            

           android:text="Load Ads" />

    </LinearLayout>

    <FrameLayout        

       android:id="@+id/bannersizes_fl_adframe"        

       android:layout_width="wrap_content"        

       android:layout_height="wrap_content"        

       android:layout_alignParentBottom="true"        

       android:layout_centerHorizontal="true"        

       android:layout_marginTop="30dp" />


</RelativeLayout>

Màn hình thu được:

• Xử lí trong hàm main:

Cần phải kiểm tra loại màn hình để có các kích thước khác nhau. Ở đây, chúng ta kiểm tra ứng dụng đang chạy trên điện thoại hay trên máy tính bảng. Sau đó đưa các tùy chọn kích thước vào một spinner.

  int screenSize = getResources().getConfiguration().screenLayout        & Configuration.SCREENLAYOUT_SIZE_MASK;
  if ((screenSize == Configuration.SCREENLAYOUT_SIZE_LARGE)
        || (screenSize == Configuration.SCREENLAYOUT_SIZE_XLARGE)) {
    sizesArray = getResources().getStringArray(R.array.bannersizes_largesizes);
  } else {
    sizesArray = getResources().getStringArray(R.array.bannersizes_smallsizes);
  }
  ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(mSizesSpinner.getContext(),
        android.R.layout.simple_spinner_dropdown_item, sizesArray);
  adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  mSizesSpinner.setAdapter(adapter);

• Xử lí sự kiện click nút "LOAD ADS"

mLoadButton.setOnClickListener(new View.OnClickListener() {
    @Override    public void onClick(View v) {
        if (mAdView != null) {
            mAdFrameLayout.removeView(mAdView);
            mAdView.destroy();
        }
        mAdView = new AdView(MainActivity.this);
        mAdView.setAdUnitId(getString(R.string.admob_banner_ad_unit_id));
        AdRequest adRequest = new AdRequest.Builder().build();
        mAdFrameLayout.addView(mAdView);
        switch (mSizesSpinner.getSelectedItemPosition()) {
            case 0:
                mAdView.setAdSize(AdSize.BANNER);
                break;
            case 1:
                mAdView.setAdSize(AdSize.LARGE_BANNER);
                break;
            case 2:
                mAdView.setAdSize(AdSize.SMART_BANNER);
                break;
            case 3:
                mAdView.setAdSize(AdSize.FULL_BANNER);
                break;
            case 4:
                mAdView.setAdSize(AdSize.MEDIUM_RECTANGLE);
                break;
            case 5:
                mAdView.setAdSize(AdSize.LEADERBOARD);
                break;
        }
        mAdView.loadAd(new AdRequest.Builder().build());
    }
});

Quá đơn giản để thay đổi kích thước của một quảng cáo với một dòng lệnh. Qua đó giúp nâng cao chất lượng của ứng dụng cũng như quảng cáo tiếp cận tới người sử dụng một cách dễ dàng mà không gây khó chịu và phản cảm.

Source code : GitHub

Đây là bài viết được chỉnh sửa thường xuyên. Rất vui lòng đón nhận các ý kiến từ các bạn.