Android Programlama-Navigation Drawer'lı Webview Uygulaması

Bugün sizlere web sitenizin material design‘a uyumlu şık görünümlü bir Android uygulamasının webview kullanılarak nasıl yapılacağını anlatacağız.

Öncelikle şunu ifade etmek isteriz ki yazı dizimizde oldukça fazla İngilizce terim kullanacağız. Türkçe kaynağın oldukça az olmasından dolayı Android jargonunu iyi bilmek açısından terimleri Türkçeleştirmeyeceğiz.

Şimdi öncelikle adım adım neler yapacağımızı sıralayalım.

Uygulamamızın son hali aşağıda yer alan resimdeki gibi olacak;

teknopusula.com’un Android uygulamasının son hali

Uygulamamızda yer alacak olan bileşenler;

  • WebView
  • Navigation Drawer
Navigation Drawer
  • Özelleştirilmiş Action Bar aracı.
Action Bar
  • Takipçilerinizin sizinle irtibata geçebilmesini sağlayacak olan Floating Action Button aracı.
Floating Action Button

Başlamadan önce şunu ifade etmekte fayda var; web sitenizin mobil uyumlu olması çok daha şık bir Android uygulamasına sahip olmanızı sağlayacaktır.

Kullanılacak Araçlar:

İde: Android Studio 2.3

Sanal Cihaz: Nexus S API 23

Öncelikle Android Studio’muzu çalıştıralım ve Create New Project diyelim.

Android Studio Create New Project

Uygulama adını yazdıktan sonra Next’e tıklayın

Android Studio cihaz API seçimi

Burada Phone and Tablet seçilmiş olarak gelecek ve Minimum SDK değerini seçeceğiz. Uygulamamızın çok daha fazla cihaz tarafından uyumlu olarak çalışabilmesi için target olarak API 14 seçtik. Ancak burada dikkat etmeniz gereken şey eğer uygulamanıza daha gelişmiş özellikler ekleyecekseniz mutlaka minimum SDK’nın bunu desteklemesi gerekmektedir.

Next’e tıklayıp ilerledikten sonra Actvity şablonları önümüze gelecek.

Buradan Navigation Drawer Activity‘i seçeceğiz.

Navigation Drawer Activity

Next ve ardından Finish diyerek projemizi açıyoruz.

Projemizde herhangi bir değişiklik yapmadan sanal cihazımızı çalıştırdığımızda önümüze aşağıdaki gibi bir ekran gelecektir;

Uygulamamızın ilk görüntüsü

Uygulamamızı hazırlarken, asıl kodlarımızı yazacağımız MainActivity Java dosyası ile görünümü değiştireceğimiz content_main.xml layout dosyamızı kullanacağız.

Dosya hiyerarşimiz
Öncelikle content_main.xml dosyamızı açalım ve Text kısmında yer alan ve Hello World yazılı TextView bileşenimizi silelim. Ardından Design kısmında WebView bileşenimizi RelativeLayout içerisine sürükleyerek bırakalım ve WebView’imizin id’sini mWebView yapalım.

content_main.xml dosyamızın son hali şağıdaki gibi olacak.

Uygulamamız internet kullanan bir uygulama olduğundan dolayı kullanıcının cihazından internet iznini almamız gerekiyor. Cihazın internet izni, kamera kullanım izni, rehber kullanım izinleri gibi bir takım izinler için Android uygulama yazarken AndroidManifest.xml dosyası kullanılır. Bu dosya bir bakıma uygulamamızın “Ayarlar” dosyası olarak da anlayabiliriz. Gerekli internet bağlantı iznini AndroidManifest.xml dosyasına girmemiz gerekiyor.
Uygulamamızın gerekli izinlerini aldığımız AndroidManifest.xml dosyası

İnternet kullanım izni için kullancağımız kod;

AndroidManifest.xml dosyamızın son hali;

Ardından MainActivity dosyamıza gelelim ve content_main.xml dosyamızda oluşturduğumuz WebView değişkenimizi tanımlıyoruz.

Ardından OnCreate metodu içerisinde değişkenimizi content_main.xml dosyamızda oluşturduğumuz mWebView ile eşleştiriyoruz. Ardından görünmesini istediğimiz web sitemizin adresini loadUrl metodunda değişken olarak giriyoruz.

