Tiktok ve Instagram Reels Gibi Kaydırılabilir Video Oluşturma

Mobil yazılımlarınızın kullanıcı ara yüzlerini belirlerken kullanıcı alışkanlıklarını iyi bir şekilde tespit ederek tasarıma aktarmanız müşteri potansiyelini arttıracaktır.

Bu makale Tiktok ve Instagram Reels’de kullanılan kaydırılabilir (swipeable) video alanlarını Android uygulamada oluşturmayı örnekleyecektir.

Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.

RecyclerView ile videoları listeleyeceğiz. ViewPager2 ile videolar arasındaki geçişi (pager) sağlayacağız. Projenin oluşturma aşamaları;

1- Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Viewpager2 kütüphanesini yüklüyoruz.

implementation "androidx.viewpager2:viewpager2:1.0.0"

1	implementation "androidx.viewpager2:viewpager2:1.0.0"

2- AndroidManifest Dosyasına İnternet İzni Ekleme

Videoları izleyebilmek için internet iznine ihtiyaç bulunmaktadır. Aşağıdaki izin kodunu da AndroidManifest.xml dosyasında application tag’nin üst kısmına yerleştirin.

<uses-permission android:name="android.permission.INTERNET"/>

1	<uses-permission android:name="android.permission.INTERNET"/>

3- Arayüz Oluşturma

İlk önce bir video item için tasarım kodlaması yapalım. Video görüntülenmesi için VideoView kullanacağız. single_video.xml;

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <VideoView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/videoview"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"/>
    <ProgressBar
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/videoProgressBar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintVertical_bias="0.888">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textVideoTitle"
            android:paddingStart="5dp"
            android:paddingTop="5dp"
            android:paddingEnd="5dp"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="15"
            android:text="Title"
            android:textColor="#fff"
            android:textSize="25sp"
            android:textStyle="bold"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textVideoDescription"
            android:paddingStart="5dp"
            android:paddingTop="10dp"
            android:paddingEnd="5dp"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="15"
            android:text="Description"
            android:textColor="#fff"
            android:textSize="16sp"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

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

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

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

<VideoView

android:layout_width="0dp"

android:layout_height="0dp"

android:id="@+id/videoview"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="1.0"/>

<ProgressBar

android:layout_width="30dp"

android:layout_height="30dp"

android:id="@+id/videoProgressBar"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="1.0"

app:layout_constraintVertical_bias="0.888">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/textVideoTitle"

android:paddingStart="5dp"

android:paddingTop="5dp"

android:paddingEnd="5dp"

android:shadowDx="0"

android:shadowDy="0"

android:shadowRadius="15"

android:text="Title"

android:textColor="#fff"

android:textSize="25sp"

android:textStyle="bold"/>

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/textVideoDescription"

android:paddingStart="5dp"

android:paddingTop="10dp"

android:paddingEnd="5dp"

android:shadowDx="0"

android:shadowDy="0"

android:shadowRadius="15"

android:text="Description"

android:textColor="#fff"

android:textSize="16sp"/>

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Videoları sayfalandırabilmrk için ViewPager2 elementimizi activity_main.xml dosyasında tanımlayalım.

<?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">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?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">

<androidx.viewpager2.widget.ViewPager2

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

4- Swipeable Video Oluşturma

İlk önce videoların url, başlık ve açıklama bilgilerini ulaşabilmek için get metodunu barındıran Video sınıfını oluşturalım.

public class Video {
    private String url,title,desc;
    public Video(String url, String title, String desc) {
        this.url = url;
        this.title = title;
        this.desc = desc;
    }
    public String getUrl() {
        return url;
    }

    public String getTitle() {
        return title;
    }

    public String getDesc() {
        return desc;
    }
}

public class Video {

private String url,title,desc;

public Video(String url, String title, String desc) {

this.url = url;

this.title = title;

this.desc = desc;

}

public String getUrl() {

return url;

}

public String getTitle() {

return title;

}

public String getDesc() {

return desc;

}

RecyclerView.Adapter metodu ile video öğesini (item) tanımlayarak, liste oluşturmayı VideoAdapter sınıfında kodlayalım.

import android.media.MediaPlayer;
import android.view.*;
import android.widget.*;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.viewholder>{
    ArrayList<Video> videos;
    public VideoAdapter(ArrayList<Video> videos) {
        this.videos = videos;
    }

    @NonNull
    @Override
    public viewholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.single_video,parent,false);
        return new viewholder(view);
    }
    @Override
    public void onBindViewHolder(@NonNull viewholder holder, int position) {
        holder.setdata(videos.get(position));
    }

    @Override
    public int getItemCount() {
        return videos.size();
    }

    class viewholder extends RecyclerView.ViewHolder {

        VideoView videoview;
        TextView title,desc;
        ProgressBar probar;
        //Video başlık, açıklama,Videoview gibi elementleri tanımalama
        public viewholder(@NonNull View itemView) {
            super(itemView);
            videoview = itemView.findViewById(R.id.videoview);
            title =itemView.findViewById(R.id.textVideoTitle);
            desc = itemView.findViewById(R.id.textVideoDescription);
            probar = itemView.findViewById(R.id.videoProgressBar);
        }

        void setdata(Video obj){
            videoview.setVideoPath(obj.getUrl());
            title.setText(obj.getTitle());
            desc.setText(obj.getDesc());
            //Video yüklenme anını ProgressBar ile gösterip, videoyu başlatma
            videoview.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                @Override
                public void onPrepared(MediaPlayer mediaPlayer) {
                    probar.setVisibility(View.INVISIBLE);
                    mediaPlayer.start();
                }
            });

            videoview.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
                @Override
                public void onCompletion(MediaPlayer mediaPlayer) {
                    mediaPlayer.start();
                }
            });
        }
    }
}

