Cara Membuat Tutorial/Instruksi Pendek dan Transparan di Android

OK, kali ini saya akan membagikan sebuah tutorial yang sangat simple bernama “Short Tutorial” atau bisa juga disebut “View Transparan sebagai instruksi saat pertama kali install aplikasi”. View transparan ini akan muncul sekali yaitu pada saat aplikasi diinstall pertama kali. Setelah itu tidak akan muncul lagi, kecuali ada pembaharuan di aplikasi

The result is something like this

Untuk membuat view transparan yang berfungsi sebagai tutorial/cara pemakaian kepada user, kita membutuhkan 2 file XML dan 1 file java.

Untuk layout :

  1. short_tutorial.xml
  2. activity_main.xml

Untuk class java :

  1. MainActivity.java

Pertama, buat layout yang berisi content dari si view transparan

short_tutorial.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="#80000000"
    android:gravity="bottom"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Sample text 1?"
            android:textSize="27sp"
            android:textColor="@android:color/holo_orange_dark"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="17sp"
            android:text="Sample text 2 (Putu Joli Artaguna)"/>
    </LinearLayout>

    <RelativeLayout
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:layout_alignParentLeft="true"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:src="@drawable/avatar"/> 
        <Button 
            android:id="@+id/btn_got_it" 
            android:layout_marginRight="50dp" 
            android:layout_marginTop="20dp" 
            android:layout_alignParentRight="true" 
            android:gravity="center" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="Got it"/> 
    </RelativeLayout>
</LinearLayout>

Setelah itu,

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        xmlns:tools="http://schemas.android.com/tools" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:id="@+id/frame_layout" 
        tools:context="com.example.putuguna.sortdemoapps.MainActivity"> 
        <include 
            layout="@layout/sort_tutorials" 
            android:id="@+id/layout_tutorial"/> 
        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="Hello World!" /> 
    </FrameLayout>

Dan ini adalah class MainActivity.java

package com.example.putuguna.sortdemoapps; 

import android.content.Context; 
import android.content.SharedPreferences; 
import android.graphics.Color; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.Button; 
import android.widget.FrameLayout; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.RelativeLayout; 

public class MainActivity extends AppCompatActivity { 
    public static final String myPref = "MyPref"; 
    private FrameLayout frameLayout; 
    private Button btnGotIt; 
    private View views; 
    
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        frameLayout = (FrameLayout) findViewById(R.id.frame_layout); 
        views = findViewById(R.id.layout_tutorial); 
        btnGotIt = (Button) findViewById(R.id.btn_got_it); 
        
        
        //this line check if tutorial layout has been displayed, it never display anymore 
        SharedPreferences sharedPreferences = getSharedPreferences(myPref, Context.MODE_PRIVATE); 
        if(!sharedPreferences.getBoolean("first", false)){ 
            SharedPreferences.Editor editor = sharedPreferences.edit(); 
            editor.putBoolean("first",true); 
            editor.commit(); 
            views.setVisibility(View.VISIBLE); 
            btnGotIt.setOnClickListener(new View.OnClickListener() { 
                @Override 
                public void onClick(View v) { 
                    views.setVisibility(View.GONE); 
                } 
            }); 
        }else{ 
            views.setVisibility(View.GONE); 
        } 
    } 
}

Selesai. Semoga berhasil.

(Visited 71 times, 1 visits today)



Baca juga :


About The Author

Related Posts

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini