Develop Reference

How do I align text to any position I want to align it to?

This is basically how I want my layout to look like:
There has to be a space separating the imageView from the Text. Ok button in the center, but I think the main challenge is making sure that the bold text is very closely aligned (almost touching the tip) to the regular text and is above it. Also, the added challenge is that all of this must be done using ONLY linear layout. So far, I have been using a vertical orientation linear layout followed by a horizontal orientation linear layout. The horizontal orientation linear layout covers the imageView and the regular text. My main problem is that I can not get the bold text and the regular text to align in the way I need it to.
By the way, I got rid of all the id's and images, since these are all private, but adding them should be no problem.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="Bold Text"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="13dp"
android:layout_marginTop="12dp"
android:src="#drawable/" />
<TextView
android:id="#+id/"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Regular Text"
android:textColor="#color/black" />
</LinearLayout>
<Button
android:id="#+id/"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ok"
/>
</LinearLayout>

Unless this is for a school project or something I wouldn't actually use nested layouts like this.
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
app:srcCompat="#drawable/ic_launcher_background" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Bold Text"
android:textStyle="bold" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Edit:
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
android:layout_gravity="center_vertical"
app:srcCompat="#drawable/ic_launcher_background" />

Parent should be vertical linear layout, as you have now.
First child should be horizontal linear layout
First child of that should be ImageView
Second child should be BOLD TEXT with gravity=center_horizontal
Second child of your parent should be Regular Text Blah Blah Blah with gravity=center_horizontal
Third child of parent should be ok button with gravity=center_horizontal
If you want to add more space before things, give them android:marginStart="some_value"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="16dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/img"
android:layout_width="75dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:src="#drawable/dummy_camera" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="Bold Text"
android:gravity="bottom"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="20dp"
android:gravity="top"
android:text="Regular Text"
android:textColor="#color/black" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ok" />
</LinearLayout>

Add this to TextView parameters:
android:baselineAlignBottom="true"

Linear Layout is not properly showing the component when using android studio

This is code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
I want to practice a layout in android studio and I'm getting an error while implementing the code.
This is the text which goes outside the mobile screen:
Why does the blue box go outside the mobile screen?

You're not properly setting the layout. The childViews of your parentView(LinearLayout) was aligned horizontally without setting the layout weight. You should read the documentation on LinearLayout. However, to fix your layout, you can add another container to hold the first row of your layout to make the second row visible on the screen. Your current code contains all the childViews in a single row which makes the other views not visible. Try the code below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>

You are setting the layout_width of each view yourself. You should know that there is a maximum width of screen that is available. Moreover, you are setting the width of button as match_parent that is not proper way when the neighbouring views have some fixed width. If your are using LinearLayout try layout_weight attribute. Play around and try to experiment.
For example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingLeft="0dp"
android:paddingTop="10dp"
android:text="Email:"
android:textSize="30dp" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="2"
android:singleLine="true" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingTop="10dp"
android:text="Login" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>

Why only one attribute in layout_gravity in my xml working

I want my reset button to be at bottom and horizontally centered, but layout_gravity is not working, only one of them is working.
I know it can be done by choosing RelativeLayout as my parent layout but I want to do it with LinearLayout as my parent layout.
I just want reset button as bottom and horizontally centered rest everything is fine.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.android.courtcounter.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="TEAM A" />
<TextView
android:id="#+id/team_a_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="0" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button3"
android:text="+3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button2"
android:text="+2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button1"
android:text="Free Throw" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="TEAM B" />
<TextView
android:id="#+id/team_b_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="4dp"
android:text="0" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button3_b"
android:text="+3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button2_b"
android:text="+2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:onClick="button1_b"
android:text="Free Throw" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:onClick="resetButton"
android:padding="8dp"
android:text="RESET" />
</LinearLayout>

Use this instead if you don't want to go completely relative (inside the parent Linear Layout):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:onClick="resetButton"
android:padding="8dp"
android:text="RESET"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
or if you don't want to keep the reset button inside a relative layout, there doesn't seem to be a solution.
You can check this out as well: How to align views at the bottom of the screen?

Since the rest of your ViewGroups in that layout fill the parent's width, you could simply set the parent LinearLayout's gravity to center_horizontal and it should line up properly, without affecting the other children:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
tools:context="com.example.android.courtcounter.MainActivity">
Edit: I didn't notice you also wanted it at the bottom... This can be achieved with an invisible weighted View between your content and the bottom:
...
<View
android:layout_width="1dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="resetButton"
android:padding="8dp"
android:text="RESET" />
</LinearLayout>
Edit 2: Removed layout_gravity on your button since it no longer applies.

Android - LinearLayout like a table

I have a ListFragment that fills a LinearLayout with data.
In this layout I'm trying to make them looking like a table.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#color/text_primary" >
<ImageView
android:id="#+id/homeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp" />
<TextView
android:id="#+id/score"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20dp" />
<TextView
android:id="#+id/visitor"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp" />
<ImageView
android:id="#+id/visitorImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>
</LinearLayout>
But I would like to make something like this:
Where the images, the teams and the score will show perfectly aligned and centered.
I'm new in android, and I'm having problems to make this working.
My question is how can I make this working like the picture?

I have modified your xml to the below. Since you need list of them, use List view and give the below layout as each list item layout. Tutorial to make list view is here. All the elements within the layout are simple view (you can modify this to ImageView with your image), TextView and hence this will not be editable by the user (to give the picture kind of effect).
Will this be useful to you?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal" >
<View
android:id="#+id/homeImage"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"/>
<TextView
android:id="#+id/home"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp"
android:text="TEAM ONE"/>
<TextView
android:id="#+id/score"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20dp"
android:text="X - X"
/>
<TextView
android:id="#+id/visitor"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp"
android:text="TEAM TWO"/>
<View
android:id="#+id/visitorImage"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#android:color/holo_blue_bright"/>
</LinearLayout>

Can't align view to the right

I am trying to display one view in the left side and one to the right side of the parent layout as following:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left"
android:layout_gravity="left" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right"
android:layout_gravity="right" />
</LinearLayout>
But as a result I see both textViews aligned to the left only. I don't understand why. I manage to set the verticaly layout_gravity but not the horizontal one. In addition, I could add:
android:gravity="right"
to the parent layout and than see both views on the right side but couldnt find a way to display one in the left side and one in the right side.
Please help.

Another trick here;
Place an invisible View between the TextViews. And it will occupy the whole remaining area with android:layout_weight="1", so TextViews will remain on both ends. No gravity needed. Try the code below :)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />
</LinearLayout>

You can try this as well
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="left" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="right" />
</LinearLayout>

Try this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="left" />
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="right" />
</LinearLayout>
Or Try the following
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="left" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="right" />
</RelativeLayout>
Edit:
In method 1 using weight for splitting the total screen as two parts and set the gravity for first item is left and gravity for second item is right.
I am not using android:layout_gravity for TextView . Using android:gravity. Better practise you can use relativeLayout. Check the second option

Set android:layout_weight="1" to both your TextViews

Use Relativelayout instead
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="left" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="right" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:orientation="horizontal">
<TextView
android:layout_weight="50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="left"
android:gravity="left" />
<TextView
android:layout_weight="50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="right"
android:gravity="right" />
</LinearLayout>

try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="left" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />
</LinearLayout>
</LinearLayout>

The easiest solution with LinearLayout is modifying your right textview with gravity="right"
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="right"
android:gravity="right" />
But I would strongly reccomend using a RelativeLayout as #Sjd suggested.