Designing Android App UI for Tab and mobile

huangapple go评论77阅读模式
英文:

Designing Android App UI for Tab and mobile

问题

我正在开发一个新的应用程序,需要考虑在移动设备和平板电脑上的设计。我已经在Stack Overflow上阅读到,为了避免在较大或较小的屏幕上应用程序显示效果不佳,需要创建多个不同尺寸的桶。以下是我正在使用的代码:

<?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"
    android:padding="30dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_margin="35dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/lblLogo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:autoSizeTextType="uniform"
            android:gravity="center"
            android:padding="15dp"
            android:text="My App Name"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="32sp" />

        <!-- Email Label -->
        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/tilLoginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/etLoginEmail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Email"
                android:inputType="textEmailAddress" />

        </com.google.android.material.textfield.TextInputLayout>

        <!-- Password Label -->
        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/tilLoginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/etLoginPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textPassword" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:padding="12dp"
            android:text="@string/btnLogin" />
    </LinearLayout>

</RelativeLayout>

以上是上述代码在手机上(例如Nexus 6)的显示效果。

以上是上述代码在平板电脑上(例如Nexus 10)的显示效果。

请注意,在平板电脑上的显示效果看起来很糟糕。我知道如何在不同的设计桶中处理设计,但我想检查是否有其他解决方案,而不需要在不同的屏幕尺寸桶中复制相同的设计文件。

提前感谢您的帮助。

英文:

I am working on new app in which I have to take care of design over mobile devices and tablets.I already read on SO that for this thing I need to create several buckets for sizes to avoid bad look of app on larger or smaller screen at the same time. here is the code I am working on

[![&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;

<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:padding="30dp"
tools:context=".MainActivity">

&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:layout_margin=&quot;35dp&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_centerHorizontal=&quot;true&quot;
android:layout_centerVertical=&quot;true&quot;
android:gravity=&quot;center&quot;
android:orientation=&quot;vertical&quot;&gt;
&lt;TextView
android:id=&quot;@+id/lblLogo&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:autoSizeTextType=&quot;uniform&quot;
android:gravity=&quot;center&quot;
android:padding=&quot;15dp&quot;
android:text=&quot;My App Name&quot;
android:textAppearance=&quot;?android:attr/textAppearanceLarge&quot;
android:textColor=&quot;@color/colorPrimaryDark&quot;
android:textSize=&quot;32sp&quot; /&gt;
&lt;!-- Email Label --&gt;
&lt;com.google.android.material.textfield.TextInputLayout
android:id=&quot;@+id/tilLoginEmail&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginTop=&quot;30dp&quot;&gt;
&lt;com.google.android.material.textfield.TextInputEditText
android:id=&quot;@+id/etLoginEmail&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:hint=&quot;Email&quot;
android:inputType=&quot;textEmailAddress&quot; /&gt;
&lt;/com.google.android.material.textfield.TextInputLayout&gt;
&lt;!-- Password Label --&gt;
&lt;com.google.android.material.textfield.TextInputLayout
android:id=&quot;@+id/tilLoginPassword&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginTop=&quot;30dp&quot;&gt;
&lt;com.google.android.material.textfield.TextInputEditText
android:id=&quot;@+id/etLoginPassword&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:hint=&quot;Password&quot;
android:inputType=&quot;textPassword&quot; /&gt;
&lt;/com.google.android.material.textfield.TextInputLayout&gt;
&lt;com.google.android.material.button.MaterialButton
android:id=&quot;@+id/btnLogin&quot;
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginTop=&quot;20dp&quot;
android:padding=&quot;12dp&quot;
android:text=&quot;@string/btnLogin&quot; /&gt;
&lt;/LinearLayout&gt;

</RelativeLayout>]

This is how the above code looks like on mobile phone (i.e Nexus 6)

Designing Android App UI for Tab and mobile

**This is how the above code looks like on tablet (i.e Nexus 10) Designing Android App UI for Tab and mobile

> Notice that on tablet is looking so bad. I know how to handle design in different design buckets. but I want to check if there is any
> other solution without replicating the same design file in different
> screen sizes buckets

Thanks in advance......

答案1

得分: 1

避免复制布局,尝试:

  • 避免在布局中硬编码尺寸。
  • 使用 ConstraintLayout
  • 使用不同的限定符。

例如,在根视图中的边距:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/login_layout_margin"
    android:layout_marginEnd="@dimen/login_layout_margin"
    android:layout_gravity="center"
    android:orientation="vertical">
    
    <TextView
        android:id="@+id/lblLogo"
        ..>
    
</LinearLayout>

然后在不同的文件夹中创建不同的尺寸:

res/values/dimens.xml

<dimen name="login_layout_margin">35dp</dimen>

res/values-sw600dp/dimens.xml

<dimen name="login_layout_margin">350dp</dimen>

更多详细信息请参阅此处

英文:

Instead of duplicate the layout try to:

  • avoid to hardcode the dimension in the layout.
  • use a ConstraintLayout
  • use the different qualifiers

For example the margin in your root view:

&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginStart=&quot;@dimen/login_layout_margin&quot;
android:layout_marginEnd=&quot;@dimen/login_layout_margin&quot;
android:layout_gravity=&quot;center&quot;
android:orientation=&quot;vertical&quot;&gt;
&lt;TextView
android:id=&quot;@+id/lblLogo&quot;
..&gt;
&lt;/LinearLayout&gt;

Then create different dimension in different folder:

res/values/dimens.xml:

&lt;dimen name=&quot;login_layout_margin&quot;&gt;35dp&lt;/dimen&gt;

res/values-sw600dp/dimens.xml:

&lt;dimen name=&quot;login_layout_margin&quot;&gt;350dp&lt;/dimen&gt;

Designing Android App UI for Tab and mobile

More details here.

huangapple
  • 本文由 发表于 2020年8月5日 15:44:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/63260573.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定