Difference between revisions of "Android App"

From Sinfronteras
Jump to: navigation, search
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
==Adroid==
+
==Android Basics: User Interface==
  
 
===XML syntax===
 
===XML syntax===
Line 5: Line 5:
 
<syntaxhighlight lang="java">
 
<syntaxhighlight lang="java">
 
< TextView                                          //open tag
 
< TextView                                          //open tag
−
android:text=“Happy Valentine’s Day”                // attributes
+
    android:text=“Happy Valentine’s Day”                // attributes
−
android:background=“@android:color/darker_gray”    // attributes
+
    android:background=“@android:color/darker_gray”    // attributes
−
Android:layout_width=“150dp”                        // attributes
+
    Android:layout_width=“150dp”                        // attributes
−
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|950px|thumb|center|]]
 
  
 
For the width / height to be precisely with the size of the content  the value will be = “wrap_content”
 
For the width / height to be precisely with the size of the content  the value will be = “wrap_content”
−
 
  
 
[[File:2.png|950px|thumb|center|]]
 
[[File:2.png|950px|thumb|center|]]
−
 
+
[[File:3.png|500px|thumb|center|]]
−
[[File:3.png|950px|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 31: 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 50: Line 45:
  
 
[[File:8.png|950px|thumb|center|]]
 
[[File:8.png|950px|thumb|center|]]
−
 
 
[[File:9.png|950px|thumb|center|]]
 
[[File:9.png|950px|thumb|center|]]
  
Line 64: Line 58:
 
ViewGroups
 
ViewGroups
  
−
[[File:10.png|950px|thumb|center|]]
+
[[File:10.png|500px|thumb|center|]]
 +
 
 +
* LinearLayout
 +
* RelativeLayout
 +
 
 +
[[File:11.png|500px|thumb|center|]]
 +
 
 +
<syntaxhighlight lang="java">
 +
<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"  />
 +
</syntaxhighlight>
 +
 
 +
</LinearLayout>
 +
 
 +
[[File:12.png|500px|thumb|center|]]
 +
 
 +
[[File:13.png|500px|thumb|center|]]
 +
 
 +
<syntaxhighlight lang="java">
 +
<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" />
 +
</syntaxhighlight>
 +
 
 +
</LinearLayout>
 +
 
 +
[[File:14.png|950px|thumb|center|]]
 +
 
 +
https://developer.android.com/guide/topics/ui/layout/linear.html?utm_source=udacity&utm_medium=course&utm_campaign=android_basics
 +
 
 +
[[File:15.png|400px|thumb|center|]]
 +
[[File:16.png|900px|thumb|center|]]
 +
[[File:17.png|600px|thumb|center|]]
 +
[[File:18.png|600px|thumb|center|]]
 +
[[File:19.png|600px|thumb|center|]]
 +
[[File:20.png|600px|thumb|center|]]
 +
[[File:21.png|600px|thumb|center|]]
 +
[[File:22.png|600px|thumb|center|]]
 +
[[File:23.png|600px|thumb|center|]]
 +
[[File:24.png|600px|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
 +
 
 +
[[File:26.png|500px|thumb|center|]]
 +
[[File:27.png|500px|thumb|center|]]
 +
 
 +
Documentation with all the parameters.
 +
 
 +
[[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
 +
 
 +
[[File:29.png|300px|thumb|center|]]
 +
 
 +
<syntaxhighlight lang="java">
 +
<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>
 +
</syntaxhighlight>
 +
 
 +
[[File:30.png|600px|thumb|center|]]
 +
[[File:31.png|500px|thumb|center|]]
 +
[[File:32.png|600px|thumb|center|]]
 +
[[File:33.png|950px|thumb|center|]]
 +
 
 +
<syntaxhighlight lang="java">
 +
<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>   
 +
</syntaxhighlight>
 +
 
 +
[[File:34.png|600px|thumb|center|]]
  
−
[[File:11.png|950px|thumb|center|]]
+
In layers view Overlapping view
 +
 +
position attributes
 +
[[File:35.png|500px|thumb|center|]]
 +
[[File:36.png|750px|thumb|center|]]
 +
[[File:37.png|500px|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"