인스타그램 UI 만들기

2020. 7. 9. 15:26

https://blog.naver.com/getinthere/221694606685

안드로이드 1강 - (5) Relative 레이아웃

1. Relative 기본 예제activity_main.xmlitem_post1.xml2. 위의 예제 참고https://blog.naver.com/codin...

blog.naver.com

안드로이드 drawable 폴더에 복붙할 시 하위폴더 인식을 못한다 (폴더 복붙 하지말 것)

layout_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<merge
    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"
    >

    <RelativeLayout
        android:layout_marginLeft="10dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/img_pro1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            app:srcCompat="@drawable/propic1" />

        <TextView
            android:layout_marginTop="5dp"
            android:layout_below="@id/img_pro1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your story" />

    </RelativeLayout>

</merge>

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout

        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <include layout="@layout/layout_profile" />
        <include layout="@layout/layout_profile" />
        <include layout="@layout/layout_profile" />
        <include layout="@layout/layout_profile" />
        <include layout="@layout/layout_profile" />

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </LinearLayout>

    </ScrollView>

</LinearLayout>

동그란 이미지를 만들기 위해 라이브러리 추가

https://github.com/hdodenhof/CircleImageView

hdodenhof/CircleImageView

A circular ImageView for Android. Contribute to hdodenhof/CircleImageView development by creating an account on GitHub.

github.com

androidx 를 써야한다 !!!! (구버전의 android는 사용못함)

구버전은 compile -> 신버전은 implementation

액션바 없애기

완성

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">

        <include layout="@layout/layout_profile" />

        <include layout="@layout/layout_profile" />

        <include layout="@layout/layout_profile" />

        <include layout="@layout/layout_profile" />

        <include layout="@layout/layout_profile" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!--            리니어 레이아웃 버티컬-->

            <include layout="@layout/layout_content" />
            <include layout="@layout/layout_content" />
            <include layout="@layout/layout_content" />
            <include layout="@layout/layout_content" />
            <include layout="@layout/layout_content" />

        </LinearLayout>

    </ScrollView>

</LinearLayout>

layout_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<merge
    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"
    >

    <RelativeLayout
        android:layout_marginLeft="10dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content">

<!--        <ImageView-->
<!--            android:id="@+id/img_pro1"-->
<!--            android:layout_width="60dp"-->
<!--            android:layout_height="60dp"-->
<!--            app:srcCompat="@drawable/propic1" />-->

        <de.hdodenhof.circleimageview.CircleImageView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/img_pro1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/propic1"
            app:civ_border_width="2dp"
            app:civ_border_color="#FF000000"/>

        <TextView
            android:layout_marginTop="5dp"
            android:layout_below="@id/img_pro1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your story" />

    </RelativeLayout>

</merge>

layout_content.xml

<?xml version="1.0" encoding="utf-8"?>
<merge
    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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/img_pro2"
                android:layout_marginLeft="10dp"
                android:layout_width="40dp"
                android:layout_height="match_parent"
                android:src="@drawable/propic1"
                app:civ_border_color="#FF000000"
                app:civ_border_width="2dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@+id/img_pro2"
                android:gravity="center"
                android:text="numbiker.nikkhil"
                android:textSize="18dp"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="30dp"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                app:srcCompat="@drawable/ic_more" />


        </RelativeLayout>

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/postpic1" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="40dp"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_marginLeft="10dp"
                app:srcCompat="@drawable/like" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="40dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/imageView4"
                app:srcCompat="@drawable/chat_bubble" />


            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="40dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/imageView5"
                app:srcCompat="@drawable/send" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_marginRight="10dp"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="10dp"
                app:srcCompat="@drawable/bookmark" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="40dp">

            <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/img_pro3"
                android:layout_marginLeft="10dp"
                android:layout_width="35dp"
                android:layout_height="match_parent"
                android:src="@drawable/propic2"
                app:civ_border_color="#FF000000"
                app:civ_border_width="2dp" />

            <TextView
                android:id="@+id/textView"
                android:layout_toRightOf="@id/img_pro3"
                android:gravity="center"
                android:layout_marginLeft="10dp"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="Liked by"
                android:textSize="18dp"/>

            <TextView
                android:id="@+id/textView1"
                android:layout_toRightOf="@id/textView"
                android:gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="bhuvan.van"
                android:textSize="18dp"
                android:textStyle="bold"/>

            <TextView
                android:id="@+id/textView2"
                android:layout_toRightOf="@id/textView1"
                android:gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="and"
                android:textSize="18dp"/>

            <TextView
                android:id="@+id/textView3"
                android:layout_toRightOf="@id/textView2"
                android:gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="24 others"
                android:textSize="18dp"
                android:textStyle="bold" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="15dp"
                android:gravity="center"
                android:text="numbiker.ni"
                android:textSize="18dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/textView5"
                android:layout_toRightOf="@id/textView4"
                android:gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="#asdf"
                android:textSize="18dp"
                android:textStyle="bold"
                android:textColor="@android:color/holo_blue_dark"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <de.hdodenhof.circleimageview.CircleImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/img_pro4"
                android:layout_marginLeft="10dp"
                android:layout_width="40dp"
                android:layout_height="match_parent"
                android:src="@drawable/propic3"
                app:civ_border_color="#FF000000"
                app:civ_border_width="2dp" />

            <EditText
                android:id="@+id/editTextTextPersonName"
                android:layout_toRightOf="@id/img_pro4"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:ems="10"
                android:inputType="textPersonName"
                android:textSize="22dp"
                android:textColor="@android:color/darker_gray"
                android:text="Add Comment..." />

            <!--            <TextView-->
<!--                android:id="@+id/textView6"-->
<!--                android:layout_toRightOf="@id/img_pro4"-->
<!--                android:gravity="center"-->
<!--                android:layout_marginLeft="15dp"-->
<!--                android:layout_width="wrap_content"-->
<!--                android:layout_height="match_parent"-->
<!--                android:text="Add Comment..."-->
<!--                android:textSize="22dp"/>-->

        </RelativeLayout>

        <TextView
            android:id="@+id/textView7"
            android:layout_marginLeft="15dp"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="8HOURS AGO"
            android:textSize="16dp"/>

    </LinearLayout>

</merge>

<EditText
                android:id="@+id/editTextTextPersonName"
                android:layout_toRightOf="@id/img_pro4"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:ems="10"
                android:inputType="textPersonName"
                android:textSize="22dp"
                android:textColor="@android:color/darker_gray"
                android:hint="Add Comment..."
                android:background="@android:color/transparent"/>

hint 는 placeholder와 비슷함

background는 밑줄을 없앤다

'App > Android' 카테고리의 다른 글

200715 / 액션바 / 툴바 / 액티비티와 프래그먼트 (0)	2020.07.15
200714 / 안드로이드 기초 / 인스타그램 로그인페이지 만들기 / 계산기 만들기 (0)	2020.07.14
200709 / 리니어 레이아웃으로 화면구성 / (0)	2020.07.09
안드로이드 // 레이아웃 구성 (0)	2020.07.08
안드로이드 // 기본 세팅 (0)	2020.07.08

Jaybon 의 지식창고

인스타그램 UI 만들기

'App > Android' 카테고리의 다른 글

+ Recent posts

티스토리툴바