Layout Pada Android

Layout adalah Visual struktur atau tampilan antarmuka yang mejadi wadah untuk menaruh Widget-widget yang akan di tampilkan. Seperti menampilkan kolom input text, button, image, video dan lain sebagianya. Jika dalam pemrograman website kita biasa mengenalnya dengan sebutan HTML.

Terdapat beberapa cara untuk membuat Layout pada Android studio, yaitu dengan memanfaatkan fasilitas Drag and Drop atau dengan langsung mengetiknya menggunakan kode XML dan bisa juga dengan langsung mengetikannya pada baris program Java.

Dalam membuat tampilan terdapat istilah Parent (induk) dan Child (anak). Parent adalah View group yang menampung view di dalamnya atau menampung layout lain di dalamnya. Sedangkan Child view yang ada di dalam View group dari Parent. Berikut ilustrasi agar lebih memudahkan.

Dalam Android terdapat 4 Macam jenis Layout :

1. Linear layut, layout yang paling sederhana yang di gunakan untuk menampilkan tampilan Children secara horizontal atau vertikal dalam satu baris.
   
   
2. Relative Layout, layout ini memungkinkan kita untuk mengatur letak reatif masing-masing child satu sama lain Yang ada di dalam View Group. Tidak seperti linear layout yang hanya satu baris vertikal atau horizontal, pada relative layout kita dapat mengatur posisi stiap Child. Misal child A di samping kiri Child B atau sebaliknya.
   
   
   
3. Frame layout, pada frame layout kita bisa menampilkan satu child di dalam child. Sehingga nantinya akan menimbulkan efek tumpang tindih.
   
   
4. Scroll View, untuk jenis layout ini digunakan jika tampilan yang kita buat melebihi ukuran layar user sehingga nantinya tampilan akan terpotong atau tidak proposional. Dengan Scroll View maka layout dapat di scroll ketika melebihi ukuran layar
   
   
   
   

Nah sperti itu kira-kira penjelasan tentang layout pada Android. Masing-masing layout dapat di kombinasikan satu sama lain untuk menghasilkan layout yang kompleks dan menarik. Terimakasih semoga bermanfaat

Read more

Membuat Applikasi Browser Sendiri Menggunakan Android Studio

Tutorial kali ini masih seputar Android, berhubung sekarang admin lagi di ikut pelatihan Android jadi mimin di haruskan untuk membuat artikel apapun itu yang berhubungnyan dengan bidang kopetensi mimin.

Tutorial kali ini adalah "Membuat Applikasi Browser Sendiri Menggunakan Android Studio". Pasti temen-temen sudah semuanya tau apa itu browser malah sekarang temen-temen lagi make browser buat baca tutorial ini :D Ya, jadi singkatnya browser adalah sebuah media yang di gunakan untuk berinteraksi langsung dengan sebuah website seperti Google, Facebook, Twitter dan lain sebagainya.


Baik kita langsung saja ke pokok pembahasan. Untuk membuat sebuah browser kita akan menggunakan  Dua layout activity, activity yang pertama di gunakan untuk menampilkan SplashScreen. Sedangkan Activity kedua di gunakan sebagai tampilan browser ketika di gunakan.




Tahap pertama silahkan buat project baru


Kita buat tampilan SplashScreenya terlebih dahulu. Temen-temen bisa lihat tutorialnya di artikel Membuat Spalsh Screen Android Studio


Baik saya asumsikan SplashSscreen sudah berhasil di buat dan dapat di jalankan. Sekarang buka MainActivity.


Tambahkan 6 Komponen Dua Linear Layout, Satu EditText, Satu Button, Satu ProgressBar (horizontal) dan Komponen WebView. Berikut sourcecodenya :
  <?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.relion.mybrowser.MainActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:id="@+id/section_top"
        android:layout_alignParentStart="true">

        <EditText
            android:layout_height="50dp"
            android:inputType="textPersonName"
            android:text="http://"
            android:ems="10"
            android:id="@+id/txtUrl"
            android:layout_weight="0.15"
            android:layout_width="50dp" />

        <Button
            android:text="GO"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnGo"
            android:layout_weight="0.01" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/section_top"
        android:layout_centerHorizontal="true">

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/progressBar" />
        <WebView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/webView"></WebView>
    </LinearLayout>
</RelativeLayout>







 
EditText memiliki ID : txtUrl, Button memiliki ID : btnGo, ProgressBar memiliki ID : ProgressBar dan WebView Memiliki ID : webView.


Sekarang kita beralih ke MainActivity.

Di dalam class MainActivity, deklarasikan semua komponen yang tadi kita buat

