PMO2 Pertemuan 1 Konsep Dasar UI (fragment)

KONSEP DASAR UI PEMROGRAMAN MOBILE

1. Multi Bahasa

Android, sebagai salah satu sistem operasi terbesar dan terpopuler di dunia, juga telah mendukung fitur multib b ahasa ini. Para pengembang dan produsen aplikasi Android dibekali akses untuk menanamkan fitur ini ke dalam aplikasi buatan mereka melalui peralatan pengembangan perangkat lunak (software development tools/SDK) bawaan. Fitur dukungan multibahasa di Android merupakan bagian dari fitur localization. Fitur ini secara umum digunakan untuk menangani keragaman lokasi pengguna aplikasi Android. Para pengembang dapat mengatur content aplikasi buatan mereka, meliputi teks, file audio, file grafis, bilangan, dan mata uang, untuk disesuaikan dengan lokasi di mana aplikasi tersebut akan digunakan agar tepat guna. Maka, secara singkat, fitur dukungan multibahasa ini dapat diartikan sebagai proses penyesuaian konten teks berdasarkan region tertentu. Hal ini dimaksudkan untuk memudahkan mereka dalam menggunakan berbagai macam aplikasi tersebut agar tingkat kenyamanan dan produktivitas mereka tidak menurun.

Cara setting multi Bahasa di android :

 

 

 

 

 

 

 

 

 

Langkah membuat multi bahasa :

1. ganti mode di project explorer dari Android ke Project agar file di folder project explorer terlihat lebih detile.

2. membuat folder values dan string file. untuk membuat folder value klik kanan res pilih Android resources directory.

3. buat folder bahasa berbeda dengan nama values-es(spanyol) values-fr(prancis) kemudian buat file string.xml dalam folder values.

4. edit string.xml dari tga bahasa berbeda.

5. pada activity_main.xml masukan widget TextView.

6. agar bahasa berubah harus mensetting bahasa default terlebih dahulu di menu setting pada perankat android atau emulator .

 

2. Multi Ukuran Layar

Android dijalankan pada beragam perangkat yang menawarkan kepadatan dan ukuran layar yang berbeda. Untuk aplikasi, sistem Android menyediakan lingkungan development yang konsisten di berbagai perangkat dan menangani hampir semua pekerjaan untuk menyesuaikan antarmuka pengguna aplikasi ke layar yang menampilkannya. Pada saat yang sama, sistem menyediakan beberapa API yang memungkinkan Anda mengontrol UI aplikasi untuk kepadatan dan ukuran layar tertentu, untuk mengoptimalkan desain UI Anda bagi konfigurasi layar yang berbeda. Misalnya, Anda mungkin ingin UI untuk tablet berbeda dari UI untuk handset.

Bagian ini menyediakan ringkasan mengenai dukungan Android untuk multilayar, termasuk: pengantar untuk istilah dan konsep yang digunakan dalam dokumen ini serta dalam API, rangkuman konfigurasi layar yang didukung sistem, dan ringkasan mengenai API serta fitur kompatibilitas layar yang mendasarinya.

 

langkah membuat multi ukuran layar :

1. Menambahkan nama layout dengan tambahan -<ukuran layar>

2. Untuk nama file .xml harus persis sama namun isi konten dibuat berbeda agar mendukung banyak UI(User Interface) dan untuk ukuran layar yang sesuai dengan jenis perangkat.

3. jika ingin mengkombinasikan layout khusus untuk landscape, termasuk juga layar besar, maka menggunakan tambahan large dan land.

 

Istilah dan konsep

Ukuran layar

Ukuran fisik sesungguhnya, yang diukur sebagai diagonal layar.

Untuk penyederhanaan, Android mengelompokkan semua ukuran layar sesungguhnya ke dalam empat ukuran umum: kecil, normal, besar, dan ekstra besar.

Kepadatan layar

Jumlah piksel dalam area fisik layar; biasa disebut sebagai dpi (dot per inci). Misalnya, layar berkepadatan “rendah” memiliki piksel lebih sedikit dalam area fisik yang diberikan, dibandingkan layar berkepadatan “normal” atau “tinggi”.

