LayoutsView and TextView

Published by Admin on

Table of Contents hide
1. Linear Layout Views
1.1. Example : How to change the Layout in Android using XML code from another Layout View.
1.2. Example : How to set the center and horizontal alignment (Top) of message text for All Views in a linear layout in Android using XML.
1.3. Example : How to set the vertical and horizontal center alignment (middle of the screen) of message text for All Views in a linear layout in Android using XML.
1.4. Example : How to set the vertical and horizontal center alignment (middle of the screen) of message text in large size and bold format for All Views in a linear layout in Android using XML.
1.5. Example : How to set the vertical and horizontal center alignment (middle of the screen) of message text from a string resource in large size and bold format for All Views in a linear layout in Android using XML.
1.6. Example : How to display messages in Red Color for All Views in a linear layout in Android using XML.
1.7. Ques. : How to display the message “Hello World” in All Capital Letters in Android using XML code in the LinearLayout view?
1.8. Example ; How to display two messages on two different lines in an Android app using XML code?
1.9. Example : How to show two different messages in different colors?
1.10. Example : How to show a single message in two different colors?
1.11. Example : How to display two messages on two different lines in different colors in an Android app using XML in a Linear Layout?
1.12. Example : How to Set Background Color/Image for All Different Views in Android using XML code in Linear Layout Views.
1.13. Example : How to Set Margin & Padding Alignment for All Different Views in Android using XML code in Linear Layout Views.
2. Relative Layout Views
2.1. Example : How to display the message Hello India using XML in a RelativeLayout View?
3. Constraint Layout Views
3.1. Example : How to display the message Hello India using XML in a ConstraintLayout View?
3.2. Ques. : How to display the messages “Hello World”, “Hello India”, and “Hello Bihar” on the next lines in Android using XML code in the ConstraintLayout view?

Linear Layout Views

Example : How to change the Layout in Android using XML code from another Layout View.
Step1 : Open your Android applications in the Design view (icon at right top corner of the code window).
Step2 : Clcik on the Component Tree tab (usually appear on the left-bottom of design view) -> click on the Component Tree tab -> Now right click on main option or current/root layout.
Step3 : Select 'Convert layout' and choose 'LinearLayout/any layout'.
Step4 : Set the orientation (vertical or horizontal) as needed, if any in Linear layout.
Example : How to set the center and horizontal alignment (Top) of message text for All Views in a linear layout in Android using 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/app_name"

    android:orientation="vertical"
    android:gravity="center_horizontal"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello India World! Bihar" />
</LinearLayout>


--------------  OR  --------------

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/app_name"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        
        android:id="@+id/TxtVwVal"
        android:text="Hello world"      <!-- Hard Coded String message -->
        android:text="@string/msg"      <!-- Soft Coded Real String message -->
        android:justificationMode="inter_word"

        android:textSize="35sp"     <!-- sp means scalable pixel for font size and dp means density pixel for form size, space etc. -->
        android:textStyle="bold"
        android:textColor="@color/red"/>

</LinearLayout>

NB: 
(i) XML comment line is represented by this symbol <!--     --> but appllied for complete block of statements not for partial lines of code.
(ii) Write the XML codes/program for android design development in 'activity_main.xml' file.
(iii) Remove the comment message completely in the middle of the code when execute the program.
(iv) Code should be written in activity_main.xml file
Example : How to set the vertical and horizontal center alignment (middle of the screen) of message text for All Views in a linear layout in Android using 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello India World! Bihar" />

</LinearLayout>
Example : How to set the vertical and horizontal center alignment (middle of the screen) of message text in large size and bold format for All Views in a linear layout in Android using 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:id="@+id/textView1"
        android:text="Hello India World! Bihar"
        android:textSize="30sp"
        android:textStyle="bold"/>
</LinearLayout>
Example : How to set the vertical and horizontal center alignment (middle of the screen) of message text from a string resource in large size and bold format for All Views in a linear layout in Android using 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"

        android:text="@string/msg"

        android:textSize="30sp"
        android:textStyle="bold" />
</LinearLayout>
Example : How to display messages in Red Color for All Views in a linear layout in Android using 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="@string/msg"
        android:textSize="30sp"
        android:textStyle="bold"

        android:textColor="#FF0000"
        />
</LinearLayout>

--------------------------------------------------

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="@string/msg"
        android:textSize="30sp"
        android:textStyle="bold"

        android:textColor="@color/red"
        />
</LinearLayout>
Ques. : How to display the message “Hello World” in All Capital Letters in Android using XML code in the LinearLayout view?
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/app_name"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello world"
        android:textSize="35sp"
        android:textStyle="bold"
        android:textAllCaps="true"
        android:gravity="center" />

