
app/src/main/res/layout/activity_main.xml で Viewを重ね合わせるように追加
app/src/main/res/drawable/radar.xml
これらを上から下へアニメーションする定義。
app/src/main/res/anim/radar.xml
仕上げは
app/src/main/java/asia/remix/radar/MainActivity.java
https://github.com/remixgrjp/Radar-animation
android.graphics.LinearGradient
https://developer.android.com/reference/android/graphics/LinearGradient
で実装するより容易で滑らか!?
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <▼▼▼/> <View android:id="@+id/radarView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" android:background="@drawable/radar" /> <▲▲▲/> </androidx.constraintlayout.widget.ConstraintLayout>上記で追加した radarView で指定した android:background="@drawable/radar" でグラデーションを指定。
app/src/main/res/drawable/radar.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:top="-2dp" android:right="-2dp" android:left="-2dp" > <shape> <stroke android:width="2dp" android:color="#33FF33" /> <gradient android:type="linear" android:startColor="#00000000" android:endColor="#2F00FF00" android:angle="270" /> </shape> </item> </layer-list>gradient タグの android:type は linear,radial,sweep から。android:startColor,endColor でグラデーションの色。android:angle でグラデーションの方向、x軸方向(右/東)基準とした時計回りの角度(270度は上/北スタートから下/南エンド)。さらにレーダーっぽく先頭ラインを明るくするため View の枠で表現。ただし下枠線のみとするため上枠線、左枠線、右枠線を消す item タグがポイント。

app/src/main/res/anim/radar.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" > <translate android:fromXDelta="0%" android:toXDelta="0%" android:fromYDelta="-100%" android:toYDelta="100%" android:repeatCount="-1" android:repeatMode="restart" android:duration="2500" /> </set>画面の高さ分上にはみ出た状態-100%から下にはみ出た状態100%移動。repeatCount="-1" でリピート。duration="2500" で 2.5秒。
仕上げは
app/src/main/java/asia/remix/radar/MainActivity.java
package asia.remix.radar; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; //▼▼▼ import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.View; //▲▲▲ public class MainActivity extends AppCompatActivity{ @Override protected void onCreate( Bundle savedInstanceState ){ super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); //▼▼▼ View radarView = (View)findViewById( R.id.radarView ); Animation animation= AnimationUtils.loadAnimation( this, R.anim.radar ); radarView.startAnimation( animation ); //▲▲▲ } }ソースは github に。コンパイル済みのAPKもこちらに。
https://github.com/remixgrjp/Radar-animation
android.graphics.LinearGradient
https://developer.android.com/reference/android/graphics/LinearGradient
で実装するより容易で滑らか!?