If you need a picture collection and source code, please like and follow the collection and leave a message in the comment area~~~

On the top of the homepage of the e-commerce app, there is a column of advertisement banners in a prominent position, and the advertisement banners will be rotated, which is very eye-catching. This kind of advertisement rotation function has greatly contributed to the promotion of popular things.

The carousel video has been uploaded to my homepage, if necessary, you can go to watch it by yourself~

1. Requirements description

As a frequent visitor to the homepage of the App, the advertising carousel special effects have long been known, and its interface is also commonplace. The effect is as follows

In addition to the ad picture, there is a row of dots at the bottom of the ad bar. These dots are called indicators. Whenever the number of advertisements is rotated, the indicator will highlight the number of dots, and the rest of the dots will display White, relying on the user to know which ad is currently being played

2. Interface Design

The controls used are as follows

1: relative view

2: radio group

3: Page flip view

4: Page turning adapter

In addition, the advertisement rotates to the next advertisement every two or three seconds. This automatic rotation can use Handler+Runnable, so it is necessary to package the advertisement bar as a separate control so that it can be added to each page anytime and anywhere.

3. Key parts

1: Define the XML layout file of the banner

Flip view with relative layout and inner nesting to accommodate ad images

2: Write the Java definition code for the banner

3: Add a picture list for the banner

Specify the source and number of ad images

4: Realize the automatic rotation function of the advertisement bar

After adding the picture list to the advertisement strip, you have to set specific rotation rules

5: Use the banner control in the activity page

Declare paths when referencing

4. Code

Java class

package com.example.chapter10;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.example.chapter10.util.Utils;
import com.example.chapter10.widget.BannerPager;
import com.example.chapter10.widget.BannerPager.BannerClickListener;

import java.util.ArrayList;
import java.util.List;

@SuppressLint("DefaultLocale")
public class BannerPagerActivity extends AppCompatActivity implements BannerClickListener {
    private static final String TAG = "BannerPagerActivity";
    private TextView tv_pager;

    private List<Integer> getImageList() {
        ArrayList<Integer> imageList = new ArrayList<Integer>();
        imageList.add(R.drawable.banner_1);
        imageList.add(R.drawable.banner_2);
        imageList.add(R.drawable.banner_3);
        imageList.add(R.drawable.banner_4);
        imageList.add(R.drawable.banner_5);
        return imageList; // 返回默认的广告图片列表
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner_pager);
        tv_pager = findViewById(R.id.tv_pager);
        // 从布局文件中获取名叫banner_pager的广告轮播条
        BannerPager banner = findViewById(R.id.banner_pager);
        // 获取广告轮播条的布局参数
        LayoutParams params = (LayoutParams) banner.getLayoutParams();
        params.height = (int) (Utils.getScreenWidth(this) * 250f / 640f);
        banner.setLayoutParams(params); // 设置广告轮播条的布局参数
        banner.setImage(getImageList()); // 设置广告轮播条的广告图片列表
        banner.setOnBannerListener(this); // 设置广告轮播条的广告点击监听器
        banner.start(); // 开始广告图片的轮播滚动
    }

    // 一旦点击了广告图，就回调监听器的onBannerClick方法
    public void onBannerClick(int position) {
        String desc = String.format("您点击了第%d张图片", position + 1);
        tv_pager.setText(desc);
    }

}

scroll view class

package com.example.chapter10;

import android.os.Bundle;
import android.widget.ListView;

import androidx.appcompat.app.AppCompatActivity;

import com.example.chapter10.adapter.PlanetListAdapter;
import com.example.chapter10.bean.Planet;
import com.example.chapter10.widget.NoScrollListView;

public class NoscrollListActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_noscroll_list);
        PlanetListAdapter adapter1 = new PlanetListAdapter(this, Planet.getDefaultList());
        // 从布局文件中获取名叫lv_planet的列表视图
        // lv_planet是系统自带的ListView，被ScrollView嵌套只能显示一行
        ListView lv_planet = findViewById(R.id.lv_planet);
        lv_planet.setAdapter(adapter1); // 设置列表视图的行星适配器
        lv_planet.setOnItemClickListener(adapter1);
        lv_planet.setOnItemLongClickListener(adapter1);
        PlanetListAdapter adapter2 = new PlanetListAdapter(this, Planet.getDefaultList());
        // 从布局文件中获取名叫nslv_planet的不滚动列表视图
        // nslv_planet是自定义控件NoScrollListView，会显示所有行
        NoScrollListView nslv_planet = findViewById(R.id.nslv_planet);
        nslv_planet.setAdapter(adapter2); // 设置不滚动列表视图的行星适配器
        nslv_planet.setOnItemClickListener(adapter2);
        nslv_planet.setOnItemLongClickListener(adapter2);
    }
}

XML file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 自定义的广告轮播条，需要使用全路径 -->
    <com.example.chapter10.widget.BannerPager
        android:id="@+id/banner_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingTop="10dp"
        android:text="上面的广告图片会自动轮播"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RadioGroup
        android:id="@+id/rg_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

It's not easy to create and find it helpful, please like, follow and collect~~~

Android Studio App development actual project advertising rotation (with source code can be used for large jobs)