Difference between revisions of "Android App"

From Sinfronteras
Jump to: navigation, search
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
==Adroid==
+
==Android Basics: User Interface==
  
 
===XML syntax===
 
===XML syntax===
Line 10: Line 10:
 
     Android:layout_height=“75dp”/>                      // attributes and close tag
 
     Android:layout_height=“75dp”/>                      // attributes and close tag
 
</syntaxhighlight>
 
</syntaxhighlight>
−
 
  
 
[[File:1.png|500px|thumb|center|]]
 
[[File:1.png|500px|thumb|center|]]
Line 17: Line 16:
  
 
[[File:2.png|950px|thumb|center|]]
 
[[File:2.png|950px|thumb|center|]]
−
[[File:3.png|950px|thumb|center|]]
+
[[File:3.png|500px|thumb|center|]]
 
[[File:4.png|950px|thumb|center|]]
 
[[File:4.png|950px|thumb|center|]]
  
 
or
 
or
  
−
[[File:5.png|950px|thumb|center|]]
+
[[File:5.png|500px|thumb|center|]]
  
 
https://plus.google.com/+AndroidDevelopers/posts/gQuBtnuk6iG
 
https://plus.google.com/+AndroidDevelopers/posts/gQuBtnuk6iG
Line 28: Line 27:
 
===Hex Color===
 
===Hex Color===
  
−
[[File:6.png|950px|thumb|center|]]
+
[[File:6.png|300px|thumb|center|]]
 
[[File:7.png|950px|thumb|center|]]
 
[[File:7.png|950px|thumb|center|]]
  
Line 59: Line 58:
 
ViewGroups
 
ViewGroups
  
−
[[File:10.png|950px|thumb|center|]]
+
[[File:10.png|500px|thumb|center|]]
  
 
* LinearLayout
 
* LinearLayout
 
* RelativeLayout
 
* RelativeLayout
  
−
[[File:11.png|950px|thumb|center|]]
+
[[File:11.png|500px|thumb|center|]]
  
 
<syntaxhighlight lang="java">
 
<syntaxhighlight lang="java">
Line 89: Line 88:
 
</LinearLayout>
 
</LinearLayout>
  
−
[[File:12.png|950px|thumb|center|]]
+
[[File:12.png|500px|thumb|center|]]
  
−
[[File:13.png|950px|thumb|center|]]
+
[[File:13.png|500px|thumb|center|]]
  
 
<syntaxhighlight lang="java">
 
<syntaxhighlight lang="java">
Line 136: Line 135:
 
https://developer.android.com/guide/topics/ui/layout/linear.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics
 
https://developer.android.com/guide/topics/ui/layout/linear.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics
  
−
[[File:15.png|950px|thumb|center|]]
+
[[File:15.png|400px|thumb|center|]]
−
[[File:16.png|950px|thumb|center|]]
+
[[File:16.png|900px|thumb|center|]]
−
[[File:17.png|950px|thumb|center|]]
+
[[File:17.png|600px|thumb|center|]]
−
[[File:18.png|950px|thumb|center|]]
+
[[File:18.png|600px|thumb|center|]]
−
[[File:19.png|950px|thumb|center|]]
+
[[File:19.png|600px|thumb|center|]]
−
[[File:20.png|950px|thumb|center|]]
+
[[File:20.png|600px|thumb|center|]]
−
[[File:21.png|950px|thumb|center|]]
+
[[File:21.png|600px|thumb|center|]]
−
[[File:22.png|950px|thumb|center|]]
+
[[File:22.png|600px|thumb|center|]]
−
[[File:23.png|950px|thumb|center|]]
+
[[File:23.png|600px|thumb|center|]]
−
[[File:24.png|950px|thumb|center|]]
+
[[File:24.png|600px|thumb|center|]]
−
[[File:25.png|950px|thumb|center|]]
+
[[File:25.png|600px|thumb|center|]]
  
 
https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics
 
https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics
  
−
[[File:26.png|950px|thumb|center|]]
+
[[File:26.png|500px|thumb|center|]]
−
[[File:27.png|950px|thumb|center|]]
+
[[File:27.png|500px|thumb|center|]]
  
 
Documentation with all the parameters.
 
Documentation with all the parameters.
  
−
[[File:28.png|950px|thumb|center|]]
+
[[File:28.png|750px|thumb|center|]]
  
 
https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics
 
https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics
  
−
[[File:29.png|950px|thumb|center|]]
+
[[File:29.png|300px|thumb|center|]]
  
 
<syntaxhighlight lang="java">
 
<syntaxhighlight lang="java">
Line 291: Line 290:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
[[File:30.png|950px|thumb|center|]]
+
[[File:30.png|600px|thumb|center|]]
−
[[File:31.png|950px|thumb|center|]]
+
[[File:31.png|500px|thumb|center|]]
−
[[File:32.png|950px|thumb|center|]]
+
[[File:32.png|600px|thumb|center|]]
 
[[File:33.png|950px|thumb|center|]]
 
[[File:33.png|950px|thumb|center|]]
  
Line 336: Line 335:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
[[File:34.png|950px|thumb|center|]]
+
[[File:34.png|600px|thumb|center|]]
  
 
  In layers view Overlapping view
 
  In layers view Overlapping view
 
 
 
