Fragment

Step 1: Create a new project

1. Click on File, then New => New Project.
2. Choose Empty activity
3. Select language as Java
4. Select the minimum SDK as per your need.
Step 2: Modify strings.xml file
All the strings which are used in the activity are listed in this file
<resources>
<string name="app_name">GfG | Fragment in Android</string>
<string name="heading">Two Fragments in One Activity</string>
<string name="fragment1_button">Display First Fragment</string>
<string name="fragment2_button">Display Second Fragment</string>
<string name="fragment1_text1">Displaying contents of the First Fragment</string>
<string name="fragment2_text1">Displaying contents of the Second Fragment</string>
</resources>

Step 3: Working with the activity_main.xml file

Open the activity_main.xml file and add 2 buttons to it which will be used to switch
between the 2 fragments. Further, add the fragment element in the activity layout. It is the
area in which the fragments will be displayed.
<?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:background="#168BC34A"
android:orientation="vertical"
tools:context=".MainActivity">

<!-- Heading of the activity -->

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:fontFamily="@font/roboto"
android:text="@string/heading"
android:textAlignment="center"
android:textColor="@android:color/holo_green_light"
android:textSize="24sp"
android:textStyle="bold" />

1
 <!-- Button to display first fragment -->
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:background="#4CAF50"
android:fontFamily="@font/roboto"
android:onClick="selectFragment"
android:text="@string/fragment1_button"
android:textColor="@android:color/background_light"
android:textSize="18sp"
android:textStyle="bold" />

<!-- Button to display second fragment -->

<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#4CAF50"
android:fontFamily="@font/roboto"
android:onClick="selectFragment"
android:text="@string/fragment2_button"
android:textColor="@android:color/background_light"
android:textSize="18sp"
android:textStyle="bold" />

<!-- Adding Fragment element in the activity -->

<fragment
android:id="@+id/fragment_section"
android:name="com.example.fragments_backup.FragmentOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
tools:layout="@layout/fragment_one" />

</LinearLayout>

The android:name tag under the <fragment> element is containing the file name of default
fragment which is to be displayed when activity opens.

2
Step 4: Creating the two fragment class
These files contain only the onCreateView() method to inflate the UI of the fragment and
returns the root of the fragment layout. If the fragment does not have any UI, it will return
null.
1. First Fragment class:
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentOne extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

// inflating the layout of the fragment

// and returning the view component
return inflater.inflate(R.layout.fragment_one, container, false);
}
}

2. Second Fragment Class:

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTwo extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState) {

// inflating the layout of the fragment

// and returning the view component
return inflater.inflate(R.layout.fragment_two, container, false);
}
}

3
Step 5: Creating Layouts for both the fragments
Create two Layout Resource Files for both the fragments. Fragment displays a text on the
screen and have a background color to differentiate their area in the Activity layout. Below
is the code to implement this layout.
1. fragment_one.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C52CC57"
android:orientation="vertical">

<!-- Text to be displayed inside the Fragment -->

<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="@string/fragment1_text1"
android:textAlignment="center"
android:textColor="@android:color/background_light"
android:textSize="24sp"
android:textStyle="bold" />

</LinearLayout>

2. fragment_two.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C3473A6"
android:orientation="vertical">

<!-- Text to be displayed inside the Fragment -->

<TextView
4
 android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="@font/roboto"
android:gravity="center"
android:text="@string/fragment2_text1"
android:textAlignment="center"
android:textColor="@android:color/background_light"
android:textSize="24sp"
android:textStyle="bold" />

</LinearLayout>

Step 6: Working with the MainActivity.java file

Now, the functionality of the button to perform operations on clicking will be defined in the
MainActivity class. Moreover, the code for the replacement of fragments during run time is
also mentioned in this file. Below is the code to implement this step.
import android.os.Bundle;
import android.view.View;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);
}

// method for displaying the appropriate

// fragment according to the clicked button
public void selectFragment(View view) {

// creating object for Fragment

Fragment fr;

// displaying first fragment

// if button1 is clicked
if(view == findViewById(R.id.button1)) {
fr = new FragmentOne();
}

// displaying second fragment

// if button2 is clicked
else {
5
 fr = new FragmentTwo();
}

FragmentManager fm = getFragmentManager();

// fragment transaction to add or replace

// fragments while activity is running
FragmentTransaction fragmentTransaction = fm.beginTransaction();
fragmentTransaction.replace(R.id.fragment_section, fr);

// making a commit after the transaction

// to assure that the change is effective
fragmentTransaction.commit();
}
}

