Reputation: 25008
I've the below layout, but the buttons I made in a line are not represented properly from a screen to another:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<Spinner/>
<EditText/>
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:text="Update notes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:id="@+id/button" android:layout_marginLeft="-8dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
android:id="@+id/dialBtn"/>
<ImageButton
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_mylocation"
android:id="@+id/locationBtn"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
android:id="@+id/whasappBtn"/>
<Button
android:text="Set Alarm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:id="@+id/alarmBtn"/>
</LinearLayout>
<TextView />
<TextView />
<TextView />
<Button />
<ImageView />
</LinearLayout>
The button to the right set alarm
is not coming correctly depending on screen size/resolution:
Correct layout:
Wrong layout:
Upvotes: 1
Views: 83
Reputation: 25008
Based on the answers and comments I got, I used mix of: 1. Reduce elements in the same row 2. Use relative layout
So, my code now is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<Spinner
android:prompt="@string/task_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/status"
android:spinnerMode="dropdown"/>
<EditText
android:layout_width="match_parent"
android:layout_height="171dp"
android:inputType="textMultiLine"
android:gravity="start|top"
android:ems="10"
android:id="@+id/statusNote"/>
<RelativeLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:text="Update notes"
android:layout_width="350px"
android:layout_height="wrap_content"
android:layout_alignParentStart="true" android:layout_marginEnd="-9dp"
android:id="@+id/button"/>
<Button
android:text="Set Alarm"
android:layout_width="350px"
android:layout_height="wrap_content"
android:id="@+id/alarmBtn" android:layout_alignParentEnd="true" android:layout_marginEnd="-9dp"/>
</RelativeLayout>
<RelativeLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
android:layout_alignParentStart="true" android:layout_marginEnd="-9dp"
android:id="@+id/dialBtn"/>
<ImageButton
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_mylocation"
android:id="@+id/locationBtn"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
android:id="@+id/whasappBtn" android:layout_alignParentEnd="true" android:layout_marginEnd="-9dp"/>
</RelativeLayout>
<TextView
android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
android:text="Occupation"
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="244dp"/>
</LinearLayout>
Upvotes: 1
Reputation: 1213
Use weight for views
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:text="Update notes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:id="@+id/button" android:layout_marginLeft="-8dp"/>
<ImageButton
android:layout_weight="1.3"
android:layout_width="match_parent"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/sym_action_call"
android:id="@+id/dialBtn"/>
<ImageButton
android:layout_weight="1.3"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:srcCompat="@android:drawable/ic_menu_mylocation"
android:id="@+id/locationBtn"/>
<ImageButton
android:layout_weight="1.3"
android:layout_width="match_parent"
android:layout_height="wrap_content" card_view:srcCompat="@android:drawable/ic_menu_send"
android:id="@+id/whasappBtn"/>
<Button
android:text="Set Alarm"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:id="@+id/alarmBtn"/>
</LinearLayout>
Upvotes: 2
Reputation: 7661
If you want to support different screen sizes you can just use ConstraintLayout, the main problem with your layout is that you cant guaranty full responsivity while using so many wrap_content
.
Here is an example of a responsive layout that looks like you want it to look:
<?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">
<Spinner
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:text="1"
app:layout_constraintEnd_toStartOf="@+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHeight_percent=".05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline2" />
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="2"
app:layout_constraintBottom_toBottomOf="@+id/button5"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toTopOf="@+id/button5" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="3"
app:layout_constraintBottom_toBottomOf="@+id/button5"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="@+id/button5" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="4"
app:layout_constraintBottom_toBottomOf="@+id/button5"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button2"
app:layout_constraintTop_toTopOf="@+id/button5" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="5"
app:layout_constraintBottom_toBottomOf="@+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button3"
app:layout_constraintTop_toTopOf="@+id/button5" />
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Name"
app:layout_constraintEnd_toStartOf="@+id/button"
app:layout_constraintHeight_percent=".05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button5" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintHeight_percent=".05"
app:layout_constraintStart_toStartOf="@+id/textView"
app:layout_constraintTop_toBottomOf="@+id/textView3" />
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:text="First teak"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintHeight_percent=".05"
app:layout_constraintStart_toStartOf="@+id/textView"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="@color/colorAccent"
android:text="Save galery"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintHeight_percent=".07"
app:layout_constraintStart_toStartOf="@+id/textView"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".8" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".4" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this: (I am adding an image from the preview for better understanding constraintlayout)
Notice that for the view sizes and positioning I have used app:layout_constraintHeight_percent
, app:layout_constraintWidth_percent
and guidelines
Upvotes: 1
Reputation: 461
Buttons are inside a LinearLayout, so you could probably use the android:layout_weight=""
property to make them fill the screen proportionally.
Upvotes: 1