Reputation: 2198
I am creating a custom digit pad for an Android app. I used several horizontal LinearLayout
for that.
Here is the code related to that part of the activity
:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp">
<ImageView
android:id="@+id/digit1"
android:layout_width="117dp"
android:layout_height="67dp"
app:srcCompat="@drawable/rsz_untitled_3" />
<ImageView
android:id="@+id/digit2"
android:layout_width="118dp"
android:layout_height="67dp"
app:srcCompat="@drawable/digit_2" />
<ImageView
android:id="@+id/digit3"
android:layout_width="100dp"
android:layout_height="67dp"
android:layout_weight="1"
app:srcCompat="@drawable/digit_3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp">
<ImageView
android:id="@+id/digit4"
android:layout_width="117dp"
android:layout_height="67dp"
app:srcCompat="@drawable/digit_4" />
<ImageView
android:id="@+id/digit5"
android:layout_width="118dp"
android:layout_height="67dp"
app:srcCompat="@drawable/digit_5" />
<ImageView
android:id="@+id/digit6"
android:layout_width="100dp"
android:layout_height="67dp"
android:layout_weight="1"
app:srcCompat="@drawable/digit_6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp">
<ImageView
android:id="@+id/digit7"
android:layout_width="117dp"
android:layout_height="67dp"
app:srcCompat="@drawable/digit_7" />
<ImageView
android:id="@+id/digit8"
android:layout_width="118dp"
android:layout_height="67dp"
app:srcCompat="@drawable/digit_8" />
<ImageView
android:id="@+id/digit9"
android:layout_width="100dp"
android:layout_height="67dp"
android:layout_weight="1"
app:srcCompat="@drawable/digit_9" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp">
<ImageView
android:id="@+id/digitvoid"
android:layout_width="117dp"
android:layout_height="67dp" />
<ImageView
android:id="@+id/digit0"
android:layout_width="118dp"
android:layout_height="67dp"
app:srcCompat="@drawable/digit_0" />
<ImageView
android:id="@+id/digitdelete"
android:layout_width="100dp"
android:layout_height="67dp"
android:layout_weight="1"
app:srcCompat="@drawable/digit_delete" />
</LinearLayout>
Here you can see how this looks like in Android studio, and how it looks like on an actual device. I don't understand why is this happening. I am using dp
(which per my understanding should be dynamic pixels), so they should scale well on every device.
Upvotes: 1
Views: 131
Reputation: 7661
You are using a fixed size on your views, because different phones got different screen size that will make your screen not responsive.
If you want to use LinearLayout
you will probably want to use android:layout_weight
and android:weightSum
attributes in order to give your views some size relatively to your screen.
You can do this and it will work, but all of the nested views will most likely affect your layouts performance.
If you want a layout that will be responsive to all screen size you can use ConstraintLayout with chains, here is an example:
<?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">
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="1"
app:layout_constraintBottom_toBottomOf="@+id/button10"
app:layout_constraintEnd_toStartOf="@+id/button10"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/button10" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button11"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toBottomOf="@+id/button4" />
<Button
android:id="@+id/button11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="x"
app:layout_constraintBottom_toBottomOf="@+id/button2"
app:layout_constraintEnd_toEndOf="@+id/button3"
app:layout_constraintStart_toEndOf="@+id/button4"
app:layout_constraintTop_toTopOf="@+id/button2" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="8"
app:layout_constraintBottom_toBottomOf="@+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button4"
app:layout_constraintTop_toTopOf="@+id/button4" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="8"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintTop_toBottomOf="@+id/button7" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="7"
app:layout_constraintBottom_toBottomOf="@+id/button4"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/button4" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="6"
app:layout_constraintBottom_toBottomOf="@+id/button7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button7"
app:layout_constraintTop_toTopOf="@+id/button7" />
<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="5"
app:layout_constraintBottom_toTopOf="@+id/button4"
app:layout_constraintEnd_toStartOf="@+id/button6"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button8"
app:layout_constraintTop_toBottomOf="@+id/button10" />
<Button
android:id="@+id/button8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="4"
app:layout_constraintBottom_toBottomOf="@+id/button7"
app:layout_constraintEnd_toStartOf="@+id/button7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/button7" />
<Button
android:id="@+id/button9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="3"
app:layout_constraintBottom_toBottomOf="@+id/button10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button10"
app:layout_constraintTop_toTopOf="@+id/button10" />
<Button
android:id="@+id/button10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="2"
app:layout_constraintBottom_toTopOf="@+id/button7"
app:layout_constraintEnd_toStartOf="@+id/button9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
</android.support.constraint.ConstraintLayout>
It will look like this:
Upvotes: 1
Reputation: 376
try this
<LinearLayout 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="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:padding="2dp">
<ImageView
android:id="@+id/digit1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/rsz_untitled_3" />
<ImageView
android:id="@+id/digit2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_2" />
<ImageView
android:id="@+id/digit3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:padding="2dp">
<ImageView
android:id="@+id/digit4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_4" />
<ImageView
android:id="@+id/digit5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_5" />
<ImageView
android:id="@+id/digit6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:padding="2dp">
<ImageView
android:id="@+id/digit7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_7" />
<ImageView
android:id="@+id/digit8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_8" />
<ImageView
android:id="@+id/digit9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_9" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:padding="2dp">
<ImageView
android:id="@+id/digitvoid"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1" />
<ImageView
android:id="@+id/digit0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_0" />
<ImageView
android:id="@+id/digitdelete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
app:srcCompat="@drawable/digit_delete" />
</LinearLayout>
</LinearLayout>
Upvotes: 0
Reputation: 130
Please check below code. It may solve your issue. If you face any issue then please let me know in comment section.
Use your own drawables and assests.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp">
<ImageView
android:id="@+id/digit1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
<ImageView
android:id="@+id/digit2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
<ImageView
android:id="@+id/digit3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp">
<ImageView
android:id="@+id/digit4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
<ImageView
android:id="@+id/digit5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
<ImageView
android:id="@+id/digit6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp">
<ImageView
android:id="@+id/digit7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
<ImageView
android:id="@+id/digit8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
<ImageView
android:id="@+id/digit9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp">
<ImageView
android:id="@+id/digitvoid"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="@+id/digit0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
<ImageView
android:id="@+id/digitdelete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/add_more_icon" />
</LinearLayout>
</LinearLayout>
Please approve answer if it will work for you. Thanks!
Upvotes: 1
Reputation: 24251
Here is the layout that you need to get this thing working. The dp is translated into approximate sizes. However, if you want to propotionate your elements with the screen size, you might consider using the weight
all the time.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/digit1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/rsz_untitled_3" />
<ImageView
android:id="@+id/digit2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_2" />
<ImageView
android:id="@+id/digit3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/digit4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_4" />
<ImageView
android:id="@+id/digit5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_5" />
<ImageView
android:id="@+id/digit6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/digit7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_7" />
<ImageView
android:id="@+id/digit8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_8" />
<ImageView
android:id="@+id/digit9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_9" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/digitvoid"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="@+id/digit0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_0" />
<ImageView
android:id="@+id/digitdelete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/digit_delete" />
</LinearLayout>
</LinearLayout>
Upvotes: 1
Reputation: 6063
please replace your 4 LinearLayout
with this :
<LinearLayout
android:orientation="horizontal"
android:weightSum="3"
android:layout_weight="0.2"
android:layout_width="match_parent"
android:layout_height="0dip">
<ImageView
android:layout_weight="1"
android:id="@+id/digit1"
android:layout_width="0dip"
android:layout_height="match_parent"
app:srcCompat="@drawable/rsz_untitled_3" />
<ImageView
android:id="@+id/digit2"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_2" />
<ImageView
android:id="@+id/digit3"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:weightSum="3"
android:layout_weight="0.2"
android:layout_width="match_parent"
android:layout_height="0dip">
<ImageView
android:id="@+id/digit4"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_4" />
<ImageView
android:id="@+id/digit5"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_5" />
<ImageView
android:id="@+id/digit6"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_6" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:weightSum="3"
android:layout_weight="0.2"
android:layout_width="match_parent"
android:layout_height="0dip">
<ImageView
android:id="@+id/digit7"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_7" />
<ImageView
android:id="@+id/digit8"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_8" />
<ImageView
android:id="@+id/digit9"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_9" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:weightSum="3"
android:layout_weight="0.2"
android:layout_width="match_parent"
android:layout_height="0dip">
<ImageView
android:id="@+id/digitvoid"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/digit0"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_0" />
<ImageView
android:id="@+id/digitdelete"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
app:srcCompat="@drawable/digit_delete" />
</LinearLayout>
and add the parent layout this two attribute :
android:orientation="vertical"
android:weightSum="1.0"
NB :
If you want to reduce the height of the square just reduce value of :android:layout_weight="0.2"
to android:layout_weight="0.15"
Upvotes: 0
Reputation: 9988
Obviously you do this for the third row:
android:layout_weight="1"
And it is causing problems - if your screen is not wide enough to follow your width instruction you instruct that all buttons are not the same so that only the last buttons should be resized.
Upvotes: 1