Membuat layout xml 3 kolom di android studio

Bismillahirrohmaanirrohiim…

Setelah kesana kemari mencari cara bagaimana Membuat layout xml tiga (3) kolom di android studio, akhirnya ketemu, yaitu menggunakan RelativeLayout.

Berikut kode xml nya:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="88dp">
<ImageView
android:id="@+id/image_view"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="20dp"
tools:src="@drawable/ic_skip_previous_black_24dp"/>
<TextView
android:id="@+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="72dp"
android:layout_marginStart="72dp"
android:layout_marginRight="56dp"
android:layout_marginEnd="56dp"
android:layout_marginTop="16dp"
android:maxLines="1"
android:textSize="16sp"
android:textColor="?android:attr/textColorPrimary"
tools:text="This is the title line"/>
<TextView
android:id="@+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_below="@+id/text_view1"
android:layout_marginLeft="72dp"
android:layout_marginStart="72dp"
android:layout_marginRight="56dp"
android:layout_marginEnd="56dp"
android:maxLines="1"
android:textSize="14sp"
android:textColor="?android:attr/textColorSecondary"
tools:text="This is the second line"/>
<TextView
android:id="@+id/text_view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_below="@+id/text_view2"
android:layout_marginLeft="72dp"
android:layout_marginStart="72dp"
android:layout_marginRight="56dp"
android:layout_marginEnd="56dp"
android:maxLines="1"
android:textSize="14sp"
android:textColor="?android:attr/textColorSecondary"
tools:text="This is the third line"/>
<ImageView
android:id="@+id/image_view_2"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="20dp"
tools:src="@drawable/ic_skip_next_black_24dp"/>
</RelativeLayout>

 

Kode xml yang lain, yang menggunakan posisi ID, sebagai berikut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp">
<ImageView
android:id="@+id/user_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_action_name"/>
<ImageView
android:id="@+id/action_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_action_name"/>
<TextView
android:id="@+id/name_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="@+id/action_image"
android:layout_toRightOf="@+id/user_image"
android:padding="5dp"
android:text="XYZ"/>
<TextView
android:id="@+id/number_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/name_tv"
android:layout_toLeftOf="@+id/action_image"
android:layout_toRightOf="@+id/user_image"
android:padding="5dp"
android:text="12345"/>
</RelativeLayout>

Silahkan dicoba dan hasilnya bisa langsung dilihat.

You May Also Like

About the Author: rasupe

Leave a Reply

Your email address will not be published. Required fields are marked *