6
 Membuat RatingBar

RatingBar digunakan untuk memungkinkan pengguna menilai beberapa produk. Dalam

kode di bawah ini fungsi getRating() digunakan untuk menghitung peringkat
produk. Fungsi getRating() mengembalikan nilai tipe ganda.
Langkah-langkah di bawah ini terlibat untuk membuat RatingBar di Android:
1. Buat proyek Android baru.
2. Tambahkan RatingBar di aktivitas_main.xml Anda.
3. Tambahkan Tombol untuk menjalankan tindakan.
4. Gunakan TextView untuk menampilkan peringkat.
• Untuk menggunakan bilah peringkat di aplikasi, kita akan menggunakan widget
RatingBar bawaan, oleh karena itu langkah pertama adalah mengimpornya ke
dalam proyek.
• Di MainActivity, buat objek RatingBar yang dilambangkan dengan variabel 'rt' dan
temukan tampilan terkait di file XML. Hal ini dilakukan dengan metode
findViewById(). Setelah objek java berhasil diikat ke tampilannya, buatlah tata
letak 'bintang', yang akan berinteraksi dengan pengguna, untuk mengatur
peringkat.
• Untuk mendapatkan bintang drawable, metode rt.getProcessDrawable()
digunakan. Kemudian untuk mengubah warna bintang, metode setColorFilter()
digunakan dan argumen Color.YELLOW diteruskan. Terakhir, metode Call ditulis
untuk mengekstrak nilai rating yang telah dipilih pengguna, dengan metode
rt.getMethod().

Program untuk membuat MainActivity:

// Below is the code for MainActivity.java

package com.example.hp.rating;

// importing required libraries

import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.LayerDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RatingBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

//binding MainActivity.java with activity_main.xml file

rt = (RatingBar) findViewById(R.id.ratingBar);

//finding the specific RatingBar with its unique ID

LayerDrawable stars=(LayerDrawable)rt.getProgressDrawable();

//Use for changing the color of RatingBar

stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
}

public void Call(View v)

{
// This function is called when button is clicked.
// Display ratings, which is required to be converted into string first.
TextView t = (TextView)findViewById(R.id.textView2);
t.setText("You Rated :"+String.valueOf(rt.getRating()));
}
}

Catatan: Untuk layout, ConstraintLayout cocok digunakan jika Anda seorang pemula
karena dapat menyesuaikan tampilan sesuai layar.
File XML ini mendefinisikan tampilan aplikasi.
Program untuk membuat tata letak MainActivity:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"

<!-- Cover the entire width of the screen -->

android:layout_width="match_parent"
<!-- Cover the entire height of the screen -->
android:layout_height="match_parent"

tools:context="com.example.hp.rating.MainActivity"
android:background="@color/colorPrimary">

<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:background="@color/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
8
 tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate Me!!!"
android:textColor="@android:color/background_dark"
android:textSize="30sp"
android:textStyle="bold|italic"
tools:layout_editor_absoluteX="127dp"
tools:layout_editor_absoluteY="28dp" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="148dp"
android:textColorHint="@color/colorAccent"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/ratingBar"
tools:layout_constraintRight_creator="1"
tools:layout_constraintLeft_creator="1" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:layout_marginTop="50dp"
android:background="@android:color/holo_red_dark"
android:onClick="Call"
android:text="Submit"
android:textColor="@android:color/background_light"
android:textStyle="bold|italic"
app:layout_constraintBottom_toTopOf="@+id/textView2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/ratingBar"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1" />
</android.support.constraint.ConstraintLayout>

9
Di sini kita tidak perlu mengubah file manifes, tidak diperlukan izin untuk ratingBar . Secara
default, semua aktivitas baru yang dibuat disebutkan dalam file manifes.
Di bawah ini adalah kode untuk AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.hp.rating" >

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme" >
<activity android:name=".MainActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
</application>

</manifest>

Output :

Sumber : https://www.geeksforgeeks.org/android-creating-a-ratingbar/
10
 Floating Action Button (FAB) di Android Studio