</LinearLayout>

--------------------  OR  --------------------

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/app_name"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world"
        android:textSize="35sp"
        android:textStyle="bold"
        android:textAllCaps="true" />

</LinearLayout>
Example ; How to display two messages on two different lines in an Android app using XML code?
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="Hello India\nHello Bihar"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textColor="@color/red"
        />
</LinearLayout>

------------------  OR  -----------------

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="@string/msg1"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textColor="@color/red"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:text="@string/msg2"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textColor="@color/red"
        />
</LinearLayout>

NB : Similar XML attribute can appear or used only once(not two or more) in one control.
Example : How to show two different messages in different colors?
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="@string/msg1"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textColor="@color/red"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:text="@string/msg2"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textColor="@color/black"
        />
</LinearLayout>
Example : How to show a single message in two different colors?
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="horizontal"
    android:gravity="center"

    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="Hello"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textColor="@color/red"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:text=" World"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textColor="@color/black"
        />
</LinearLayout>
Example : How to display two messages on two different lines in different colors in an Android app using XML in a Linear Layout?
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:gravity="center"

    tools:context=".MainActivity">

    <!-- First Line: Hello World -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello "
            android:textSize="30sp"
            android:textStyle="bold"
            android:textColor="@color/red" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="World"
            android:textSize="30sp"
            android:textStyle="bold"
            android:textColor="@color/black" />
    </LinearLayout>


    <!-- Second Line: Hello India -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello "
            android:textSize="30sp"
            android:textStyle="bold"
            android:textColor="@color/red" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="India"
            android:textSize="30sp"
            android:textStyle="bold"
            android:textColor="@color/black" />
    </LinearLayout>
</LinearLayout>
Example : How to Set Background Color/Image for All Different Views in Android using XML code in Linear Layout Views.
<?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:contentDescription="@string/app_name"
    android:orientation="vertical"
    tools:context=".MainActivity"

    android:layout_margin="20dp"

    android:background="@color/green"  <!-- for Background Color -->
    android:background="@drawable/image1">  <!-- for Background Image -->
</LinearLayout>
Example : How to Set Margin & Padding Alignment for All Different Views in Android using XML code in Linear Layout Views.
<?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:contentDescription="@string/app_name"
    android:orientation="vertical"
    tools:context=".MainActivity"

    android:paddingBottom="20dp"
    android:layout_margin="20dp">

</LinearLayout>

NB: 
(i) XML comment line is represented by this symbol <!--     --> but appllied for complete block of statements not for partial lines of code.
(ii) Write the XML codes/program for android design development in 'activity_main.xml' file.
(iii) Remove the comment message completely when execute the program.

Relative Layout Views

Example : How to display the message Hello India using XML in a RelativeLayout View? 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello India"
        android:textColor="@color/red"
        android:textSize="30sp"
        android:textStyle="bold" />
</RelativeLayout>

Constraint Layout Views

Example : How to display the message Hello India using XML in a ConstraintLayout View? 
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello India"
        android:textColor="@color/red"
        android:textSize="30sp"
        android:textStyle="bold"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Ques. : How to display the messages “Hello World”, “Hello India”, and “Hello Bihar” on the next lines in Android using XML code in the ConstraintLayout view?
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!\nHello India!\nHello Bihar"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output:
Hello World
Hello India
Hello Bihar 

NB: 
android:text="Hello World!"
android:text="Hello India!"
android:text="Hello Bihar!"

We can not use like this in single TextView of the XML code to obtained above output because -

Only the last value (android:text="Hello Bihar!") will be used by Android Studio.
The previous android:text values ("Hello World!" and "Hello India!") will be ignored. 
To display all three messages in a single TextView in next line, we should combine them into one string, using \n for new lines OR we can use in three different TextView each.

Loading

Categories: Android

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Android

Splash Screen … (Examples)

Example : How to create a Splash Screen for an Android App/Activity using XML and Android Java. AndroidManifests.xml file ------------------------------ [Set .SplashScreenActivity.xml file as Top in Activity tag with --- contents] activity_splash_screen.xml ------------------------------ SplashScreenActivity.java ------------------------------ Read more…

Android

Basic and Misc. Codes (Examples)

Example : How to Create a New Project/Android Apps First Time in Android Studio(version Koala 2024.1.1)? Open a well set and properly configured Android Studio - Choose 'Projects' - Choose 'New Project' - Choose 'Phone Read more…

Android

Menu Design (Examples)

Example : How to create an Options Menu (Three Vertical Dot) in an Android App using XML and Android Java. NB: First of all, right click on res folder - New - Android resource directory Read more…