Desain Linear Layout Height Berdasarkan Persentase

cerita anak: "semut dan belalang" 

Desain Linear Layout berdasarkan persentase.

Bagaimana Cara menggunakan atau menetapkan lebar dan tinggi dalam format% di Linear Layout, RelativeLayout, dll.

Berikut ini adalah contoh kode untuk Linear Layout. Salin dan copy kan kode di bawah ini pada activity_main.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"
 tools:context="com.setheightwidthpercentage_android_examples.com.MainActivity"
 android:weightSum="100"
 android:orientation="vertical">

 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_weight="50"
  android:orientation="vertical"
  android:background="#FD0053">

  <TextView
   android:id="@+id/textView1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Ini Adalah Layout dengan 50% height"
   android:textAppearance="?android:attr/textAppearanceLarge"/>

 </LinearLayout>

 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_weight="25"
  android:orientation="vertical"
  android:background="#FDDF00">

  <TextView
   android:id="@+id/textView2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Ini Adalah Layout dengan 25% height"
   android:textAppearance="?android:attr/textAppearanceLarge"
   android:textColor="#fbfdfc"/>

 </LinearLayout>

 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_weight="25"
  android:orientation="vertical"
  android:background="#00CAFD">

  <TextView
   android:id="@+id/textView3"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Ini Adalah Layout dengan 25% height"
   android:textAppearance="?android:attr/textAppearanceLarge"/>

 </LinearLayout>

</LinearLayout>

Hasilnya:

Berikut ini adalah contoh kode untuk Frame Layout dengan gambar. Pertama-tama Pilih gambar yang kalian inginkan lalu beri nama image1. Lalu copy kan ke folder drawable.

Kemudian salin kode di bawah ini lalu copy kan kode pada activity_main.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"
 tools:context="com.setheightwidthpercentage_android_examples.com.MainActivity"
 android:weightSum="100"
 android:orientation="vertical">

 <FrameLayout
  android:id="@+id/FrameLayout1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_weight="50"
  android:layout_alignParentBottom="true"
  android:layout_alignParentLeft="true"
  android:layout_alignParentRight="true"
  android:layout_alignParentTop="true"
  android:background="@drawable/image_1">

  <TextView
   android:id="@+id/textView1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Ini Adalah Layout dengan 50% height"
   android:textAppearance="?android:attr/textAppearanceLarge"
   android:layout_gravity="center"/>

 </FrameLayout>

 <FrameLayout
  android:id="@+id/FrameLayout2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_weight="50"
  android:layout_alignParentBottom="true"
  android:layout_alignParentLeft="true"
  android:layout_alignParentRight="true"
  android:layout_alignParentTop="true"
  android:background="@drawable/image_1">

  <TextView
   android:id="@+id/textView1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Ini Adalah Layout dengan 50% height"
   android:textAppearance="?android:attr/textAppearanceLarge"
   android:layout_gravity="center"/>

 </FrameLayout>

</LinearLayout>

Hasilnya: