Android

Android – WebView Kullanımı

4 sene önce

Uygumanızdan çıkmadan bir web sayfasına yönlendirme yapmak ya da hazırladığınız bir html sayfayı uygulamanız içerisinde açmak gibi işlemler için WebView‘i kullanabilirsiniz.

WebView Nedir?

WebView, hem uzak sunuculardaki web sayfalarını hem de uygulamanız içerisine koyduğunuz html sayfalarını görüntüleyebileceğiniz bir bileşendir. Bu bileşeni kullanarak uygulamanızdan çıkmadan web sayfalarını görüntüleyebilirsiniz.

Şimdi, basit bir uygulama ile WebView‘in nasıl çalıştığını görelim. Uygulamamız ile webview içerisinde bir web sayfasını açalım.

Tasarım

Layout klasörü içerisinde yer alan activity_main dosyamızın içerisine WebView bileşenini koyuyoruz.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

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

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<WebView

android:id="@+id/webView1"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

Kodlama (MainActivity)

MainActivity sınıfımızın içerisine de aşağıdaki kodları yazıyoruz.

package org.kod5.android;

import android.app.Activity;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

	private WebView webView;

	@Override
	protected void onCreate(Bundle savedInstanceState) { // Bu metod uygulama açıldığında çalıştırılan metod.

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// webView'i tasarımdakiyle bağlıyoruz.
		webView = (WebView) findViewById(R.id.webView1);

		// webView'i JavaScript kodlarını çalıştıracak şekilde set ediyoruz.
		webView.getSettings().setJavaScriptEnabled(true);

		// Sayfanın yüklendiğinin anlaşılması için ProgressDialog açıyoruz.
		final ProgressDialog progressDialog = ProgressDialog.show(this, "KOD5",
				"Sayfa Yükleniyor...", true);

		webView.setWebViewClient(new WebViewClient() {

			// Sayfa Yüklenirken bir hata oluşursa kullanıcıyı uyarıyoruz.
			public void onReceivedError(WebView view, int errorCode,
					String description, String failingUrl) {
				Toast.makeText(getApplicationContext(), "Sayfa Yüklenemedi!",
						Toast.LENGTH_SHORT).show();
			}

			// Sayfanın yüklenme işlemi bittiğinde progressDialog'u kapatıyoruz.
			@Override
			public void onPageFinished(WebView view, String url) {
				super.onPageFinished(view, url);
				if (progressDialog.isShowing())
					progressDialog.dismiss();
			}
		});

		//Web sayfamızın url'ini webView'e yüklüyoruz.
		webView.loadUrl("http://www.kod5.org");

	}
}

package org.kod5.android;

import android.app.Activity;

import android.app.ProgressDialog;

import android.os.Bundle;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.Toast;

public class MainActivity extends Activity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) { // Bu metod uygulama açıldığında çalıştırılan metod.

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// webView'i tasarımdakiyle bağlıyoruz.

webView = (WebView) findViewById(R.id.webView1);

// webView'i JavaScript kodlarını çalıştıracak şekilde set ediyoruz.

webView.getSettings().setJavaScriptEnabled(true);

// Sayfanın yüklendiğinin anlaşılması için ProgressDialog açıyoruz.

final ProgressDialog progressDialog = ProgressDialog.show(this, "KOD5",

"Sayfa Yükleniyor...", true);

webView.setWebViewClient(new WebViewClient() {

// Sayfa Yüklenirken bir hata oluşursa kullanıcıyı uyarıyoruz.

public void onReceivedError(WebView view, int errorCode,

String description, String failingUrl) {

Toast.makeText(getApplicationContext(), "Sayfa Yüklenemedi!",

Toast.LENGTH_SHORT).show();

}

// Sayfanın yüklenme işlemi bittiğinde progressDialog'u kapatıyoruz.

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

if (progressDialog.isShowing())

progressDialog.dismiss();

}

});

//Web sayfamızın url'ini webView'e yüklüyoruz.

webView.loadUrl("http://www.kod5.org");

}

