Android

Android – WebView Kullanımı

7 sene önce

363 görüntülenme

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.net");

	}
}

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.net");

}

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;

25 Yorum

Müslüm Gümüşlüoğlu dedi ki:

30 Eylül 2014, 13:33

İ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.

Cevapla
- Mürşid YAZAR dedi ki:
  
  1 Ekim 2014, 10:46
  
  İ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
  
  Cevapla
  - Müslüm Gümüşlüoğly dedi ki:
    
    6 Şubat 2015, 13:24
    
    İlginiz için çok teşekkür ederim.
    
    Cevapla
Android – TextView ve EditText Kullanımı dedi ki:

24 Ekim 2014, 17:00

[…] WebView […]

Cevapla
Android – ImageView Kullanımı dedi ki:

30 Ekim 2014, 15:26

[…] WebView […]

Cevapla
Yiğit dedi ki:

20 Mart 2015, 16:59

Merhaba aynı şekilde yapıyorum fakat apk olarak çıkartacağımda verdiğim izinler otomatik olarak AndroidManifest dosyasından siliniyor yardım edebilir misiniz ?

Cevapla
- Mürşid YAZAR dedi ki:
  
  22 Mart 2015, 16:17
  
  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.
  
  Cevapla
Can YİĞİTEROL dedi ki:

22 Mart 2015, 14:16

Merhaba ben Yaptım ancak Sitede herhangi biyere tıklayınca Yeni tarayıcıda açıyor nasıl düzeltebilirim ?

Cevapla
- Mürşid YAZAR dedi ki:
  
  22 Mart 2015, 16:01
  
  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
  
  Cevapla
Android M ile Gelen Özellikler | Kod5.org dedi ki:

30 Mayıs 2015, 01:42

[…] bir Chrome sekmesi açılacak ve link burada çalışacak. Bu ihtiyacı daha önce geliştiriciler WebView kullanarak bir nebze olsun karşılayabiliyordu. Fakat bu yenilik sayesinde Chrome’un bir […]

Cevapla
Android – SeekBar Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:15

[…] WebView […]

Cevapla
Android – Toast Kullanımı | Kod5.org dedi ki:

15 Haziran 2015, 17:19

[…] WebView […]

Cevapla
Mesut dedi ki:

17 Haziran 2015, 15:02

İyi günler ben şunu sormak istiyorum.Webwiew de siteyi açıyor ama siteden dosya indirmesi yapmıyor.Bu sorunu nasıl cozebilirim

Cevapla
- Mürşid YAZAR dedi ki:
  
  18 Haziran 2015, 15:09
  
  İ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
  
  Cevapla
Serdar dedi ki:

10 Eylül 2015, 10:51

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.

Cevapla
- Mürşid YAZAR dedi ki:
  
  16 Aralık 2015, 00:09
  
  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);
  
  Cevapla
cihan altay dedi ki:

14 Aralık 2015, 17:41

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

Cevapla
- Mürşid YAZAR dedi ki:
  
  16 Aralık 2015, 00:16
  
  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);
  
  Cevapla
Burak Sağlık dedi ki:

25 Ocak 2016, 13:49

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.

Cevapla
- Mürşid YAZAR dedi ki:
  
  25 Ocak 2016, 23:50
  
  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
  
  Cevapla
Abdullah dedi ki:

25 Ocak 2016, 20:51

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

Cevapla
- Mürşid YAZAR dedi ki:
  
  25 Ocak 2016, 23:40
  
  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.
  
  Cevapla
Muhammeb Mermer dedi ki:

14 Haziran 2016, 05:04

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

Cevapla
Yunus Aydin dedi ki:

4 Nisan 2017, 01:37

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

Cevapla
Yunus Emre Özpınar dedi ki:

6 Nisan 2017, 13:18

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

Cevapla
aarslqnn dedi ki:

30 Ağustos 2017, 19:06

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

Cevapla
Sercan Dorman dedi ki:

21 Aralık 2017, 16:15

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.

Cevapla
murat kandemir dedi ki:

20 Mart 2018, 11:05

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?

Cevapla
1Hasan Sahin dedi ki:

25 Mayıs 2018, 14:38

Anlatımınız çok güzel fakat sormak istediğim bir konu var, Herşey hazır vede apk’yide yaptım gayet başarılı, peki üst kısımdaki saat bölümünü nasıl gizleyebiliriz acaba, yani tam ekran sadece site açılsın istiyorumda.

Saat- Şarj bilgilerinin olduğu en üst kısmı gizleyemezmiyiz.

Cevapla

WebView Nedir?

Tasarım

Kodlama (MainActivity)

İnternet İzni (Android Manifest)

Ekran Görüntüleri

Kaynak Kodlar

Benzer Yazılar

Benzer Yazılar

25 Yorum

Yorum Yap X