Tampilan responsif adalah konsep desain Program yang memungkinkan antarmuka situs atau aplikasi menyesuaikan diri secara otomatis dengan ukuran layar dan perangkat yang berbeda, seperti desktop, tablet, dan smartphone. Dengan tampilan responsif, elemen-elemen dalam desain seperti gambar, teks, menu, dan tata letak dapat berubah agar tetap terlihat bagus dan mudah diakses di berbagai resolusi layar.
Buat Projek dengan nama sahimm2 kemudian pilih bahasa java dengan API 17: Android 4.2(Jelly Bean)
finish
pada activity_main.xml tambahkan code berikut :
<ScrollView
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"
android:padding="16dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<!-- Spinner dengan namespace yang benar -->
<Spinner
android:id="@+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:entries="@array/item_options" />
<!-- ImageView untuk menampilkan gambar -->
<ImageView
android:id="@+id/imageView"
android:layout_width="234dp"
android:layout_height="237dp"
android:layout_marginTop="20dp"
android:background="@drawable/border_rounded"
android:scaleType="centerCrop"
android:src="@drawable/image_default"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/spinner"
app:layout_constraintWidth_percent="0.8" />
<!-- TextView untuk deskripsi gambar -->
<TextView
android:id="@+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center"
android:text="Pilih item untuk melihat deskripsi"
android:textColor="@android:color/black"
android:textStyle="bold"
android:textSize="18sp"
android:padding="16dp"
android:background="@drawable/border_rounded_text" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
pada MainActivity.java tambahkan code berikut :
package com.example.sahimm2;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
private TextView description;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Inisialisasi Spinner, ImageView, dan TextView
Spinner spinner = findViewById(R.id.spinner);
imageView = findViewById(R.id.imageView);
description = findViewById(R.id.description);
// Set listener untuk spinner
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// Periksa item yang dipilih dan tampilkan gambar serta deskripsi
switch (position) {
case 0:
imageView.setImageResource(R.drawable.nasgor);
description.setText("Nasi goreng adalah salah satu hidangan paling ikonik di Indonesia, yang terdiri dari nasi yang digoreng dengan campuran bumbu dan bahan-bahan seperti kecap manis, bawang putih, bawang merah, cabai, dan saus lainnya. Hidangan ini sering kali dilengkapi dengan bahan tambahan seperti telur, ayam, udang, daging sapi, sosis, atau sayuran, tergantung selera dan ketersediaan.\n" +
"\n" +
"Ciri khas nasi goreng adalah rasa yang gurih, sedikit manis, dan pedas, tergantung pada bumbu yang digunakan. Biasanya, nasi yang digunakan adalah nasi sisa atau nasi yang sudah dingin, karena teksturnya yang lebih kering membuat nasi tidak mudah lembek saat digoreng. Proses memasak nasi goreng cepat dan sederhana, menjadikannya pilihan makanan praktis yang bisa disiapkan kapan saja.\n" +
"\n" +
"Nasi goreng sering kali disajikan dengan pelengkap seperti telur mata sapi, kerupuk, acar, dan irisan mentimun atau tomat untuk menambah kesegaran. Beberapa variasi nasi goreng yang terkenal di Indonesia termasuk Nasi Goreng Jawa, Nasi Goreng Kampung, dan Nasi Goreng Seafood. Karena kelezatannya dan kemudahan dalam memasaknya, nasi goreng telah menjadi hidangan yang disukai tidak hanya di Indonesia, tetapi juga di berbagai negara sebagai contoh masakan Asia yang sederhana namun memuaskan.");
break;
case 1:
imageView.setImageResource(R.drawable.sate);
description.setText("Sate adalah hidangan khas Indonesia yang terdiri dari potongan daging yang ditusuk dengan bambu atau lidi, kemudian dipanggang di atas bara api. Daging yang digunakan untuk sate sangat bervariasi, mulai dari daging ayam, kambing, sapi, ikan, hingga daging kelinci atau bahkan jeroan. Sebelum dipanggang, daging biasanya dibumbui dengan campuran rempah-rempah khas, seperti kecap manis, bawang putih, ketumbar, kunyit, dan bahan-bahan lainnya sesuai dengan variasi daerah masing-masing.\n" +
"\n" +
"Sate disajikan dengan berbagai macam saus pendamping, yang paling umum adalah saus kacang yang terbuat dari kacang tanah yang dihaluskan, campuran kecap manis, serta irisan cabai dan bawang merah. Selain saus kacang, sate juga sering disajikan dengan sambal kecap, atau bahkan kuah gulai di beberapa daerah.\n" +
"\n" +
"Hidangan ini populer di seluruh Indonesia dengan berbagai variasi regional, seperti Sate Madura, Sate Padang, Sate Lilit dari Bali, dan banyak lagi. Sate sering disajikan bersama nasi, lontong, atau ketupat, menjadikannya pilihan makanan yang mengenyangkan dan kaya rasa. Kelezatan sate dan variasi bumbunya yang beragam membuatnya menjadi salah satu kuliner yang digemari tidak hanya di Indonesia, tetapi juga di luar negeri.");
break;
case 2:
imageView.setImageResource(R.drawable.soto);
description.setText("Soto adalah salah satu jenis hidangan sup yang sangat populer di Indonesia, dengan banyak variasi di setiap daerah. Biasanya, soto terdiri dari kaldu yang kaya rasa, daging (seperti ayam, sapi, atau kambing), sayuran, dan rempah-rempah yang memberikan aroma khas.\n" +
"\n" +
"Ciri khas soto adalah kuahnya yang bening atau keruh, tergantung pada bahan dan cara pembuatannya. Soto sering disajikan dengan nasi atau mie, serta pelengkap seperti telur rebus, sambal, kerupuk, dan perasan jeruk nipis. Beberapa jenis soto yang terkenal antara lain Soto Betawi, Soto Lamongan, dan Soto Ayam. Setiap daerah memiliki resep dan bahan yang berbeda, menciptakan rasa dan pengalaman kuliner yang unik. Soto tidak hanya enak, tetapi juga menggugah selera dan sering dinikmati sebagai hidangan keluarga atau dalam acara spesial.\n" +
"\n" +
"\n" +
"\n" +
"\n" +
"\n" +
"\n");
break;
default:
imageView.setImageResource(R.drawable.image_default);
description.setText("Pilih item untuk melihat deskripsi.");
break;
}
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
// Tidak ada item yang dipilih
}
});
}
}
tambahkan foto pada file drawable :
sebagai contoh saya menambahkan 4 foto yaitu foto nasgor, sate, soto dan image_default sebagai foto default ketika kita memilih menu apapun.
kemudian pada drawable tambahkan 2 file xml
yang pertama file dengan nama border_rounded.xml tambahkan code berikut :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white"/>
<corners android:radius="16dp"/>
<stroke
android:width="2dp"
android:color="@android:color/darker_gray"/>
<padding android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp"/>
</shape>
dan yang kedua file dengan nama border_rounded_text.xml tambahkan code berikut :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white"/>
<corners android:radius="12dp"/>
<stroke
android:width="1dp"
android:color="@android:color/holo_blue_light"/>
<padding android:left="8dp" android:top="8dp" android:right="8dp" android:bottom="8dp"/>
</shape>
kemudian buka file values pilih file strings.xml tambhakan code berikut :
<resources>
<string name="app_name">MENU</string>
<string-array name="item_options">
<item>Nasi Goreng</item>
<item>Sate</item>
<item>Soto</item>
</string-array>
</resources>
hasilnya akan seperti pada video berikut :
Manfaat dari tampilan responsif adalah pengalaman pengguna yang lebih baik, meningkatkan keterjangkauan di berbagai perangkat, dan meningkatkan SEO, karena mesin pencari lebih menyukai situs yang mobile-friendly.