Kodlar içerisinde yer alan açıklama satırlarında, gerekli bazı açıklamaları yazdım. Bunlar dışında kodu incelersek;

ProgressDialog‘un kullanımını gördük. ProgressDialog, kullanıcıya bir işlem yapıldığının uyarısını vermek için kullanılır. Burada da sayfanın yüklendiğini belirtmek için kullandık. show() metoduyla açıp, dismiss() metoduyla kapattık.
WebViewClient sınıfı, web sayfasının handle edildiği sınıftır. Bu sınıf sayesinde;
- Sayfa yüklenirken bir hata oluşursa bunu yakalayıp kullanıcıyı bilgilendirebiliyoruz.
- Sayfa tamamen yüklendiği anda ProgressDialog‘u kapatabiliyoruz.

İnternet İzni (Android Manifest)

Uygulamamızın web sayfasını açabilmesi için cihazın internetini kullanması gerekiyor. Bu sebeple kullanıcı uygulamayı yüklerken kullanıcıdan internet kullanımı için izin almalıyız. Bu işlem için Android Manifest dosyamızın içerisine aşağıda gördüğünüz 10. satırı ekliyoruz.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.kod5.android"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />
    
    <uses-permission android:name="android.permission.INTERNET" />
    
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="org.kod5.android.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

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

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

package="org.kod5.android"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="19" />

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

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="org.kod5.android.MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Ekran Görüntüleri

Uygulamamız aşağıdaki gibi gözükmektedir.

WebView’in daha birçok farklı kullanım alanı mevcut. Bu yazıda temel kullanımı için örnek uygulama hazırladık. İlerleyen yazılarda farklı kullanımlarınıda göreceğiz.

Kaynak Kodlar

Uygulama dosyaları için: https://github.com/mursidyazar/Android-WebView.git

Benzer Yazılar

Android Görsel Bileşenler;

Mürşid YAZAR

Yıldız Teknik Üniversitesi Bilgisayar Mühendisliği mezunudur. Java dilinin temellerine hâkimdir. iGones’da Mobil Uygulama Geliştirici olarak çalışmaktadır. Genellikle Android uygulamaları geliştiren ve bu alanda çalışırken başkalarına da yardımcı olmayı görev edinen bir YAZARdır.

http://kod5.org

Müslüm Gümüşlüoğlu

İyi günler kolay gelsin, webview le dosya seçtirip post ile gönderme işlemi yapamak istiyorum fakat problem şu 4.4 kitkat da bu olmuyor diger versiyonlarda yapabilyiorum. Bu problemim için bir çözüm öneriniz varmı acaba.
- Mürşid YAZAR
  
  İyi günler Müslüm Bey,
  
  Karşılaştığınız problem KitKat’a geçiş sırasında karşılaşılan bug’lardan bir tanesi. Hatayı anlamanız açısından aşağıda paylaştığım ilk iki linki incelemeniz faydalı olacaktır.
  3. linkte bu problem için yazılmış bir çözüm var. Kodunuza nasıl entegre edeceğiniz ayrıntılı bir şekilde anlatılmış. Umarım faydalı olur sizin için.
  
  Size de kolay gelsin, iyi çalışmalar.
  
  1- https://code.google.com/p/android/issues/detail?id=62220
  2- http://stackoverflow.com/questions/19882331/html-file-input-in-android-webview-android-4-4-kitkat
  3- https://github.com/cdibened/filechooser
  - Müslüm Gümüşlüoğly
    
    İlginiz için çok teşekkür ederim.
Pingback: Android – TextView ve EditText Kullanımı()
Pingback: Android – ImageView Kullanımı()
Yiğit

Merhaba aynı şekilde yapıyorum fakat apk olarak çıkartacağımda verdiğim izinler otomatik olarak AndroidManifest dosyasından siliniyor yardım edebilir misiniz ?
- Mürşid YAZAR
  
  Merhaba Yiğit, apk’ya dönüştürmek için bir program falan mı kullanıyorsun? Böyle bir durumla karşılaşmamıştım. Bir program kullanıyorsan onda bir sıkıntı olabilir. Bu arada apk’ya dönüştürme işlemini test için falan yapıyorsan, direk bin klasörü altında apk dosyası oluşturuluyor otomatik olarak. O apk dosyasını cihazlara yükleyebilirsin.