Tombol aksi mengambang adalah tombol yang sedikit berbeda dari tombol biasa. Tombol
tindakan mengambang diterapkan di UI aplikasi untuk tindakan utama (tindakan yang
dipromosikan) bagi pengguna dan tindakan di bawah tombol tindakan mengambang
diprioritaskan oleh pengembang. Misalnya tindakan seperti menambahkan item ke daftar
yang ada. Jadi dalam artikel ini telah ditunjukkan cara mengimplementasikan Floating Action
Button (FAB), dan juga tombol-tombol di bawah FAB ditangani dengan
pesan Toast sederhana . Perhatikan bahwa kami akan mengimplementasikan proyek ini
menggunakan bahasa Java.
Jenis Tombol Aksi Mengambang
Ada empat jenis tombol aksi mengambang yang tersedia di Android.
• Tombol Aksi Mengambang Normal/Reguler
• Tombol Aksi Mengambang Mini
• Tombol Aksi Mengambang yang Diperluas
• Tombol Aksi Mengambang Bertema
Pada artikel kali ini mari kita bahas Tombol Aksi Mengambang
Normal/Reguler dan Tombol Aksi Mengambang Mini dengan contoh contoh di Android.
FAB Reguler adalah FAB yang tidak diperluas dan berukuran biasa. Contoh berikut
menunjukkan FAB biasa dengan ikon plus.

11
Implementasi Langkah demi Langkah

Langkah 1: Buat Proyek Baru di Android Studio

Untuk membuat proyek baru di Android Studio silakan lihat Cara Membuat/Memulai
Proyek Baru di Android Studio . Kode untuk itu telah diberikan dalam Bahasa
Pemrograman Java dan Kotlin untuk Android.
Langkah 2: Menambahkan Ketergantungan ke File build.gradle
Buka file Module build.gradle dan tambahkan ketergantungan ini dan klik
tombol Sinkronkan Sekarang .

implementasi 'com.google.android.material:material:1.3.0-alpha02'

Lihat gambar di bawah jika Anda tidak bisa mendapatkan langkah-langkah yang disebutkan
di atas:

Langkah 3: Tambahkan Ikon FAB ke File Drawable

Untuk tujuan demonstrasi akan mengimpor 3 ikon di folder Drawable, dan seseorang dapat
mengimpor ikon pilihannya. Seseorang dapat melakukannya dengan mengklik kanan folder
drawable > New > Vector Asset . Lihat gambar berikut untuk mengimpor Ikon vektor.

12
Sekarang pilih ikon vektor Anda

13
Langkah 4: Bekerja dengan File XML
Selanjutnya, buka file Activity_main.xml , yang mewakili UI proyek. Di bawah ini adalah kode
untuk file Activity_main.xml . Komentar ditambahkan di dalam kode untuk memahami kode secara
lebih detail.
Dalam file Activity_main.xml tambahkan tombol tindakan mengambang dan aktifkan kode
berikut. Sekarang aktifkan FAB normal. Yaitu radius 56dp. Kami telah merantai sub-FAB ke FAB induk
sehingga mereka berada dalam satu baris kunci. Komentar ditambahkan di dalam kode untuk memahami
kode secara lebih detail.

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.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=".MainActivity"

tools:ignore="HardcodedText">

<!-- This will be the parent Floating Action Button -->

<!-- After the implementation the Floating Action Button

at the bottom right corner -->

<!-- After clicking the above button the following two buttons

will pop up. So this button is considered as parent FAB -->

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:id="@+id/add_fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

14
 android:layout_gravity="end"

android:layout_marginEnd="16dp"

android:layout_marginBottom="16dp"

android:src="@drawable/ic_add_black_24dp"

app:fabSize="normal"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent" />

<!-- Floating action button for add alarm -->

<!-- Make sure that you are constraining this

button to the parent button -->

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:id="@+id/add_alarm_fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="24dp"

app:fabSize="normal"

app:layout_constraintBottom_toTopOf="@+id/add_fab"

app:layout_constraintEnd_toEndOf="@+id/add_fab"

app:layout_constraintStart_toStartOf="@+id/add_fab"

app:srcCompat="@drawable/ic_add_alarm_black_24dp" />

<!-- Action name text for the add alarm button -->

<!-- Make sure that you are constraining this Text to

15
 the add Alarm FAB button -->

<TextView

android:id="@+id/add_alarm_action_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="8dp"

android:text="Add Alarm"

app:layout_constraintBottom_toBottomOf="@+id/add_alarm_fab"

app:layout_constraintEnd_toStartOf="@+id/add_alarm_fab"

app:layout_constraintTop_toTopOf="@+id/add_alarm_fab" />

<!-- Floating action button for add person -->

