본문 바로가기
개발 공부/안드로이드 스튜디오(코틀린)

안드로이드 스튜디오 사용!

by momo'sdad 2023. 10. 17.

안드로이드 스튜디오 사용!

 

1. 안드로이드 스튜디오로 버튼으로 그라데이션 만들기

소스코드로도 만들 수 있지만 오늘은 좀 더 쉽게 마우스로 디자인 창을 통해 여러가지를 만들어 보았다.

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button13"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#3F51B5"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="#FF3F51B5"
        app:cornerRadius="0dp" />

    <Button
        android:id="@+id/button14"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#D93F51B5"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="#D93F51B5"
        app:cornerRadius="0dp" />

    <Button
        android:id="@+id/button15"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#B33F51B5"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="#B33F51B5"
        app:cornerRadius="0dp" />

    <Button
        android:id="@+id/button16"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#803F51B5"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="#803F51B5"
        app:cornerRadius="0dp" />

    <Button
        android:id="@+id/button17"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#593F51B5"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="#593F51B5"
        app:cornerRadius="0dp" />

    <Button
        android:id="@+id/button18"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#333F51B5"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="#333F51B5"
        app:cornerRadius="0dp" />

    <Button
        android:id="@+id/button19"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="#1A3F51B5"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="#1A3F51B5"
        app:cornerRadius="0dp" />
</LinearLayout>

  • layout_width="match_parent"-: 부모의 크기에 맞춰서 너비 지정
  • layout_height=

     -"match_parent" -: 부모의 크기에 맞춰서 높이 지정

     -"wrap_content" -: 콘텐츠(내용)의 크기에 맞춰서 높이 지정

  • layout_weight="1"- 가중치를 1준다.
  • backgroundtint : 버튼의 색상을 변경하는데 사용.(rgb 옵션을 사용하여 그라데이션을 좀 더 쉽게 사용할 수 있다.)
  • inset: 사이 공간의 값들 설정

     - top: 버튼 간의 위쪽 사이 공간값

     - bottom: 버튼 간의 아래쪽 사이 공간값

  • cornerRadius="0dp" - : 모서리 둥근 정도

https://colorhunt.co/

 

Color Palettes for Designers and Artists - Color Hunt

Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

colorhunt.co

 

 

이 사이트에서는 여러가지 색상 조합을 보고 색상표를 통해 색상을 가져올 수 있다.

파일 탐색란의 res > values > themes 파일을 눌러서 5번째줄의 맨왼쪽 색상의 Custom을 통해 전체적인 색상도 바꿀 수 있다.

themes(night)는 야간모드.

MainActivity를 눌러 위의 빨간색 네모칸을 내가 편집하고 있는 파일로 바꾸면 내가 편집하고 있는 화면을 시뮬레이션 창으로 띄울 수 있다.

2. textView를 이용해 명함 만들기

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="51dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/logo" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="40dp"
        android:layout_marginTop="70dp"
        android:text="기획팀"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="선임"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
    <TextView
        android:id="@+id/textView3"
        android:layout_width="146dp"
        android:layout_height="73dp"
        android:layout_marginTop="24dp"
        android:fontFamily="sans-serif"
        android:text="박진우"
        android:textSize="48dp"
        app:layout_constraintStart_toStartOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />
    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Park.Jin Woo"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />
    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:text="010-1234-4321"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/textView5" />
    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:text="PJW1234@abcde.COM"
        app:layout_constraintStart_toEndOf="@+id/textView8"
        app:layout_constraintTop_toTopOf="@+id/textView8" />
    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="E"
        android:textColor="#0023E4"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="@+id/textView7"
        app:layout_constraintTop_toBottomOf="@+id/textView7" />
    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="T"
        android:textColor="#0023E4"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="@+id/textView6"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />
    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="F"
        android:textColor="#0023E4"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="@+id/textView5"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="70dp"
        android:text="M"
        android:textColor="#0023E4"
        android:textDirection="firstStrongRtl"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="@+id/textView4"
        app:layout_constraintTop_toTopOf="@+id/textView4" />
    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:text="080-1234-1234"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:layout_constraintTop_toTopOf="@+id/textView7" />
    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"

Emulator 실행화면

TextView 상자를 이용해서 명함만들기

  • layout_constraint : 제약조건으로 위치 정해주기(중앙 또는 왼쪽, 오른쪽 여백을 놔두고 정렬하기)

layout_constraintStart_toStartOf : 왼쪽 여백 제약조건

layout_constraintEnd_toEndOf: 오른쪽 여백 제약조건

layout_constraintTop_toTopOf: 위쪽 여백 제약조건

layout_constraintBottom_toBottomOf: 아래쪽 여백 제약조건

가운데에 있는 선은 버튼의 layout_width="0dp" 옵션을 설정해서 선으로 만들었다.

반응형