Untuk penyederhanaan, Android mengelompokkan semua kepadatan layar sesungguhnya ke dalam enam kepadatan umum: rendah, medium, tinggi, ekstra-tinggi, ekstra-ekstra-tinggi, dan ekstra-ekstra-ekstra-tinggi.

Orientasi

Orientasi layar dari sudut pandang pengguna. Orientasi ini bisa berupa lanskap atau potret, berarti masing-masing rasio aspek layar bisa berupa melebar atau meninggi. Ketahuilah bahwa secara default tidak hanya melakukan pengoperasian perangkat berbeda dalam orientasi berbeda, melainkan orientasi bisa berubah pada waktu proses bila pengguna memutar perangkat.

Resolusi

Total jumlah piksel fisik di layar. Saat menambahkan dukungan untuk multilayar, aplikasi tidak menangani resolusi secara langsung; aplikasi hanya perlu memperhatikan ukuran dan kepadatan layar, sebagaimana ditetapkan oleh kelompok kepadatan dan ukuran umum.

Piksel berkepadatan independen (dp)

Satuan piksel virtual yang harus Anda gunakan saat mendefinisikan layout UI, untuk menyatakan dimensi layout atau posisi dengan cara yang tidak bergantung pada kepadatan.

Piksel berkepadatan independen sama dengan satu piksel fisik pada layar 160 dpi, yang merupakan kepadatan patokan yang diasumsikan oleh sistem untuk layar kepadatan “medium”. Pada waktu proses, sistem secara transparan menangani penskalaan satuan dp, bila diperlukan, berdasarkan kepadatan sesungguhnya dari layar yang digunakan. Konversi satuan dp ke piksel layar adalah sederhana:px = dp * (dpi / 160). Misalnya, pada layar 240 dpi, 1 dp sama dengan 1,5 piksel fisik. Anda harus selalu menggunakan satuan dp saat mendefinisikan UI aplikasi Anda untuk memastikan UI Anda ditampilkan dengan benar di layar yang memiliki kepadatan berbeda.

Ragam layar yang didukung

Mulai Android 1.6 (API Level 4), Android menyediakan dukungan untuk kepadatan dan ukuran layar yang beragam, yang mencerminkan banyak konfigurasi layar berbeda yang mungkin dimiliki perangkat. Anda bisa menggunakan fitur sistem Android untuk mengoptimalkan antarmuka pengguna aplikasi untuk setiap konfigurasi layar dan memastikan aplikasi Anda tidak hanya dirender, juga menyediakan pengalaman pengguna yang sebaik mungkin di setiap layar.

Untuk menyederhanakan cara mendesain antarmuka pengguna Anda bagi multilayar, Android membagi rentang kepadatan dan ukuran layar sesungguhnya ke dalam:

  • Ada empat ukuranumum: kecilnormalbesar, dan ekstra besar
  • Ada enam kepadatanumum:
    • ldpi(rendah) ~120 dpi (dots per inch)
    • mdpi(medium) ~160 dpi
    • hdpi(tinggi) ~240 dpi
    • xhdpi(ekstra-tinggi) ~320 dpi
    • xxhdpi(ekstra-ekstra-tinggi) ~480 dpi
    • xxxhdpi(ekstra-ekstra-ekstra-tinggi) ~640 dpi

Ukuran dan kepadatan umum membentuk suatu konfigurasi patokan yakni ukuran normal dan kepadatan mdpi(medium). Patokan ini berdasarkan pada konfigurasi layar untuk perangkat Android yang pertama, yakni T-Mobile G1, yang memiliki layar HVGA (hingga Android 1.6, inilah satu-satunya konfigurasi layar yang didukung oleh Android).

Setiap kepadatan dan ukuran umum meliputi serangkaian kepadatan dan ukuran layar sesungguhnya. Misalnya, dua perangkat yang melaporkan ukuran layar normal mungkin memiliki ukuran layar sesungguhnya dan rasio aspek yang sedikit berbeda bila diukur secara manual. Begitu pula, dua perangkat yang melaporkan kepadatan layar hdpi mungkin memiliki kepadatan piksel sebenarnya yang sedikit berbeda. Android membuat abstrak perbedaan ini pada berbagai aplikasi, jadi Anda bisa menyediakan UI yang didesain untuk kepadatan dan ukuran umum dan memungkinkan sistem menangani penyesuaian akhir bila diperlukan.