// Deklarasiprivate WebView webView;
private EditText txtUrl;
private Button btnGo;
private ProgressBar progressBar;
Inisialikasikan komponen tersebut di dalam Method onCreate() :


// Inisialisasikan KomponenwebView = (WebView) findViewById(R.id.webView);
txtUrl = (WebView) findViewById(R.id.txtUrl);
btnGo = (WebView) findViewById(R.id.btnGo);
Setelah itu buat Variable url. Variable ini menyimpan url website yang secara default akan di buka saat Applikasi dijalankan :


// Siapkan URLString url = "https://www.google.co.id/";
Sekarang kita aktifkan fasilitas JavaScript dan Fasilitas lainnya :


// Aktifkan Javascriptwebv.animate();
webv.getSettings().setJavaScriptEnabled(true);
webv.getSettings().setDisplayZoomControls(true);
webv.getSettings().setLoadWithOverviewMode(true);
webv.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webv.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webv.getSettings().setAllowFileAccessFromFileURLs(true);
webv.getSettings().setAllowUniversalAccessFromFileURLs(true);
Sekarang Kita jalankan


// Sekarang kita jalankanwebView.loadUrl(url);
webView.setWebViewClient(new MyWebLaunch()); 
Kita Buat aksi ketika btnGo di klik

btnGo.setOnClickListener(new View.OnClickListener() {
    @Override    public void onClick(View v) {
        String url = txtUrl.getText().toString();
        // Aktifkan Javascript        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDisplayZoomControls(true);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        webView.setWebChromeClient(new WebChromeClient(){
            @Override            public void onProgressChanged(WebView view, int newProgress) {
                progressBar.setVisibility(View.VISIBLE);



// fungsi buat status loading





progressBar.setProgress(newProgress);
                if (newProgress == 100){
                    progressBar.setVisibility(View.GONE);
                }
            }
        });
        webView.loadUrl(url);
        webView.setWebViewClient(new MyWebLaunch());
    }


});
Teman-teman bakal ngedapetin Error pada baris MyWebLaunch, ini disebabkan karena belum ada class MyWebLaunch. Caranya arahkan pointer ke MyWebLaunch kemudian tekan ALT+ENTER. pilih Create Inner Clas.... > MainActivity :


Didalam Class MyWebLaunch tambahkan kode hingga seperti berikut :

private class MyWebLaunch extends WebViewClient {
    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return super.shouldOverrideUrlLoading(view, url);
    }
}





Nah sekarang kita coba jalankan dan Taraaa.... yap benar muncul notifikasi error saat membuka halaman :D
Ini di karenakan kita butuh Permission untuk mengakses internet. Untuk membuka akses internet kita perlu mengedit AndroidManifest.xml yang ada di folder app > manifest.
Tambahkan baris kode berikut. Oh iya sekalian juga tambahan attribut untuk SplashScreen agar FullScreen

Berikut Source code lengkapnya :

package com.example.relion.mybrowser;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    // Deklarasi    private WebView webView;
    private EditText txtUrl;
    private Button btnGo;
    private ProgressBar progressBar;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Inisialisasikan Komponen        webView = (WebView) findViewById(R.id.webView);
        txtUrl = (EditText) findViewById(R.id.txtUrl);
        btnGo = (Button) findViewById(R.id.btnGo);
        // Siapkan URL        String url = "https://www.google.co.id/";
        // Aktifkan Javascript        webView.animate();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDisplayZoomControls(true);
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        // inisialisasi Progress bar        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        // Buat loader        webView.setWebChromeClient(new WebChromeClient(){
            @Override            public void onProgressChanged(WebView view, int newProgress) {
                progressBar.setVisibility(View.VISIBLE);
                progressBar.setProgress(newProgress);
                if (newProgress == 100){
                    progressBar.setVisibility(View.GONE);
                }
            }
        });

        // Sekarang kita jalankan        webView.loadUrl(url);
        webView.setWebViewClient(new MyWebLaunch());

        btnGo.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                String url = txtUrl.getText().toString();
                // Aktifkan Javascript                webView.getSettings().setJavaScriptEnabled(true);
                webView.getSettings().setDisplayZoomControls(true);
                progressBar = (ProgressBar) findViewById(R.id.progressBar);
                webView.setWebChromeClient(new WebChromeClient(){
                    @Override                    public void onProgressChanged(WebView view, int newProgress) {
                        progressBar.setVisibility(View.VISIBLE);
                        progressBar.setProgress(newProgress);
                        if (newProgress == 100){
                            progressBar.setVisibility(View.GONE);
                        }
                    }
                });
                webView.loadUrl(url);
                webView.setWebViewClient(new MyWebLaunch());
            }
        });
    }

    private class MyWebLaunch extends WebViewClient {
        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return super.shouldOverrideUrlLoading(view, url);
        }

    }
}