Can YİĞİTEROL

Merhaba ben Yaptım ancak Sitede herhangi biyere tıklayınca Yeni tarayıcıda açıyor nasıl düzeltebilirim ?
- Mürşid YAZAR
  
  Merhaba Can,
  
  Normalde WebView’in browser’a yönlendirmemesi lazım. Sorun üzerine ufak bir araştırma yaptım. Bazı durumlarda dediğin gibi olabiliyormuş. Aşağıdaki cevabı inceleyebilirsin. WebViewClient’ın bir metodunu daha override etmen gerekiyor. Onu eklersen muhtemelen düzelir.
  
  http://stackoverflow.com/a/2379054
Pingback: Android M ile Gelen Özellikler | Kod5.org()
Pingback: Android – SeekBar Kullanımı | Kod5.org()
Pingback: Android – Toast Kullanımı | Kod5.org()
Mesut

İyi günler ben şunu sormak istiyorum.Webwiew de siteyi açıyor ama siteden dosya indirmesi yapmıyor.Bu sorunu nasıl cozebilirim
- Mürşid YAZAR
  
  İyi günler Mesut bey,
  
  Güvenlik sebebiyle izin vermiyor olabilir. Aşağıdaki linklerdeki çözümü uygulayabilirsiniz. Kolay gelsin.
  
  http://stackoverflow.com/questions/10069050/download-file-inside-webview
  http://stackoverflow.com/questions/13795364/webview-does-not-download-file
Serdar

Selam,
Ben google ın politikası hakkında bir bilgi almak istiyorum. bir apk nın webview yüzünden banlanması muhtemelmidir. Burada bir kontrol eksik. Herhangi bir siteyi kendi sitem gibi uygulamamın içine gömebiliyorum. Google bunun iiçin kesin bir önlem almiştir. Sitemi google a bir yerde göstermem gerekiyor gibi geliyor. email vb . Kendi sitem için webview kullanacağım ama bir şeyleri eksik yaptığım içinde banlanmasın istiyorum.
- Mürşid YAZAR
  
  Merhaba, alttaki satırları kodunuza eklerseniz zoom kontrolleri gözükmeyecektir.
  webView.getSettings().setBuiltInZoomControls(false);
  webView.getSettings().setSupportZoom(false);
  
  Ayrıca api 11 ve üzeri için şu satırı da kullanabilirsiniz;
  webView.getSettings().setDisplayZoomControls(false);
cihan altay

merhaba admin web sitelerinde cıkan yakınlastır uzaklastır bolumunu nasıl etkısızlestırırrım konuyla alakasız ama lutfen bana yardım et uygulama yaptım web site yonlendırdım fakat uygulamaya gırınce sag altta yakınlastır uzaklastır bolumu cıkıyor kaldıramıyorum
- Mürşid YAZAR
  
  Merhaba, alttaki satırları kodunuza eklerseniz zoom kontrolleri gözükmeyecektir.
  webView.getSettings().setBuiltInZoomControls(false);
  webView.getSettings().setSupportZoom(false);
  
  Ayrıca api 11 ve üzeri için şu satırı da kullanabilirsiniz;
  webView.getSettings().setDisplayZoomControls(false);
Burak Sağlık

Merhaba,

Android Studio üzerinde ilk defa kod yazmaya başladım. Ve öğrenmek istediğim nacizane bir sorum var size.

Neyse uzatmadan sorayım hemen;