Karena Anda mendesain UI untuk ukuran layar berbeda, Anda akan mengetahui bahwa setiap desain memerlukan jumlah ruang minimum. Jadi, setiap ukuran layar umum di atas memiliki resolusi minimum yang didefinisikan oleh sistem. Ukuran minimum ini dalam satuan “dp”—satuan yang sama yang harus Anda gunakan saat mendefinisikan layout—yang memungkinkan sistem menghindari kekhawatiran tentang perubahan kepadatan layar.

  • ekstra besar ukuran layar minimal 960 dp x 720 dp
  • besar ukuran layar minimal 640 dp x 480 dp
  • normal ukuran layar minimal 470 dp x 320 dp
  • kecil ukuran layar minimal 426 dp x 320 dp

 

3. Desain Responsif

Responsive  design  adalah sebuah teknik atau metode yang digunakan  untuk membuat suatu layout  yang nantinya akan menyesuaikan diri sesuai dengan tampilan device pengunjung yang digunakan. Baik dari ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi device yang digunakan pengunjung. Selain dapat mempengaruhi apa yang ditampilkan pada perangkat tertentu, ini juga untuk mengoptimalisasi kenyamanan pengguna untuk menjelajahi aplikasi dari tampilan, navigasi serta konten  tanpa merubah ukuran halaman web dari perangkat apapun yang mereka gunakan.

langkah membuat design responsive :

1. pada menu Build.gradle yang terdapat pada menu Gradle Scripts , tambahkan library dari Constrainlayout , yang terdapat pada bagian dependencies.
2. drag ConstrainLayout di jendela kiri Palette , kemudian pilih Layout, setelah itu pilih ConstrainLayout.
Pilihan menu untuk membangun UI diantaranya :
-mengaktifkan secara otomatis Constraint
-mengaktifkan Autoconnect Constraint
-menghapus Constraint yang terkait
-mengatur ukuran Margin pada ConstrainLayout.
3. jika selesai kita bisa dengan mudah melakukan Drag and drop UI pada ConstrainLayout dan membuat tombol Button dan edit text dengan lebih cepat

PROJEK SEDERHANA MULTILAYAR(FRAGMENT) DAN MULTI BAHASA

kita akan membuat projek tentang multi bahasa dan multi layar untuk hasilnya kurang lebih seperti ini 🙂

hasil landscape dan layar tablet

 

 

 

 

 

hasil layar portrait

 

 

 

 

 

 

 

 

 

Oke langsung saja pertama buat projek baru

new > project

 

 

 

 

 

 

Setelah itu isi nama projek lalu klik next saja sampai proses build selesai gunakan blank activity

MainActivity.java

package com.kelompok3.trian.pmo2_rps1;

import android.net.Uri;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.kelompok3.trian.pmo2_rps1.Adapter.*;
import com.kelompok3.trian.pmo2_rps1.Helper.*;

public class MainActivity extends AppCompatActivity implements
        Fragment_list.OnFragmentInteractionListener,
        Fragment_detail.OnFragmentInteractionListener{
        tampil_toast toast_helper = new tampil_toast();

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

        new multi_bahasa(this).sesuaikan_bahasa();

        View fragment_land = findViewById(R.id.detail_act);
        if (fragment_land != null){
            Fragment_detail list = new Fragment_detail();

            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            ft.replace(R.id.detail_act,list);
            ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
            ft.addToBackStack(null);
            ft.commit();
        }else {
            toast_helper.tampil(this,"layar normal beralih mode portrait");
        }

    }


    @Override
    public void onFragmentInteraction(Uri uri) {

    }

    public String getJudul() {
        return judul;
    }

    public void setJudul(String judul) {
        this.judul = judul;
    }

    private String judul;


}



untuk layout kita buar folder layout baru untuk Layar(normal,small,large,landscape)

klik kanan pada folder res -> new ->new Resource Directory -> layout-land,layout-small,layout-large

 

 

 

 

 

 

 

 

