Merhaba arkadaşlar, bugün sizlere Scorp uygulamasında olduğu gibi arka planda video oynatmayı göstereceğim. Scorpu incelediyseniz eğer arka planda sürekli olarak devam eden bir video lu login sistemi olduğunu göreceksiniz. Bende sizlere video lu bir login sayfası tasarlayacağım öncelikle android uygulamamızın layout kısmının nasıl olacağına bakalım :
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:background="#3023AE"
android:layout_height="fill_parent" tools:context=".MainActivity">
<VideoView
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:id="@+id/video_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<FrameLayout
android:background="#806666ff"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_gravity="center"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<com.iangclifton.android.floatlabel.FloatLabel
android:layout_marginTop="5dp"
android:id="@+id/txt_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Kullanıcı Adı" />
<com.iangclifton.android.floatlabel.FloatLabel
android:layout_marginTop="5dp"
android:inputType ="textPassword"
android:id="@+id/txt_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Parola" />
<Button
android:textColor="#fff"
android:background="@drawable/bttn_selector"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="GİRİŞ"
android:id="@+id/bttn_login" />
</LinearLayout>
<TextView
android:textSize="30sp"
android:textColor="#ffff"
android:text="MOBİLHANEM"
android:id="@+id/txt_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top" />
</FrameLayout>
</RelativeLayout>
Yukarıda ki yapıyı incelerseniz eğer en üstte bir başlık olduğunu göreceksiniz başlığa kod kısmında font verdik. Font verebilmemiz içinde .ttf veya .otf uzantılı olan istediğimiz font yapısını assets klasörü altında fonts dosyası oluşturup içine atmamız gerekmektedir.
Video için VideoView yapısından faydalandım ve video nun ön tarafında FrameLayout kullandım bu layout da Edittext ler ve Button olduğunu göreceksiniz. Burada dikkat etmeniz gereken şey FrameLayout un background unu transparent yapmak çünkü direkt olarak renk kodu verirseniz arka plan da var olan VideoView i göremeyeceksiniz.
( Edittext ler içinde Float Label kütüphanesinden faydalandım uygulamayı indirip çalıştırınca animasyonlu bir yapı olduğunu göreceksiniz )
Float Kütüphanesini kullanabilmek içinde build.gradle kısmına aşağıdaki kod parçasını yapıştırıyoruz.
compile 'com.iangclifton.android:floatlabel:1.0.4'
Android Studio da assets folder ı şu şekilde oluşturuyoruz uygulamaya sağ tıklayıp :
New -> Folder -> Assets Folder seçeneğini seçiyoruz. Daha sonra oluşturduğumuz Assets klasörü içine fonts klasörünü oluştur diyoruz.
Uygulamamız da göstereceğimiz video yu da raw klasörü altına atmamız gerekmektedir. Raw klasörünü oluşturmak için res klasörüne sağ tıklıyoruz:
New -> Directory dedikten sonra karşımıza gelen ekranda klasör ismine raw yazıyoruz. Daha sonra istediğimiz video yu raw klasörü altına atıyoruz. ( uygun video formatlarında olması gerekiyor )
Şimdi gelelim kod kısmına MainActivity sınıfımızda aşağıdaki gibi bir yapıya sahip olacaktır.
MainActivity.java
package com.mobilhanem.loginpageplayvideo;
import android.app.Activity;
import android.graphics.Typeface;
import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.VideoView;
import com.iangclifton.android.floatlabel.FloatLabel;
public class MainActivity extends Activity {
private TextView txt_title;
private MediaPlayer mp;
private Button login_button;
private FloatLabel username, password;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mp = new MediaPlayer();
txt_title = (TextView)findViewById(R.id.txt_name);
Typeface face=Typeface.createFromAsset(getAssets(),"fonts/Regular.otf");
txt_title.setTypeface(face);
username = (FloatLabel)findViewById(R.id.txt_username);
password = (FloatLabel)findViewById(R.id.txt_password);
login_button = (Button)findViewById(R.id.bttn_login);
VideoView video = (VideoView) findViewById(R.id.video_view);
Uri video_path = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.video);
video.setVideoURI(video_path);
video.start();
video.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
mp.setLooping(true);
}
});
login_button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(username.getEditText().getText().toString().equals("mobilhanem") && password.getEditText().getText().toString().equals("mobilhanem")){
Toast.makeText(getApplicationContext(),"OK!",Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(getApplicationContext(),"NOT OK!",Toast.LENGTH_SHORT).show();
}
}
});
}
}
Yukarıdaki kodları incelediğimizde layout kısmında yer alan VideoView in video yu çalıştırması için önce videonun path ini aldığımı göreceksiniz. Video yu çalıştırdıktan sonra da video sona gelse bile hiç durmadan çalışmasını istiyorsak setLooping methodunu true yapıyoruz. İşte arka planda video oynatmak bu kadar kolay bir hale geliyor umarım işinize yarar.
Ders hakkında soru ve önerilerinizi çekinmeden yorum bırakabilirsiniz. Bol Android’li günler sizin olsun 🙂
Sizlerden ricamız facebook.com/mobilhanem sayfamızı beğenmenizdir. Diğer dersimde görüşmek üzere kendinize iyi bakın..
Tüm Android Ders, Proje ve Kaynak Kodlar için tıklayınız.
0