Oke baik sekali Applikasinya udah jadi :D Berikut penampakannya.. Semoga bermanfaat...



Note: *Jangan lupa menekan Enter saat AutoComplete muncul untuk menghindari error ketike lupa mengimport komponen

Read more

Membuat Spalsh Screen Android Studio

Spalsh Screen adalah tampilan antarmuka saat pertama kali applikasi di Jalankan. Biasanya splash screen menampilkan animasi loader, logo, nama applikasi atau bisa juga slogan dari applikasi. Pada kesempatan kali ini kita akan bersama-sama membuat Splash Screen dengan menggunakan

1. Baik tahap pertama Silahkan teman-teman buat project baru dengan Empty Activity. Disini saya berinama Applikasinya SplashScreen, terserah teman-teman mau menamainya apa.
   
   
2. Tunggu sampai Proses selesai kemudian kita buat Activity Baru. Klik kanan pada direktori app/java pilih New >  Activity > Empty Activity.
   
   
3. Beri nama Activity dengan SplashScreen.  Jangan lupa mencentang Launcher Activity agar Activity yang pertama di jalankan ketika Applikasi di Jalankan.
   
   
1. Jika sudah Sekarang buka SplashScreen yang terdapat di folder app/java/ terdapat Tiga folder disitu, pilih folder yang paling atas.
   Versi dari Android yang user gunakan sendiri biasanya mempengaruhi gaya dalam tampilan SplashScreen. Semilas Pada Versi Lollipop keatas kita dapat bermain-main dengan UI navbar. Olehkarena itu kita akan membuat pengkondisian mengecek Versi Android user. Tambahkan kode berikut di dalam Method onCreate.
   

   // Buat Kondisi untuk mendeteksi Jika User menggunakan// Versi Android 21 ataau di atasnyaif(Build.VERSION.SDK_INT >= 21){
   getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
   }

   Kita  panggil Method ubahWarnaStatusBar();
   

   // Panggil MethodubahWarnaStatusBar();

   SplashScreen seperti yang teman-teman ketahui Sebelum applikasi benar-benar terbuka pertama SplashScreen akan muncul terlebih dahulu selama beberapa detik, untuk membuat seperti itu kita akan memanfaatkan Handler. Handler ini berfungsi untuk menahan Perintah di eksekusi selama interval yang kita tentukan. Interval nilanya dalam satuan MiliSecond.
   

   //Buat HandlerHandler handler = new Handler();
   handler.postDelayed(new Runnable() {
   @Override public void run() {
   startActivity(new Intent(new Intent(getApplicationContext(), MainActivity.class)));
   finish();
   }
   }, 3000);

   
   
   Sekedar informasi buat teman-teman, ketika kita mengetikan kode kemudian muncul prediksi di layar kita jangan lupa untuk menekan enter (Menggunakan prediksi tersebut) agar kita tidak perlu repot mengimport komponen yang kita butuhkan. Biasanya kita sering lupa memanfaatkan fasilitas ini sehinggal walaupun kodenya udah bener tetap muncul notifikasi Error karena kita lupa mengimport komponen yang di butuhkan :D
   
    
   
   Baik lanjut. Jika teman-teman menemukan Error pada baris ubahWarnaStatusBar() maka hal tersebut sangat wajar karena kita belum membuat methodnya :D. Sekarang kita buat Method baru, ingat pengetikan method diluar dari Method onCreate().
   

   // Buat method ubahWarnaStatusBar()private void ubahWarnaStatusBar(){
   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
   Window window = getWindow();
   window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
   window.setStatusBarColor(Color.TRANSPARENT);
   }
   }

   
   
   Seperti ini keseluruhan kodenya :
   
    
4. Selanjutnya kita akan mengatur tampilan Splash Screennya. buka app/res/layout/activity_splash_screen.xml silahkan tambahkan komponen sesuai keinginan, disini saya menggunakan komponen TextView, ImageView dan ProgressBar (small). Berikut tampilan yang saya buat.
   
   
   
   Untuk mencoba sekarang Coba jalankan projectnya bisa dengan shortcut SHIFT+F10. Gimana tampilkan :D ? jika teman-teman mengikuti dengan benar pasti SplashScreen akan muncul jika belum silahkan ulangi kembali tahap-tahapnya dengan benar.
   
   
5. SplashScreen sudah dapat di jalankan tetapi masih terdapat kekurangan yaiut statusbar yang tertutup warna solid. Tapi ngga usah khawatir kita bakal tangani ini. Silakan buka app/manifests/AndroidManifest.xml tambahkan kode yang di tandai berikut:
   
   
   Sekarang jalankan kembali dan kita akan melihat perbedaanya
   
   