Layout pada activity_main.xml(normal)

<?xml version="1.0" encoding="utf-8"?>
    <fragment 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:name="com.kelompok3.trian.pmo2_rps1.Fragment_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

</fragment>

Layout pada activity_main.xml(large,lanscape)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" android:layout_width="match_parent"
    android:baselineAligned="false">
<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:name="com.kelompok3.trian.pmo2_rps1.Fragment_list"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/list_act"    android:layout_weight="3"
    android:layout_width="0dp"    android:layout_height="match_parent"
    tools:context=".MainActivity">
</fragment>    <View
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="0.05"
        android:background="@drawable/rect1"
        />
    <FrameLayout
        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:id="@+id/detail_act"        android:layout_weight="4"
        android:layout_width="0dp"           android:layout_height="match_parent"
        tools:context=".MainActivity">
    </FrameLayout>
</LinearLayout>

Kemudian buat 2 fragment baru

klik File->new->fragment->blank

Fragment_detail.java

 

package com.kelompok3.trian.pmo2_rps1;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;

import com.kelompok3.trian.pmo2_rps1.Adapter.Adapter_kopi_RecyclerView;
import com.kelompok3.trian.pmo2_rps1.Helper.multi_bahasa;
import com.kelompok3.trian.pmo2_rps1.Helper.tampil_toast;


public class Fragment_detail extends Fragment {
    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    private OnFragmentInteractionListener mListener;

    //TODO : buat variabel
    ImageView tambah,kurang;
    Button add_chart;

    public Fragment_detail() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment Fragment_detail.
     */
    // TODO: Rename and change types and number of parameters
    public static Fragment_detail newInstance(String param1, String param2) {
        Fragment_detail fragment = new Fragment_detail();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        new multi_bahasa(getActivity().getApplicationContext()).sesuaikan_bahasa();
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v =inflater.inflate(R.layout.fragment_fragment_detail, container, false);


        new tampil_toast().tampil(getContext(),new MainActivity().getJudul());
        return v;
    }

    // TODO: Rename method, update argument and hook method into UI event
    public void onButtonPressed(Uri uri) {
        if (mListener != null) {
            mListener.onFragmentInteraction(uri);
        }
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
            mListener = (OnFragmentInteractionListener) context;
        } else {
            throw new RuntimeException(context.toString()
                    + " must implement OnFragmentInteractionListener");
        }
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mListener = null;

    }

    /**
     * This interface must be implemented by activities that contain this
     * fragment to allow an interaction in this fragment to be communicated
     * to the activity and potentially other fragments contained in that
     * activity.
     * <p>
     * See the Android Training lesson <a href=
     * "http://developer.android.com/training/basics/fragments/communicating.html"
     * >Communicating with Other Fragments</a> for more information.
     */
    public interface OnFragmentInteractionListener {
        // TODO: Update argument type and name
        void onFragmentInteraction(Uri uri);
    }
}

