Android xml layout messes up when ran on a device - java

In android studio when I see my app in the design view in XML it looks fine to me (just how I want it). But when I run my app on my device which is a Moto G the layout seems to just flop to one side. Why is this?
My Moto G device below (all the views and features flops to the side)
The design view in android studio. Everything looks good.
My XML code below
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/backgroundpage"
tools:context="xetron.appathon.orbis.landmarks">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/bar"
android:id="#+id/relativeLayout">
<TextView
android:text="Landmarks"
android:textStyle="bold"
android:textSize="30sp"
android:textColor="#005491"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="62dp"
android:layout_marginTop="11dp"
android:id="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/landmarkName"
android:textStyle="bold"
android:textSize="30sp"
android:textColor="#005491"
android:text="UK"
android:layout_toEndOf="#+id/textView"
android:layout_marginLeft="34dp"
android:layout_alignTop="#+id/textView"
android:layout_toRightOf="#+id/textView" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lmkname1"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="#8FCE7B"
android:text="Forbidden
Kingdom"
android:layout_marginLeft="35dp"
android:layout_marginTop="80dp"
/>
<ImageView
android:layout_width="180dp"
android:layout_height="160dp"
android:src="#drawable/lmk1china"
android:layout_below="#+id/relativeLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="57dp"
android:id="#+id/lmkimg1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lmkname2"
android:textStyle="bold"
android:textSize="25sp"
android:textColor="#8FCE7B"
android:text="Shanghai
Tower"
android:layout_marginLeft="210dp"
android:layout_marginTop="80dp"
/>
<ImageView
android:layout_width="180dp"
android:layout_height="160dp"
android:src="#drawable/lmk2china"
android:layout_alignTop="#+id/lmkimg1"
android:layout_alignRight="#+id/relativeLayout"
android:layout_alignEnd="#+id/relativeLayout"
android:id="#+id/lmkimg2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lmkname3"
android:textStyle="bold"
android:textSize="25sp"
android:textColor="#8FCE7B"
android:text="Great Wall
Of China"
android:layout_marginLeft="35dp"
android:layout_marginTop="435dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lmkname4"
android:textStyle="bold"
android:textSize="25sp"
android:textColor="#8FCE7B"
android:text="Temple Of
Heaven"
android:layout_marginLeft="210dp"
android:layout_marginTop="435dp"
/>
<ImageView
android:layout_width="180dp"
android:layout_height="160dp"
android:src="#drawable/lmk3china"
android:layout_below="#+id/lmkimg1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/lmkimg3" />
<ImageView
android:layout_width="180dp"
android:layout_height="160dp"
android:src="#drawable/lmk4china"
android:layout_below="#+id/lmkimg2"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="24dp"
android:id="#+id/lmkimg4"/>
</RelativeLayout>


You should try to create a design with less fixed sizes (e.g. image-size 180dp), because this will never scale well on all screen-sizes. I find it never easy to build a well-scaling layout and you have to test it right away while building.
That said, you can create different layouts, for different screen sizes by appending the size to the xml-filename. This is, however, mainly used to define different layouts for the major screen-sizes: phone, tablet, landscape, portrait. It is not used to define a separate layout for difference in inches.


You must avoid to use "hard" values in dimensions. Use "dip" instead. Also, use weights for elements positioning.
Example:
<LinearLayout
android:id="#+id/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="0dip"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="1" />
</LinearLayout>

Related

LinearLayout not responsive in small devices

I have a layout file in my Android application:
<?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:background="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="#style/Volume_Seekbar"
android:paddingStart="30dp"
android:paddingEnd="30dp"/>
</LinearLayout>
It's working perfectly in most of the devices but in a small screen device I can't see the SeekBar because it's out from the screen. Any idea how I can fix it?

You are using very large fixed sizes on your views, and because different phones got different screen sizes what seems to work on some device will actually not work on another
For example - in a smaller device with height of 300dp with views summing up to total of 400dp you will not have enough room for some views because of the small screen size and that's why you are not seeing your view.
You can use ConstraintLayout to make your screen responsive, or if you want to keep your current layout structure you can use the following libraries for scaling size of dp:
ssp and sdp to get a scalable size unit for your views and texts.
Another option is to wrap your layout with ScrollView, giving your screen the option to be scrollable and by that you will be able to "see" all of your views on your screen - note that this may not be intuitive to your user.

It is because the fixed sizes you are using to build your layout is getting summed up eventually being too big for small screen size. You can try the following to fix this:
Create a layout specially for small screen size by using smallest width qualifier
Make your layout scrollable
Use constraint layout
Using the ssp and sdp size units
NOTE that you will have to specify the smallest width qualifier to your current layout in such a way that the smallest width qualifer excludes the small screen devices and include the devices in which your layout fits properly.