import android.media.MediaPlayer;

import android.view.*;

import android.widget.*;

import androidx.annotation.NonNull;

import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.viewholder>{

ArrayList<Video> videos;

public VideoAdapter(ArrayList<Video> videos) {

this.videos = videos;

}

@NonNull

@Override

public viewholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.single_video,parent,false);

return new viewholder(view);

}

@Override

public void onBindViewHolder(@NonNull viewholder holder, int position) {

holder.setdata(videos.get(position));

}

@Override

public int getItemCount() {

return videos.size();

}

class viewholder extends RecyclerView.ViewHolder {

VideoView videoview;

TextView title,desc;

ProgressBar probar;

//Video başlık, açıklama,Videoview gibi elementleri tanımalama

public viewholder(@NonNull View itemView) {

super(itemView);

videoview = itemView.findViewById(R.id.videoview);

title =itemView.findViewById(R.id.textVideoTitle);

desc = itemView.findViewById(R.id.textVideoDescription);

probar = itemView.findViewById(R.id.videoProgressBar);

}

void setdata(Video obj){

videoview.setVideoPath(obj.getUrl());

title.setText(obj.getTitle());

desc.setText(obj.getDesc());

//Video yüklenme anını ProgressBar ile gösterip, videoyu başlatma

videoview.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {

@Override

public void onPrepared(MediaPlayer mediaPlayer) {

probar.setVisibility(View.INVISIBLE);

mediaPlayer.start();

}

});

videoview.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {

@Override

public void onCompletion(MediaPlayer mediaPlayer) {

mediaPlayer.start();

}

});

}

Son olarak MainActivity sınıfında video url, başlık, açıklama bilgilerini Video ve VideoAdapter sınıflarına aktararak kaydırılabilir listeyi oluşturalım.

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.WindowManager;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    ViewPager2 viewPager2;
    ArrayList<Video> videos;
    @SuppressLint("MissingInflatedId")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Videoların FULLSCREEN olarak gösterilmesi için bir kod
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

        viewPager2 = (ViewPager2)findViewById(R.id.viewpager);
        videos = new ArrayList<>();

        Video obj1 = new Video("https://smality.com/Circle-Search-Google.mp4","Circle Search in Google","Circle to Search, only on Android");
        videos.add(obj1);

        Video obj2 = new Video("https://smality.com/Google-AI-Bard.mp4","Using Shorter in Google's AI Bard","Finding the perfect caption can be ruff. \uD83D\uDC3E bard.google.com");
        videos.add(obj2);

        Video obj3 = new Video("https://smality.com/Using-Multisearch-Lens.mp4","Using Multisearch in Lens","It's a date with Lens at @artinstitutechi\n");
        videos.add(obj3);

        Video obj4= new Video("https://smality.com/Google-Career.mp4","Google Career","You are now channeling your potential");
        videos.add(obj4);

        viewPager2.setAdapter(new VideoAdapter(videos));
    }
}

import androidx.appcompat.app.AppCompatActivity;

import androidx.viewpager2.widget.ViewPager2;

import android.annotation.SuppressLint;

import android.os.Bundle;

import android.view.WindowManager;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

ViewPager2 viewPager2;

ArrayList<Video> videos;

@SuppressLint("MissingInflatedId")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Videoların FULLSCREEN olarak gösterilmesi için bir kod

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

viewPager2 = (ViewPager2)findViewById(R.id.viewpager);

videos = new ArrayList<>();

Video obj1 = new Video("https://smality.com/Circle-Search-Google.mp4","Circle Search in Google","Circle to Search, only on Android");

videos.add(obj1);

Video obj2 = new Video("https://smality.com/Google-AI-Bard.mp4","Using Shorter in Google's AI Bard","Finding the perfect caption can be ruff. \uD83D\uDC3E bard.google.com");

videos.add(obj2);

Video obj3 = new Video("https://smality.com/Using-Multisearch-Lens.mp4","Using Multisearch in Lens","It's a date with Lens at @artinstitutechi\n");

videos.add(obj3);

Video obj4= new Video("https://smality.com/Google-Career.mp4","Google Career","You are now channeling your potential");

videos.add(obj4);

viewPager2.setAdapter(new VideoAdapter(videos));

}

Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.

Tiktok ve Instagram Reels Gibi Kaydırılabilir Video Oluşturma

Tuğba Üstündağ

En çok okunanlar

Android Studio 2.2' de ConstraintLayout Yapısı

GPS ile En Yakın Noktaları Bulma: Android Location Services ve Google Maps Service API

Android ile Harici Sql Veritabanını Projeye Yükleme

Android Image Slider

Kategoriler

En son yazılar

Compose ile Shared Element Transition Animasyonu