untuk layoutnya
fragment_detail.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".Fragment_detail">

    <!-- TODO: Update  fragment detail-->
    <include layout="@layout/toolbar_customize_drink"/>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:scaleType="centerCrop"
                android:src="@drawable/coffeetek"/>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginRight="25dp">


                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:layout_weight="1">


                    <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Bold
                        android:layout_marginTop="15dp"
                        android:layout_marginLeft="25dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Coffe"
                        android:textSize="25sp"
                        android:textColor="#2d140d"/>

                    <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Bold
                        android:id="@+id/txt_harga"
                        android:layout_marginLeft="25dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Rp 000"
                        android:textSize="15sp"
                        android:textColor="#383537"/>
                </LinearLayout>


                <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Regular
                    android:id="@+id/txt_jumlah_pesan"
                    android:layout_marginTop="32dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:layout_marginRight="4dp"
                    android:textColor="#383537"
                    android:textSize="20sp"/>
                <ImageView
                    android:id="@+id/btn_kurangi"
                    android:layout_marginTop="30dp"
                    android:layout_marginRight="8dp"
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:src="@drawable/ic_remove"/>
                <ImageView
                    android:id="@+id/btn_tambah"
                    android:layout_marginTop="30dp"
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:src="@drawable/ic_add"/>

            </LinearLayout>

            <View
                android:layout_marginTop="10dp"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#8c746a"/>


            <LinearLayout
                android:paddingTop="18dp"
                android:paddingBottom="18dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="20dp">

                <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Regular
                    android:layout_gravity="center"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Ukuran"
                    android:textSize="18sp"
                    android:textColor="#443636"/>

                <ImageView
                    android:id="@+id/img1"
                    android:layout_marginLeft="100dp"
                    android:layout_gravity="center"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:src="@drawable/ic_coffeecup"/>

                <ImageView
                    android:id="@+id/img2"
                    android:layout_marginLeft="20dp"
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:src="@drawable/ic_coffee"/>

                <ImageView
                    android:id="@+id/img3"
                    android:layout_marginLeft="17dp"
                    android:layout_width="40dp"
                    android:layout_height="35dp"
                    android:src="@drawable/ic_fill_7"/>
            </LinearLayout>


            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#8c746a"/>

            <LinearLayout
                android:paddingTop="20dp"
                android:paddingBottom="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="#00000000"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="20dp">

                <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Regular
                    android:layout_gravity="center"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tipe Gula"
                    android:textSize="18sp"
                    android:textColor="#443636"/>

                <ImageView
                    android:id="@+id/img4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="90dp"
                    android:src="@drawable/ic_group_4_copy_4" />
                <ImageView
                    android:id="@+id/img5"
                    android:layout_marginLeft="35dp"
                    android:layout_gravity="center"
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/ic_group_4_copy"/>
                <ImageView
                    android:id="@+id/img6"
                    android:layout_marginLeft="34dp"
                    android:layout_marginTop="3dp"
                    android:layout_gravity="center"
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:src="@drawable/ic_group_4_copy_2"/>
                <ImageView
                    android:id="@+id/img7"
                    android:layout_marginLeft="21dp"
                    android:layout_gravity="center"
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:src="@drawable/ic_group_4_copy_3"/>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#8c746a"/>

            <LinearLayout
                android:paddingTop="20dp"
                android:paddingBottom="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="#00000000"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="20dp">


            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#8c746a"/>
            <LinearLayout
                android:paddingTop="20dp"
                android:paddingBottom="20dp"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="25dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Regular
                    android:layout_gravity="center"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Total:"
                    android:textSize="30sp"
                    android:textColor="#8c746a"/>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Regular
                        android:gravity="right"
                        android:layout_weight="1"
                        android:layout_gravity="center"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:layout_marginRight="4dp"
                        android:text="Rp"
                        android:textSize="27sp"
                        android:textColor="#2d140d"/>

                    <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Regular
                        android:id="@+id/txt_total"
                        android:layout_gravity="bottom"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="0000"
                        android:textSize="18sp"
                        android:textColor="#2d140d"/>
                </LinearLayout>
            </LinearLayout>


            <com.kelompok3.trian.pmo2_rps1.customfonts.MyTextView_Roboto_Regular
                android:layout_marginLeft="25dp"
                android:layout_marginRight="20dp"
                android:layout_gravity="bottom"
                android:gravity="center"
                android:layout_marginTop="25dp"
                android:layout_marginBottom="15dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Tambah"
                android:textSize="17sp"
                android:textColor="#ffffff"
                android:background="@drawable/rect1"/>

        </LinearLayout>


    </android.support.v4.widget.NestedScrollView>

</LinearLayout>

Fragment_list.java

