LinearLayout can't align properly

LinearLayout can't align properly - android

Hi I want a layout like bellow
Main amount 120 usd
Extra charge 2 usd
----------------------------
Sub Total 122 usd
Discount 5 usd
----------------------------
Total amount 117 usd
I am totally not familiar with constraint layout I tried to use LinearLayout gravity/layout/alignment gravity right for right part but its not working ,all aligned from left.I will be glad if someone give a example code for this layout plz.
Update: my current code
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>

For this kind of view use LinearLayout with weightSum property to the parent LinearLayout and use layout_weight for the Children LinearLayout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>

LinearLayout is going to be difficult without a lot of hard coding of layout_width on the children. Have you tried TableLayout?
https://developer.android.com/reference/android/widget/TableLayout
TableLayout can be a pain sometimes to get perfect, but it will give you the layout you are looking for.

You can try something like this:
I used LinearLayout as the parent and add RelativeLayout to it to create align the TextViews the way you want to.
You can dupe the Relative layout the create the rest.
not sure if it's the best way... but it works
<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:orientation="vertical"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main" />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/main"
android:text="amount" />
<TextView
android:id="#+id/extra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Extra"
android:layout_below="#+id/amount"
/>
<TextView
android:id="#+id/charge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/extra"
android:layout_alignBottom="#+id/extra"
android:text="charge" />
<TextView
android:id="#+id/usd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_toLeftOf="#+id/usd"
android:text="120"
android:layout_marginRight="10dp"
/>
<TextView
android:id="#+id/usd2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_toLeftOf="#+id/usd2"
android:text="120"
android:layout_marginRight="10dp"
/>
</RelativeLayout>

I believe that for this layout you better use ConstraintLayout.
It will take you only a few minutes to build this layout, you can add Guidelines to make your life easier.
In addition, your layout will be responsive to all screen sizes so consider using ConstraintLyaout
Here is an example of you wanted layout usingConstraintLyaout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/button" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button7" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button2" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button3" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button4"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button4" />
</android.support.constraint.ConstraintLayout>
It will look like this:

Related

How to make the child of a view fill the space (match_parent) but keep growing if necessary?

I have a TextView inside a LinearLayout and I want the background of my TextView to always display blue, filling the space horizontally, esto es lo que necesito:
But I don't know how to get it, the contained text can change, if I set android:layout_width="match_parent" it won't show all the text when there are long texts. And if I use android:layout_width="wrap_content" it will look like this:
This is what I have:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#drawable/rp"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout...>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/week"
android:gravity="center"
android:text="Text"
android:textColor="#color/white" />
<TextView...>
</LinearLayout>

I fixed it now, I changed my LinearLayout to a ConstraintLayout and put a view of the same color as my textview, just behind:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#drawable/rp"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout...>
<View
android:id="#+id/view6"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/week"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/week"
android:gravity="center"
android:text="Text"
android:textColor="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"/>
<TextView...>
</androidx.constraintlayout.widget.ConstraintLayout>

If you can set a fixed width for your outer LinearLayout, then your requirement can be achieved by wrapping the TextView in another layout.
Please find sample code below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:padding="5dp">
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text. Large text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text. Very Large text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
</LinearLayout>
The code will generate the following output

Adding linear layout messes up the layout in preview (Android Studio)

After positioning everything in the layout. When I add a LinearLayout all the positions of the components get messed up. And I can't even position them back. If I move them they move back to the messed up position.
How do I get them back into the positions I had given earlier? Thank You
Here are before and after:
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:text="#string/title" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="88dp"
android:text="#string/date" />
<TextView
android:id="#+id/DescriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="104dp"
android:gravity="center_horizontal"
android:text="#string/description"
android:textAlignment="center" />
<ImageView
android:id="#+id/NasaImageView"
android:layout_width="345dp"
android:layout_height="345dp"
android:contentDescription="#string/title"
android:src="#drawable/test_image" />
</LinearLayout>