position attributes
 
position attributes
−
[[File:35.png|950px|thumb|center|]]
+
[[File:35.png|500px|thumb|center|]]
−
[[File:36.png|950px|thumb|center|]]
+
[[File:36.png|750px|thumb|center|]]
−
[[File:37.png|950px|thumb|center|]]
+
[[File:37.png|500px|thumb|center|]]
−
[[File:38.png|950px|thumb|center|]]
+
[[File:38.png|600px|thumb|center|]]

Latest revision as of 08:26, 7 August 2019

Android Basics: User Interface

XML syntax

< TextView                                          //open tag
    android:text=“Happy Valentine’s Day”                // attributes
    android:background=“@android:color/darker_gray”     // attributes
    Android:layout_width=“150dp”                        // attributes
    Android:layout_height=“75dp”/>                      // attributes and close tag
1.png

For the width / height to be precisely with the size of the content the value will be = “wrap_content”

2.png
3.png
4.png

or

5.png

https://plus.google.com/+AndroidDevelopers/posts/gQuBtnuk6iG

Hex Color

6.png
7.png 
<TextView
    android:text="Happy Valentine's Day Ale eu amo vc de montao :) !"
    android:textColor="@android:color/black"
    android:background="#FF0266"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="45sp"
    android:textStyle="bold"
    />

Image

8.png
9.png 
<TextView
    <ImageView
    android:src="@drawable/cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"/>

ViewGroups

10.png
  • LinearLayout
  • RelativeLayout
11.png 
<TextView
    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:text="Guest List"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

    <TextView
        android:text="Kunal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"  />

</LinearLayout>

12.png
13.png 
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray">

    <TextView
        android:text="VIP List"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4CAF50"
        android:textSize="24sp" />

    <TextView
        android:text="Kunal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4CAF50"
        android:textSize="24sp" />

    <TextView
        android:text="Kagure"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4CAF50"
        android:textSize="24sp" />

    <TextView
        android:text="Lyla"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4CAF50"
        android:textSize="24sp" />

</LinearLayout>

14.png

https://developer.android.com/guide/topics/ui/layout/linear.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics

15.png
16.png
17.png
18.png
19.png
20.png
21.png
22.png
23.png
24.png
25.png

https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics

26.png
27.png

Documentation with all the parameters.

28.png

https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics

29.png 
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF8000">

    <TextView
        android:id="@+id/lyla_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:textSize="24sp"
        android:text="Lyla" 
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:background="#00FF"
        android:textColor="#FFFF"/>


    <TextView
        android:id="@+id/me_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/lyla_text_view"
        android:textSize="24sp"
        android:text="Me" 
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="5dp"
        android:background="#00FF"
        android:textColor="#FFFF"/>

    <TextView
        android:id="@+id/natalie_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_above="@id/lyla_text_view"
        android:textSize="24sp"
        android:text="Natalie"
        android:layout_marginLeft="13dp"
        android:background="#00FF"
        android:textColor="#FFFF"/>

    <TextView
        android:id="@+id/jennie_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:textSize="24sp"
        android:text="Jennie"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:background="#00FF"
        android:textColor="#FFFF"/>

    <TextView
        android:id="@+id/omoju_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_above="@id/jennie_text_view"
        android:textSize="24sp"
        android:text="Omoju"
        android:layout_marginRight="10dp"
        android:background="#00FF"
        android:textColor="#FFFF"/>

    <TextView
        android:id="@+id/amy_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_above="@id/omoju_text_view"
        android:textSize="24sp"
        android:text="Amy" 
        android:layout_marginRight="10dp"
        android:layout_marginBottom="5dp"
        android:background="#00FF"
        android:textColor="#FFFF"/>

    <TextView
        android:id="@+id/ben_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="24sp"
        android:text="Ben" 
        android:layout_marginLeft="5dp"
        android:layout_marginTop="20dp"      
        android:background="#00FF"
        android:textColor="#FFFF"/>


    <TextView
        android:id="@+id/kunal_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/ben_text_view"
        android:textSize="24sp"
        android:text="Kunal" 
        android:layout_marginTop="20dp"
        android:background="#00FF"
        android:textColor="#FFFF"/>

    <TextView
        android:id="@+id/kagure_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/ben_text_view"
        android:textSize="24sp"
        android:text="Kagure"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="20dp"          
        android:background="#00FF"
        android:textColor="#FFFF"/>

</RelativeLayout>
30.png
31.png
32.png
33.png 
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:src="@drawable/ocean"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="centerCrop"/>

    <TextView
        android:text="You're invited!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="45sp"
        android:background="#009688"
        android:paddingTop="16dp"
        android:paddingRight="16dp"
        android:paddingLeft="16dp"
        android:paddingBottom="8dp"/>

    <TextView
        android:text="Bonfire at the beach"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        android:background="#009688"
        android:paddingBottom="16dp"
        android:paddingRight="16dp"
        android:paddingLeft="16dp"/>

</LinearLayout>
34.png 
In layers view 														Overlapping view

position attributes

35.png
36.png
37.png
38.png
Retrieved from "http://wiki.sinfronteras.ws/index.php?title=Android_App&oldid=10053"