package com.kelompok3.trian.pmo2_rps1;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.kelompok3.trian.pmo2_rps1.Adapter.Adapter_kopi_RecyclerView;
import com.kelompok3.trian.pmo2_rps1.Helper.multi_bahasa;
import com.kelompok3.trian.pmo2_rps1.Model.ModelListKopi;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 * Activities that contain this fragment must implement the
 * {@link Fragment_list.OnFragmentInteractionListener} interface
 * to handle interaction events.
 * Use the {@link Fragment_list#newInstance} factory method to
 * create an instance of this fragment.
 */
public class Fragment_list extends Fragment {
    // TODO: Isi parameter (opsional bray)
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Variabel untuk parameter
    private String mParam1;
    private String mParam2;

    private OnFragmentInteractionListener mListener;

    //TODO : Membuat variabel
    private Adapter_kopi_RecyclerView adapter_kopi_recyclerView;
    private RecyclerView recyclerView;
    private ArrayList<ModelListKopi> ArrayKopiModel;
    Integer  gambar_kopi[]={R.drawable.ic_espresso,R.drawable.ic_cappuccino,R.drawable.ic_macciato,R.drawable.ic_mocha,R.drawable.ic_latte};
    String   txt[]={"Espresso","Cappuccino","Macciato","Mocha","Latte"};

    public Fragment_list() {
        // Required empty public constructor
    }


    // TODO: Rename and change types and number of parameters
    public static Fragment_list newInstance(String param1, String param2) {
        Fragment_list fragment = new Fragment_list();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        new multi_bahasa(getActivity().getApplicationContext()).sesuaikan_bahasa();
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO : inflating layout
        View v = inflater.inflate(R.layout.fragment_fragment_list,
                container,
                false);
        //
        recyclerView = v.findViewById(R.id.rv);
        //
        RecyclerView.LayoutManager layoutManager =
            new LinearLayoutManager(getContext(),LinearLayoutManager.VERTICAL,false);


        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setItemAnimator(new DefaultItemAnimator());

        ArrayKopiModel = new ArrayList<>();
        for (int jumlah_kopi =0 ; jumlah_kopi<txt.length; jumlah_kopi++){
            ModelListKopi modelListKopi = new ModelListKopi(txt[jumlah_kopi],gambar_kopi[jumlah_kopi]);
            ArrayKopiModel.add(modelListKopi);
        }
        adapter_kopi_recyclerView = new
                Adapter_kopi_RecyclerView(getActivity().getApplicationContext(),
                ArrayKopiModel);
        recyclerView.setAdapter(adapter_kopi_recyclerView);
        return v;
    }

    // TODO: Method bawaan wkwk
    public void onButtonPressed(Uri uri) {
        if (mListener != null) {
            mListener.onFragmentInteraction(uri);

        }
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
            mListener = (OnFragmentInteractionListener) context;
        } else {
            throw new RuntimeException(context.toString()
                    + " must implement OnFragmentInteractionListener");
        }
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mListener = null;
    }

    /**
     * This interface must be implemented by activities that contain this
     * fragment to allow an interaction in this fragment to be communicated
     * to the activity and potentially other fragments contained in that
     * activity.
     * <p>
     * See the Android Training lesson <a href=
     * "http://developer.android.com/training/basics/fragments/communicating.html"
     * >Communicating with Other Fragments</a> for more information.
     */
    public interface OnFragmentInteractionListener {
        // TODO: Update argument type and name
        void onFragmentInteraction(Uri uri);
    }
}

untuk layoutnya
fragment_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".Fragment_list">
    <include
        layout="@layout/toolbar_select_drink"/>
    <!-- TODO: Update fragment list -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

</LinearLayout>

Naaah sampai sini kita sudah membuat layout responsif dengan fragment
Kemudian kita membuat untuk multi bahasa yaitu dengan membuat value local
klik kanan pada res->new resource directory buat beberapa bahasa disini kami menggunakan bahasa arab,inggris, dan indonesia

 

 

 

 

 

 

 

 

copykan string.xml yang sudah ada kemasing-masing value bahasa dan sesuaikan valuenya untuk method ganti bahasa :

public Locale locale;
public Context context;
public multi_bahasa(Context context) {
    this.context = context;
}

public void sesuaikan_bahasa(){
    SharedPreferences settings = PreferenceManager.getDefaultSharedPreferences(context);
    Configuration config = context.getResources().getConfiguration();
    String lang = settings.getString("LANG", "");
    if (!"".equals(lang) && !config.locale.getLanguage().equals(lang)) {
        locale = new Locale(lang);
        Locale.setDefault(locale);
        config.locale = locale;
        context.getResources().updateConfiguration(config, context.getResources().getDisplayMetrics());
}
}

 

 

File Projek:

PMO2_rps1

Power Point :

KELOMPOK 3 RPS 1