Bir websitesi üzerinde çalışmaktayım ve bu sitemin küçük bir android uygulamasını geliştirmek istedim. Her neyse, webview kullandım manifest’ten de gerekli izinleri sağladım (internet, kamera, depolama alanı v.b. gibi) uygulamayı çalıştırdım siteme giriş yaptım herşey çok güzel çalışıyor ama tek sıkıntı şu; normalde telefonun kendi tarayıcısında aynı siteye girip fotoğraf eklemek için dosya seç’e tıklayınca hemen kamera ve belgeler gibi bir bölüm çıkıp yükleyeceğim fotoğrafı seçebiliyorum fakat webview de birşeyler eksik sanırım bir türlü dosya seç’e tıkladığımda aynı şey olmuyor. Butona tıklanılabiliyor ama herhangi bir işlem görmüyor.

Sorunumu google’da heryerde aradım fakat bulamadım. Problem nerede acaba hala anlamış değilim. Gerekli manifest ve java kodları veya farklı bir işlem için lütfen yardımcı olun.

Şimdiden teşekkür ederim.
- Mürşid YAZAR
  
  Merhaba, aşağıdaki linkleri inceleyebilirsiniz. Umarım faydası olur.
  http://stackoverflow.com/a/28601729
  https://code.google.com/p/android/issues/detail?id=62220
  http://stackoverflow.com/a/7041918
Abdullah

sizde burası böyle oluyor http://i.imgur.com/YbMmiKt.png

bende neden öyle olmuyorda böyle oluyor

http://i.imgur.com/UsNXyRu.png

bide ekranın altında bulamadıgım bu mesaj şeysi cıkıyor

http://i.imgur.com/DxBdxYK.png

yardımcı olabilirseniz sevinirim
- Mürşid YAZAR
  
  Uygulamayı oluştururken size kullanılacak tema sorulur. Yeni templatelerden biri bu sizin gösterdiğiniz. Sağ alttaki FloatingActionButton. Onu activity_main.xml içerisinden ve MainActivity.java içerisinden de silersen gözükmez. Üst kısım da Toolbar onu da istersen kaldırabilirsin. Ya da google da ActionBar kullanımı diye aratarak isteğinize göre değiştirebilirsiniz.
Muhammeb Mermer

hocam musaıt oldugunuzda yardım edebılı mısınız hata alıyorum, uygulamayı ımport edıyorum olmuyor, calıstırmıyor 🙁
Yunus Aydin

Merhaba hocam,Sizin yazıdığınız tüm kodları yazdım ama 3 hata çıktı.”R” hatası veriyor.Yardımcı olurmusunuz.
https://uploads.disquscdn.com/images/bdc51fc4940f8a62919204ef658019c12774833f6bc73d50e8af886ced6b295c.png
Yunus Emre Özpınar

merhaba .
benim problemim şu.
uygulamamın içinde bir WebView var ve normalde gayet iyi çalışıyor. Sıradan websitelerini açabiliyor. Fakat
https://paperplanes.world/
https://www.progressivewebflap.com/
gibi adresleri yükleyemiyor.
Kesinlikle bir yerlerde kodlama eksiği yapıyorum fakat bulamadım. Bu şekilde ki siteleri WebView üzerinde açmak için kodlama kısmında neler eklemeliyim.

NOT: Bunun mümkün olduğunu biliyorum çünkü http://www.appsgeyser.com üzerinden website görüntülemesi yapan bir uygulama yaptığımda bu websiteleri sorunsuz olarak çalışıyor. Yani sorun benim kodlama eksiğimden kaynaklanıyor. addJavascriptInterface kullanmam mı gerekiyor acaba
şimdiden teşekkür ederim
aarslqnn

http://www.aattk.net/2017/08/basit-webview-uygulamas-yapm-android.html
burayada bakabilirsiniz gayet iyi anlatmış
Sercan Dorman

Kardeşim ne zaman bişey arasam internette, sitende cevabını gördüğüm an
rahatlıyorum. Muhteşem bir site yapmışsın, çok güzel anlatımın var ve
verdiğin emek de ayrıca önemli. Teşekkür ederim, başarılarının devamını
dilerim.
murat kandemir

Merhaba, webview ile belli sitelerin açıldığı bir uygulama yaptım. fakat bazı siteler mobil olarak açılmıyor. telefonda webdeki gibi açılıyor. Her siteyi otomatik mobile göre uyarlayabilir miyim?