Cara Membuat About App Menggunakan BottomSheetDialogFragment

Azhar Rivaldi    9/12/2017    Tutorial Android Studio    Comment   

Baca Juga

Android Studio

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Kali ini saya akan membagikan sebuah artikel yang membahas tentang Cara Membuat About App Menggunakan BottomSheetDialogFragment dengan Android Studio. Jika kalian bingung seperti apa gambarannya, ini saya kasih contohnya :

About App

Berikut langkah-langkahnya:
1. Pertama Anda harus tambahkan library support design v26 dulu di gradle

compile 'com.android.support:design:26.+'

2. Buat layout content_about.xml dengan isi sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/bAbout"
   android:orientation="vertical" android:layout_width="match_parent"
   android:layout_height="match_parent">
    <LinearLayout
       android:gravity="center_vertical"
       android:paddingLeft="10dp"
       android:paddingRight="10dp"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="@color/colorPrimary">
        <TextView
           android:textColor="@android:color/white"
           android:textStyle="bold"
           android:textSize="16sp"
           android:text="@string/tentang_aplikasi"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />
        </LinearLayout>
    <LinearLayout
       android:padding="10dp"
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
        <LinearLayout
           android:orientation="horizontal"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
            <ImageView
               android:layout_gravity="center_vertical"
               android:scaleType="fitCenter"
               android:src="@mipmap/ic_launcher"
               android:layout_width="46dp"
               android:layout_height="46dp" />
            <LinearLayout
               android:layout_marginLeft="10dp"
               android:layout_gravity="center_vertical"
               android:orientation="vertical"
               android:layout_width="match_parent"
               android:layout_height="wrap_content">
                <TextView
                   android:textStyle="bold"
                   android:textSize="16sp"
                   android:textColor="@color/colorPrimary"
                   android:text="@string/app_name"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content" />
                <TextView
                   android:text="@string/tentang_versi"
                   android:id="@+id/mVersi"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
           android:layout_marginTop="10dp"
           android:orientation="horizontal"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
            <ImageView
               android:layout_gravity="center_vertical"
               android:scaleType="fitCenter"
               android:src="@drawable/ic_logo"
               android:layout_width="46dp"
               android:layout_height="46dp" />
            <LinearLayout
               android:layout_marginLeft="10dp"
               android:layout_gravity="center_vertical"
               android:orientation="vertical"
               android:layout_width="match_parent"
               android:layout_height="wrap_content">
                <TextView
                   android:textStyle="bold"
                   android:textSize="16sp"
                   android:textColor="@color/colorPrimary"
                   android:text="@string/tentang_developer"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content" />
                <TextView
                   android:text="@string/tentang_email"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content" />
                <TextView
                   android:autoLink="web|all"
                   android:text="@string/tentang_blog"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>
        <View android:background="@color/colorAccent" android:layout_width="match_parent" android:layout_height="1.0px" android:layout_marginTop="10dp" android:layout_marginBottom="5dp" />
        <TextView android:autoLink="web|all" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:text="@string/tentang_deskripsi" />
    </LinearLayout>
</LinearLayout>

3. Tambahkan string berikut di strings.xml

<string name="tentang_aplikasi">Tentang Aplikasi</string>
<string name="tentang_developer">AZHAR RIVALDI</string>
<string name="tentang_email">ZZZ@gmail.com</string>
<string name="tentang_blog">http://rivaldi48.blogspot.com</string>
<string name="tentang_deskripsi">Aplikasi ini bla bla bla bla bla bla bla</string>
<string name="tentang_versi">Versi 1.0</string>

4. Buat class baru dengan nama ViewAbout.java dan masukkan kode berikut :

package id.azhar.about;
 
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
/**
 * Created by AZHAR RIVALDI on 8/12/2017.
 */
 
public class ViewAbout extends BottomSheetDialogFragment {
 
    String mString;
 
    public static ViewAbout newInstance(String string) {
        ViewAbout f = new ViewAbout();
        Bundle args = new Bundle();
        args.putString("string", string);
        f.setArguments(args);
        return f;
    }
 
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mString = getArguments().getString("string");
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.content_about, container, false);
        return v;
    }
 
}

5. Jika sudah di tahap selanjutnya kita akan memanggil ViewAbout.java agar tampil di Activity. Lakukan dengan menambahkan kode berikut di Activity dimana Anda akan taruh. Sebagai contoh saya buat di MainActivity.java dan juga activity_main.xml

===== MainActivity.java =====
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //Initialize ViewAbout
        final ViewAbout vAbout = ViewAbout.newInstance("About");
 
        Button mTombol = (Button)findViewById(R.id.tombol_tampilkan_dialog);
        mTombol.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Perintah Menampilkan ViewAbout
                vAbout.show(getSupportFragmentManager(), vAbout.getTag());
            }
        });
    }
}
 
 
===== activity_main.xml =====
 
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="id.delta.about.MainActivity">
 
    <Button
        android:id="@+id/tombol_tampilkan_dialog"
        android:text="Tampilkan Tentang Aplikasi"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</android.support.constraint.ConstraintLayout>

6. Selesai.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Cara Membuat About App Menggunakan Bottom Sheet Dialog Fragment ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_