I would suggest you to use constraint layout, but if you still want to go ahead with your current view then it will be good practice if you add scrollview to your parent layout, so that your layout won't get cropped on smaller devices:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/player_background"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".Fragments.PlayerFragment">
<ProgressBar
android:id="#+id/progress_bar_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:theme="#style/ProgressBarStyle"
android:visibility="invisible" />
<TextView
android:id="#+id/title_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Title"
android:textColor="#color/white"
android:textSize="24dp" />
<ImageView
android:id="#+id/view_imageview"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_marginTop="10dp"
android:background="#color/white" />
<TextView
android:id="#+id/status_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="20dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/play_pause_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/play_btn" />
<ImageButton
android:id="#+id/sleep_timer_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_toRightOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/sleep_btn" />
<ImageButton
android:id="#+id/share_btn"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:layout_toLeftOf="#+id/play_pause_btn"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/share_btn" />
<TextView
android:id="#+id/sleep_timer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sleep_timer_btn"
android:layout_alignLeft="#+id/sleep_timer_btn"
android:layout_alignRight="#+id/sleep_timer_btn"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="Status"
android:textColor="#color/white"
android:textSize="15dp" />
</RelativeLayout>
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingStart="30dp"
android:paddingEnd="30dp"
android:theme="#style/Volume_Seekbar" />
</LinearLayout>
</ScrollView>

ConstraintLayout: Why does the height of a view affect its children?

I am building an app in Android Studio and have a problem and I do not know why it happens and how to solve it. This is my code:
<?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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="144dp"
android:gravity="center"
android:shadowColor="#000000"
android:text="#string/title"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="260dp"
android:layout_marginEnd="160dp"
android:layout_marginRight="160dp"
android:background="#eadca6"
android:text="#string/all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button2"
android:layout_width="342dp"
android:layout_height="0dp"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="160dp"
android:layout_marginRight="160dp"
android:layout_marginBottom="50dp"
android:background="#eadca6"
android:text="#string/favorite_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>
However, if you run the code like this, the title will be cut off in half. But the 2 buttons will have a normal size. If I use wrap_content on the textview, the TextView will be displayed normally but the buttons height will also only be as big as the text inside (like inherit the wrap content), even if I don't write wrap_content in the buttons field. The LayoutEditor tells me everything is fine, but when I run the app, those design "errors" happen.

I added some modification in your code and added a screenshot for this code
<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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="144dp"
android:shadowColor="#000000"
android:text="title"
android:textAlignment="center"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button"
android:layout_width="342dp"
android:layout_height="wrap_content"
android:layout_marginTop="260dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:background="#eadca6"
android:text="all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_marginTop="23dp"
android:layout_marginBottom="50dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:background="#eadca6"
android:text="favqussdi"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
as you can see i change the following:
android:layout_height change value into wrap_content;
android:layout_width change value into match_parent;
added android:paddingTop="10dp" and android:paddingBottom="10dp" in buttons;
modify layout_marginLeft and layout_marginRight;
remove some redundant codes and also avoid adding static number as possible. Hope i help you in small way ^^

You want to know what is wrong with your code so I will start with some explanation before writing code:
TL;DR:
Don't use fixed size on your views, you can use app:layout_constraintHeight_percent="0.xx" with
app:layout_constraintWidth_percent="0.yy" and Guidelines.
Full answer
Different phones got different screen size, in your layout, you are using fixed size on your views (fixed size is android:layout_marginTop="144dp" for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone), and this is why you are getting design "errors".
You cant guarantee full layout responsability when using wrap_content as well, for example, if you will take a very large image and put it on your views it wont look the same on different devices.
If you already using constraintLayout here are some tools that can help you achieve a responsive layout that will fit in size to all screen sizes.
For example, look at this layout:
<?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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:shadowColor="#000000"
android:text="title"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintWidth_percent="0.9"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#eadca6"
android:text="all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintHorizontal_bias="0.500"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.9" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#eadca6"
android:text="favorite_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintWidth_percent="0.9" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
</androidx.constraintlayout.widget.ConstraintLayout>
This layout will look like this:
What I did in this layout:
I got rid of every single fixed size on my views and gave them fixed size like, something like this on the view:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintWidth_percent="0.9"
This view will be equal to 15% of the screen height and 90% of its width in size, it will be responsive for different layouts.
I managed the position of the views by using Guidelines, for example:
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
This guideline will be placed at the top 20% of the screen.
Something extra - you can use ssp /
sdp if you want to scale the size of your views (In your case I would use ssp library to scale your text size on your views).

Try this code in your xml. This way buttons and text will look normal.
<?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"
android:background="#f4f4f4"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#000000"
android:text="#string/title"
android:textColor="#eadca6"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="342dp"
android:layout_height="120dp"
android:background="#eadca6"
android:text="#string/all_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group" />
<Button
android:id="#+id/button2"
android:layout_width="342dp"
android:layout_height="120dp"
android:layout_marginTop="20dp"
android:background="#eadca6"
android:text="#string/favorite_quotes"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#id/group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<androidx.constraintlayout.widget.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="button,button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Aligning Text and Icons in a TextView Android

