Wednesday, 8 June 2016

Cara Membuat Tutorial/Instruksi Pendek dan Transparan di Android

OK, today i going to share to you a simple "short tutorial" for android, maybe one of you have seen short tutorial like this that appears only 1 time after application finish installed.

The result is something like this

Enjoy this article. sorry for bad English and Bad code frame


NB: Sorry for the video, because my channel was banned by Google wkakaka

for create short tutorial (my version, i'm looking other source too), we need 2 xml layouts and 1 java class.

For layout :
  1. short_tutorial.xml
  2. activity_main.xml
For java class :
  1. MainActivity.java

First, create layout for tutorial's content

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>  


After that, 

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>  
 

And this is the 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);
        }
    }
}

Please post a polite comment and do not post a spam
EmoticonEmoticon