Bu aşamada uygulamamızı sanal makinada çalıştırdığımızda bazı resimlerin ve özelliklerin çalışmadığı görülecektir. Bunun sebebi Java Script kodlarının uygulamamızda aktif olmaması.

Java Script kodlarının uygulamamız içerisindeki WebView’de çalışması için;

kodlarını ekliyoruz.

Böylece MainActivity dosyamızın son hali aşağıdaki gibidir;

Artık uygulamamızı çalıştırdığımızda web sitemizin uygulamamızda açıldığını göreceksiniz.
Uygulamamızın İlk Çalışması

Bu yazımızda bir web sitesinin Android uygulamasının webview kullanılarak nasıl yapıldığını anlattık.

İlerleyen derslerimizde ise;

  • Cache’leme gibi metodlar kullanarak WebView uygulamamızın performansını arttıracağız,
  • Navigation Drawer’ımızı özelleştireceğiz,
  • Action Bar’ımızı özelleştireceğiz,
  • Floatin Action Butonumuzu aktif hale getireceğiz,
  • Uygulamamızın .apk dosyasını oluşturacak ve uygulamamızı Android markete yükleyeceğiz.

Uygulamanın son halini Google Play Store üzerinden teknopusula şeklinde aratarak ya da aşağıdaki resime tıklayarak indirebilirsiniz.

Bu şekilde hem bizlere destek olarak çok daha istekli bir şekilde ders serilerimize devam etmemizi sağlayabilir hem de dersimiz sonunda projemizin bitmiş halini inceleme fırsatı edinebilirsiniz.

Tüm bu projeyi GitHub profilimizden indirebilir ve Projenin tüm versiyonlarına GitHub üzerinden erişebilirsiniz. Ayrıca Github’dan projeyi kendi Android Studio’nuza indirerek kendi bilgisayarınızda uygulamayı çalıştırabilirsiniz.

Github Hesabı

6 YORUMLAR

  1. Hocam r10’dan geliyorum. Yorumlar önemlidir 🙂 Emeğe saygı.

    Bu arada full views ve açılışta splash arkaplan özellikli ders ekler misiniz

    • Hoş geldiniz 🙂 Tabi ki eklerim ilerleyen zamanda ekleyince R10 üzerinden de duyururum.
      Kolay Gelsin

  2. Hocam öncelikle elinize sağlık çok güzel olmuş ama birde video çekimi yapsanız çok harika olurdu. Kodlama bilmeyen ben gibi insanlar anlamıyor bazı şeyleri mesela ben şu adımı geçemedim.

    Ardından Design kısmında WebView bileşenimizi RelativeLayout içerisine sürükleyerek bırakalım ve WebView’imizin id’sini mWebView yapalım.

    burada WebView bileşenimizi RelativeLayout içerisine sürükleyerek bırakalım nasıl uygulanıyor acaba.

    • content_main.xml dosyasını açtığınızda aşağıda iki sekme yer alır. Biri text diğeri design. Yani text kısmında XML kodları yazarak arayüzü yaparsınız, diğer design kısmında ise bileşenleri sürükle bırak yaparak yapabilirsiniz. Yani paylaştığım kodları direk content_main.xml dosyasına kopyalarsanız aynı sonucu alırsınız. Dersleri video şeklinde de en kısa zamanda yayınlamayı düşünüyorum. Kolay gelsin

  3. Elinize Sağlık. yaptım uygulamayı ama uygulama açıldığında şu şekilde bir hata veriyor izinleride kontrol ettim ama başaramadım birtürlü.
    net::Err_name_not_resolved

    Nerde hata yaptım acaba?

    Çalışmalarınızın devamını diliyorum.

    • Eğer emülatorde deniyorsanız muhtemelen emülatörün internet bağlantısı kapalıdır. Aynı gerçek android cihazlarda olduğu gibi cihazın internet bağlantısını açmayı deneyin hata farklı ise kodllara bakmak gerekebilir.
      Güzel yorumlarınız için teşekkürler.

BİR CEVAP BIRAK