i am working on a ui design assignment in android studio. i have been able to get this
here is my code
<?xml version="1.0" encoding="utf-8"?>
<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" tools:context=".MainActivity">
<ImageView
android:id="#+id/topImage"
android:src="#drawable/shebaartist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop" />
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />
<TextView android:text="150 Alimi Rd, Alore, Ilorin, Kwara State"
android:drawableLeft="#drawable/marker"
android:layout_below="#+id/descText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/addrText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="shebaeventss#gmail.com"
android:drawableLeft="#drawable/message"
android:layout_below="#+id/addrText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:background="#F0E68C"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:id="#+id/emailText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="07055393673"
android:drawableLeft="#drawable/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/mobilenoText"
android:layout_below="#+id/emailText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
I want to align the icons and text in the text views on the same line and with the same size. my question is that how do i do this? please point out my errors and help me with fixing this.

If this is what you want, then you just need change gravity from
android:gravity="center" to android:gravity="center_vertical"

Please add gravity property to your TextView with center alignment and
icon size change with 24dp.
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:gravity="center"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />

It seems you want to use a compound drawable, see this answer:
How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

Android : code not functioning as intended

Screenshot of Code
I'm trying to display information about a business.
However the phone number is being displyed in wrong place ( ie top right)
According to me, It should come right of call image.
What is wrong with code phonenumber_text_view
<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"
tools:context="com.example.rafi.ansarenglishschool.MainActivity">
<ImageView
android:id="#+id/ansar_image_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/ansar"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/ansar_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ansar_image_view"
android:text="Ansar English School"
android:textSize="30sp"
android:background="#2962ff"
android:padding="20dp"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/call_image_view"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/call1"
android:layout_below="#id/ansar_text_view"
/>
<TextView
android:id="#+id/phonenumber_text_view"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_toRightOf="#id/call_image_view"
android:layout_alignParentRight="true"
android:text="123456789"
android:textSize="30sp"
android:padding="20dp"
android:textColor="#android:color/black" />*
<ImageView
android:id="#+id/location_image_view"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/location1"
android:layout_below="#id/call_image_view"
/>
<TextView
android:id="#+id/disc_text_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/location_image_view"
android:text="Ansar English is a private school run by Ansari Charitable trust located in Perumpilavu."
android:textSize="15sp"
android:padding="20dp"
android:textColor="#android:color/black" />

Just use the android:layout_below attribute to align it properly like following:
<TextView
android:id="#+id/phonenumber_text_view"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_toRightOf="#id/call_image_view"
android:layout_below="#id/ansar_text_view"
android:text="123456789"
android:textSize="30sp"
android:padding="20dp"
android:textColor="#android:color/black" />
PS: There is a * right after above TextView in your xml file

Different layout in Android Studio between preview and emulator

Why do I have two different layout results in the preview and in the emulator of the same phone? I create some AVDs to emulate the Samsung phones, but their previews and AVDs don't correspond..
Here's my xml file:
<?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"
tools:context="ag.myapplication.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/sfondo"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/relativeLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/tronco1"
android:layout_marginTop="-250dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/imageButton6"
android:src="#drawable/play_h"
android:scaleType="fitCenter"
android:background="#00ffffff"
android:layout_marginBottom="12dp"
android:layout_above="#+id/imageButton7"
android:layout_alignLeft="#+id/imageButton7"
android:layout_alignStart="#+id/imageButton7" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/imageButton7"
android:src="#drawable/score_h"
android:scaleType="fitCenter"
android:background="#00ffffff"
android:layout_above="#+id/imageButton8"
android:layout_alignLeft="#+id/imageButton8"
android:layout_alignStart="#+id/imageButton8"
android:layout_marginBottom="10dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/imageButton8"
android:src="#drawable/options_h"
android:scaleType="fitCenter"
android:background="#00ffffff"
android:layout_above="#+id/imageButton11"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp" />
<ImageButton
android:layout_width="170dp"
android:layout_height="50dp"
android:id="#+id/imageButton11"
android:src="#drawable/removeads"
android:scaleType="fitCenter"
android:background="#00ffffff"
android:layout_marginBottom="20dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="400dp"
android:layout_height="200dp"
android:id="#+id/imageView2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/titolo"
android:layout_marginTop="-10dp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Only the ImageButtons are positioned differently, wile the imageViews are where they are supposed to be
Can you help me?

The preview is less reliable than the AVD . You have to base yourself on your emulator display to verify that your view is displayed correctly.
It is preferable to obtain a perfect simulation of the poster of your application will emulate that on a real device.

Categories

Resources