6. Yee.. kita udah berhasil membuat SplashSceen :D. Tapii... coba tekan tombol Back (kembali) saat SplashScreen muncul. Apa yang terjadi ? yap benar applikasi kita tertutup kemudian jeda beberapa milisecon terbuka sendiri. Untuk mengatasi ini kita disable tombol back. Kita buat method baru. jangan lupa menekan Enter saat prediksi muncul
   
   

   @Overridepublic void onBackPressed() {
   

   return;

   }

7. Sekarang Silahkan jalankan kembali Applikasi dan lihat perbedaanya :D

Sekian Tutorial mebuat Splash Screen semoga bermanfaat

Read more

Memulai Project Pertama Dengan Android Studio

Saat Pertama kali teman-teman menjalankan Android Studi kita akan disuguhkan tampilan Welcome Screen. Pada Welcome Screen ini terdapat beberapa Pilihan diantaranya :

1. Start a new Android Studio project, adalah opsi untuk membuat sebuah Project baru
2. Open an existing Android Studio prohect, adalah opsi yang dapat teman-teman gunakan untuk membuka project yang sudah ada atau telah kita buat sebelumnya
3. Check out project from Version Control -
4. Import project (Eclipse ADT, Gradle, etc.), Nah opsi ini berguna untuk mengimport project yang pernah teman-teman buat menggunakan Eclipse. Jadi kita tidak perlu lagi membuat dari awal karena Android Studio mendukung fitur ini.
5. Import an Android code Sample,

Karena disini kita akan membuat Project baru maka Pilih Opsi "Start a new Android Studio project".

Application Name akan menjadi nama dari Applikasi kita sekaligus menjadi Nama Class yang nantinya akan digunakan untuk pemanggilan dalam program. Oleh karena itu penamaanya tidak boleh diawali dengan huruf kecil. Sebagai contoh disini saya menamainya "MyFirstApp".

Company Domain.

Project Location adalah lokasi direktori tempat diman project kita di simpan.

Nah pada tahap ini kita akan menentukan di perangkat apa dan pada Android versi berapa applikasi kita dapat di jalankan. Sebagai contoh kita teman-teman memilih Android versi KitKat maka applikasi yang kita buat nanti tidak dapat di gunakan pada versi Android di bawah KitKat seperti Jelly Bean, Ginger bird dan seterusnya. Akan tetapi Applikasi kita tetap dapat digunakan pada versi Android di atasnya.

Pada bagian ini kita akan menentukan Layout dasar dari applikasi kita. Android studio sendiri sudah menyediakan layout layout menarik yang dapat kita gunakan sesuai kebutuhan, akan tetapi pada kali ini kita pilih Empty Activity.

Untuk Activity Name biarkan default saja selanjutnya klik "Next".

Tunggu Android Studio sedang membuat project kita.

Kemudian tunggu beberapa saat sampai Android Studio meload semua komponen yang dibutuhkan. Temen-temen bisa lihat pada Bar status dibagian tengah bawah.

 Jika sudah kemudian klik tab activity_main.xml untuk melihat live preview dari Applikasi yang kita buat

 Kalo temen-temen perhatikan pada applikasi kita tertulis "Hello Wordl!" yang secara default akan di buat oleh Android Studio. Untuk merubahnya silahkan klik teks "Hello Word" nya kemudian rubah isikan teks yang akan kita tampilkan.

Untuk melihat hasilnya kita akan menjalankan AVD (Android Virtual Decive) nya dengan cara menekan tombol SHIFT + F10. Jika temen-temen sudah pernah membuat Virtual Device sebelumnya maka langsung saja Pilih Devicenya kemudian klik "OK". Nah disini saya akan membuat Virtual Device yang baru.

Silahkan sesuaikan jenis Virtual Devicenya sesuai Kebutuhan. Disini saya memilih 3.7" WVGA (Nexus One) agar lebih ringan :D hehe

Ok jika sudah kemudian klik "Next". Nah disini kita memilih versi Android untuk Virtual Device kita. Silahkan pilih sesuai kebutuhan kemudian klik "Download" terlebih dahulu setelah itu Android Studio akan mengunduh System imagenya. Klik next jika proses mengunduhnya sudah selesai.

 Berinama Device Virtual kita kemudian klik Finish.

Baik, Virtual Device telah berhasil dibuat dan sudah dapat di gunakan. Tekan kembali SHIFT + F10 untuk menjalankan Virtual Device kemudian pilih Virtual Device yang tadi telah kita buat. Klik OK.

Read more