<!-- Make sure that you are constraining this

button to the add Alarm FAB button -->

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:id="@+id/add_person_fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="24dp"

app:fabSize="normal"

app:layout_constraintBottom_toTopOf="@+id/add_alarm_fab"

app:layout_constraintEnd_toEndOf="@+id/add_alarm_fab"

app:layout_constraintStart_toStartOf="@+id/add_alarm_fab"

app:srcCompat="@drawable/ic_person_add_black_24dp" />

16
 <!-- Action name text for the add person button -->

<!-- Make sure that you are constraining this Text

to the add Person FAB button -->

<TextView

android:id="@+id/add_person_action_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="8dp"

android:text="Add Person"

app:layout_constraintBottom_toBottomOf="@+id/add_person_fab"

app:layout_constraintEnd_toStartOf="@+id/add_person_fab"

app:layout_constraintTop_toTopOf="@+id/add_person_fab" />

</androidx.constraintlayout.widget.ConstraintLayout>

UI Output :

17
Langkah 5: Bekerja dengan File MainActivity
Buka File MainActivity dan lihat kode berikut. Di bawah ini adalah kode untuk File
MainActivity. Komentar ditambahkan di dalam kode untuk memahami kode secara lebih
detail.
Sekarang, kami menangani semua FAB menggunakan metode setOnClickListener() yang
dapat Anda rujuk ke peristiwa Menangani Klik di Button di Android. Dalam kode ini, telah
ditunjukkan bahwa kapan sub FAB terlihat dengan onClickListener. Komentar ditambahkan
di dalam kode untuk memahami kode secara lebih detail.

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

// Make sure to use the FloatingActionButton for all the FABs
FloatingActionButton mAddFab, mAddAlarmFab, mAddPersonFab;

// These are taken to make visible and invisible along with FABs
TextView addAlarmActionText, addPersonActionText;

// to check whether sub FAB buttons are visible or not.

Boolean isAllFabsVisible;

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

// Register all the FABs with their IDs This FAB button is the Parent
mAddFab = findViewById(R.id.add_fab);

// FAB button
mAddAlarmFab = findViewById(R.id.add_alarm_fab);
mAddPersonFab = findViewById(R.id.add_person_fab);

// Also register the action name text, of all the FABs.

addAlarmActionText = findViewById(R.id.add_alarm_action_text);
addPersonActionText = findViewById(R.id.add_person_action_text);

// Now set all the FABs and all the action name texts as GONE
mAddAlarmFab.setVisibility(View.GONE);
mAddPersonFab.setVisibility(View.GONE);
addAlarmActionText.setVisibility(View.GONE);
addPersonActionText.setVisibility(View.GONE);

18
 // make the boolean variable as false, as all the
// action name texts and all the sub FABs are invisible
isAllFabsVisible = false;

// We will make all the FABs and action name texts

// visible only when Parent FAB button is clicked So
// we have to handle the Parent FAB button first, by
// using setOnClickListener you can see below
mAddFab.setOnClickListener(view -> {
if (!isAllFabsVisible) {
// when isAllFabsVisible becomes true make all
// the action name texts and FABs VISIBLE
mAddAlarmFab.show();
mAddPersonFab.show();
addAlarmActionText.setVisibility(View.VISIBLE);
addPersonActionText.setVisibility(View.VISIBLE);

// make the boolean variable true as we

// have set the sub FABs visibility to GONE
isAllFabsVisible = true;
} else {
// when isAllFabsVisible becomes true make
// all the action name texts and FABs GONE.
mAddAlarmFab.hide();
mAddPersonFab.hide();
addAlarmActionText.setVisibility(View.GONE);
addPersonActionText.setVisibility(View.GONE);

// make the boolean variable false as we

// have set the sub FABs visibility to GONE
isAllFabsVisible = false;
}
});
// below is the sample action to handle add person FAB. Here it shows simple Toast msg.
// The Toast will be shown only when they are visible and only when user clicks on them
mAddPersonFab.setOnClickListener(
view -> Toast.makeText(MainActivity.this, "Person Added", Toast.LENGTH_SHORT
).show());

// below is the sample action to handle add alarm FAB. Here it shows simple Toast msg
// The Toast will be shown only when they are visible and only when user clicks on them
mAddAlarmFab.setOnClickListener(
view -> Toast.makeText(MainActivity.this, "Alarm Added", Toast.LENGTH_SHORT
).show());
}
}

19
Output :

20