I believe, you could do
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/titleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:text="#string/title" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="88dp"
android:text="#string/date" />
<TextView
android:id="#+id/DescriptionTextView"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="104dp"
android:gravity="center_horizontal"
android:text="#string/description"
android:textAlignment="center" />
<ImageView
android:id="#+id/NasaImageView"
android:layout_width="345dp"
android:layout_gravity="center_horizontal"
android:layout_height="345dp"
android:contentDescription="#string/title"
android:src="#drawable/test_image" />
</LinearLayout>

set android:gravity to center in linerLayout and add margin to the child.

Textview under framelayout overrides with another icons

I want my layout to look like this:
I used framelayout for this. The icons fit well but how can I fit the text as well? I tried textview but it overrides. Any help will be appreciated.
Here is my code so far:
<FrameLayout
android:id="#+id/fl_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#565858"
android:padding="20dp">
<Button
android:id="#+id/button1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:background="#drawable/ic_wallpaper_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SET"
android:textColor="#color/white"
></TextView>
<Button
android:id="#+id/button2"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="end|center_vertical"
android:background="#drawable/ic_share_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="SHARE"/>
<ImageButton
android:id="#+id/downloadimg"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="start|center_vertical"
android:background="#drawable/ic_file_download_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="DOWNLOAD"/>
</FrameLayout>

There are several ways to design this layout. On of them is using ConstraintLayout. You can try this solution.
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/fl_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#565858"
android:paddingTop="20dp"
android:paddingBottom="20dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="#+id/button1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
app:layout_constraintStart_toStartOf="#id/tvSet"
app:layout_constraintEnd_toEndOf="#id/tvSet"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ic_wallpaper_black_24dp" />
<TextView
android:id="#+id/tvSet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SET"
android:textColor="#color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/button1"/>
<Button
android:id="#+id/button2"
android:layout_width="35dp"
android:layout_height="35dp"
app:layout_constraintEnd_toEndOf="#id/tvShare"
app:layout_constraintStart_toStartOf="#id/tvShare"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ic_share_black_24dp"/>
<TextView
android:id="#+id/tvShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="SHARE"
android:layout_marginEnd="20dp"
app:layout_constraintTop_toBottomOf="#id/button2"
app:layout_constraintEnd_toEndOf="parent"/>
<ImageButton
android:id="#+id/downloadimg"
android:layout_width="35dp"
android:layout_height="35dp"
app:layout_constraintStart_toStartOf="#id/tvDownload"
app:layout_constraintEnd_toEndOf="#id/tvDownload"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ic_file_download_black_24dp" />
<TextView
android:id="#+id/tvDownload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="DOWNLOAD"
android:layout_marginStart="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/downloadimg"/>
</androidx.constraintlayout.widget.ConstraintLayout>

You can simply wrap a vertical orientated LinearLayout around each component (button and textview).
A much easier way is to start your project with the auto generated layout that Android Studio provides.

There are several ways to design this layout. On of them is using LinearLayout. Checkout this solution.
<LinearLayout
android:id="#+id/fl_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#565858"
android:padding="20dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/button1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:background="#drawable/ic_wallpaper_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SET"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/button2"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/ic_share_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SHARE"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/downloadimg"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/ic_file_download_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DOWNLOAD"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>

How to fix wrong display of components inside 'TableLayout' on different screens?

