-2

enter image description here

How do i create above layout in android studio ?

JAY
  • 43
  • 7

3 Answers3

2

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"?>
<LinearLayout xmlns: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">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="3">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">

        <de.hdodenhof.circleimageview.CircleImageView
            android: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>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Textview 1" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Textview 2" />

    </LinearLayout>
</LinearLayout>
</LinearLayout>

sample output

enter image description here

AskNilesh
  • 67,701
  • 16
  • 123
  • 163
1

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

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent">

            <de.hdodenhof.circleimageview.CircleImageView
                xmlns: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>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="2">

            <TextView
                android: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" />

            <TextView
                android: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>
Omkar
  • 3,040
  • 1
  • 22
  • 42
0
  [<RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:background="@drawable/view"
                    android:gravity="fill_horizontal|center">

                    <ImageView
                        android:id="@+id/dp"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:layout_marginLeft="15dp"
                        app:srcCompat="@drawable/lea" />


                    <TextView
                        android: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" />

                    <TextView
                        android: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
Mathan
  • 1
  • 2