Android - Place Imageview Next To Two Textviews Under Each Other

How do i create above layout in android studio ?

Solution 1:

First add dependencies in your gradle file for circular image view

compile'de.hdodenhof:circleimageview:2.1.0'

now you can use below code as per your requirement

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:weightSum="3"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/meal_image_order"android:layout_width="96dp"android:layout_height="96dp"android:src="@color/colorAccent"app:civ_border_color="@color/colorPrimaryDark"app:civ_border_width="2dp" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="2"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/tv1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Textview 1" /><TextViewandroid:id="@+id/tv2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Textview 2" /></LinearLayout></LinearLayout></LinearLayout>

sample output

Solution 2:

First add line in your app level build.gradle file following line of code in dependencies

compile'de.hdodenhof:circleimageview:2.1.0'

after try following code

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:weightSum="3"><LinearLayoutandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="match_parent"><de.hdodenhof.circleimageview.CircleImageViewxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/meal_image_order"android:layout_width="80dp"android:layout_height="80dp"android:src="@mipmap/profile" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:orientation="vertical"android:layout_weight="2"><TextViewandroid:id="@+id/tv1"android:textSize="15sp"android:textStyle="bold"android:textColor="#000"android:gravity="start"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Broad Bean" /><TextViewandroid:id="@+id/tv2"android:textColor="#000"android:gravity="start"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="3dp"android:text="Broad" /></LinearLayout></LinearLayout>

Solution 3:

  [<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="100dp"android:background="@drawable/view"android:gravity="fill_horizontal|center"><ImageViewandroid:id="@+id/dp"android:layout_width="60dp"android:layout_height="60dp"android:layout_marginLeft="15dp"app:srcCompat="@drawable/lea" /><TextViewandroid:id="@+id/s_name"android:layout_width="wrap_content"android:layout_height="30dp"android:layout_alignParentStart="true"android:layout_alignTop="@+id/imageView"android:layout_marginStart="85dp"android:gravity="fill_vertical"android:text="Mathan"android:textColor="#78038A"android:textSize="18.5dp"android:textStyle="bold" /><TextViewandroid:id="@+id/s_code"android:layout_width="wrap_content"android:layout_height="30dp"android:layout_alignStart="@+id/s_name"android:layout_below="@+id/s_name"android:fontFamily="serif"android:gravity="fill_vertical"android:text="4320 - XXXXXXXXXXXXXXXXXXX"android:textColor="#000000"android:textSize="16dp"android:textStyle="bold" /></RelativeLayout>][1]


  [1]: https://i.stack.imgur.com/Yzg8V.jpg