I am making a layout for MainScreen of an app using TableLayout and I want to set 6 square Buttons inside TableLayout (3 rows, 2 Buttons inside each of them).
Buttons are supposed to be placed with the same spacing between and have the same size.
The problem is that I can't make it look like I want, because layout looks different on different screen resolutions.
I know it may be normal behaviour, but I have no idea how to position layout correctly.
Is there any workarround instead of making different XML files for different resolutions?
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dark_site_gray"
android:orientation="vertical"
tools:context=".MainScreenActivity">
<TextView
android:id="#+id/helloText"
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:fontFamily="#font/alfa_slab_one"
android:gravity="center"
android:text="Witaj "
android:textColor="#color/mdtp_white"
android:textSize="23sp" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:paddingEnd="20dp"
android:paddingStart="20dp">
<TableRow>
<RelativeLayout
android:id="#+id/badge_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button1"
android:layout_width="150dp"
android:layout_height="150dip"
android:gravity="center"
android:text="Otrzymane" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationTopLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout1"
android:background="#drawable/item_count"
android:text="37"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/badge_layout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button2"
android:layout_width="150dp"
android:layout_height="150dip"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="Zaakceptowane" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationTopRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout2"
android:background="#drawable/item_count"
android:text="16"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
<TableRow>
<RelativeLayout
android:id="#+id/badge_layout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button3"
android:layout_width="150dp"
android:layout_height="150dip"
android:layout_alignParentBottom="false"
android:text="W trakcie" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationCenterLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout3"
android:background="#drawable/item_count"
android:text="0"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/badge_layout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button4"
android:layout_width="150dp"
android:layout_height="150dip"
android:text="Zakończone"
/>
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationCenterRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout4"
android:background="#drawable/item_count"
android:text="0"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
<TableRow>
<RelativeLayout
android:id="#+id/badge_layoutBottomLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button5"
android:layout_width="150dp"
android:layout_height="150dip"
android:text="Zdjęcia" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationBottomLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout5"
android:background="#drawable/item_count"
android:text="0"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/badge_layout6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout6"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button6"
android:layout_width="150dp"
android:layout_height="150dip"
android:gravity="center"
android:text="Wyjdź" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationBottomRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout6"
android:background="#drawable/item_count"
android:text="20"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
</TableLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fullListHolder">
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/acceptedListHolder">
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
Results:
Galaxy J4+:
Galaxy J6 2018:
Galaxy S5:
Galaxy S7:

It would be best to use ConstraintLayout, its very easy and very responsive, in your example you are giving fixed size to your views - different phone got different screen size and this is why you will see different display on differant phones. here is an example for a layout that looks like you need:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="125dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button6" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="126dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/button7" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="118dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="133dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/button5" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="424dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="423dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/textView" />

How do I prevent one TextView from pushing the other out of the screen?

[SOLVED] Marked the working solution. #GIBIN THOMAS: this suggestion works as well (similar).
Below I've posted an issue which arise when the Scoring increases, making it to expand and therefor push the other TextView out of the screen. I've tried changing the Width and height in all kinds of ways for both the TextViews themselves and the Layout that's wrapping them, without any luck.
PROBLEM: Anyone got a good solution how to set my Layout and/or TextViews width and height to prevent the Scoring TextView from pushing the Lives TextView out of the screen?
.
This is my XML-file:
The layout & textviews below are all inside another layout (including 4 buttons, one imageview and another textView - excluded in the code)
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="#string/current_score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/current_score_0"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="205dp"
android:layout_marginStart="205dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lives_5"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>

Try this layout:
use android:weightSum and android:layout_weight properly
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="SCORE"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SCORE"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="Lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lives"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Output:

This will fix your issue
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="Current Score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Scrore"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="Lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lives 5"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Please remove the strings i have added also if you have further doubts feel free to note down below

Please make sure to apply proper weight and other changes as follows :
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:padding="10dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="current_score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:text="current_score_0"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="lives_5"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>

Just give the LinearLayout , layout_weight="5" .. Like
android:layout_weight="3" and make the android:layout_width = "0px"
Note="Set the layout weight according to your spacing" ...
The Linear Layout in which u have fitted these two textviews

Simply replace your current score linear layout with this relative layout and you are done.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_alignParentLeft="true"
android:text="current_score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="current_score_0"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</RelativeLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

LinearLayout can't align properly - android

LinearLayout is going to be difficult without a lot of hard coding of layout_width on the children. Have you tried TableLayout? https://developer.android.com/reference/android/widget/TableLayout TableLayout can be a pain sometimes to get perfect, but it will give you the layout you are looking for.

Related

How to make the child of a view fill the space (match_parent) but keep growing if necessary?

Adding linear layout messes up the layout in preview (Android Studio)

Textview under framelayout overrides with another icons

How to fix wrong display of components inside 'TableLayout' on different screens?

How do I prevent one TextView from pushing the other out of the screen?

Categories

Resources