CODEWITHSUNDEEP
androidxamarinxamarin.android
Vanjara Sweta
Vanjara Sweta

Reputation: 123

How to Create UI for different size of Android

I have test on two phones. Moto G5s Mi note 7 pro

My UI is look perfect on Moto g5s but on Mi note 7 pro it's look small font size.

I have attached screenshots of both phones.

Moto G5s: http://prntscr.com/nw9rhi

Note 7 pro: http://prntscr.com/nw9r4y

Actual UI: http://prntscr.com/nw9rvv

What I expected It looks same on all device.

This is my layout. I have a viewpager.So created Item layout for Text.When Swipe it.It change text like this.

I want like this. I have issue only on design on different phones. http://prntscr.com/nw9u1j

//TourLayout.axml
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

 <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tourbg"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:id="@+id/imageView" />
    <LinearLayout 
          android:layout_width="match_parent"
          android:weightSum="1"
          android:orientation="vertical"
          android:layout_height="match_parent">
           <LinearLayout 
                android:layout_width="match_parent"
                android:layout_weight="0.24"
                android:layout_height="0dp">
            <RelativeLayout
                android:id="@+id/welcomeLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom">
                <JammberSplits.Droid.Views.PieView
                    android:layout_height="@dimen/margin_90"
                    android:id="@+id/pieView"
                    android:layout_marginLeft="@dimen/margin_30"
                    android:layout_marginTop="@dimen/margin_10"
                    android:layout_width="@dimen/margin_90">
                </JammberSplits.Droid.Views.PieView>
            </RelativeLayout>
          </LinearLayout>
         <LinearLayout 
            android:layout_width="match_parent"
            android:layout_weight="0.56"
            android:layout_height="0dp">
             <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/LoginCenterLayout">
                <android.support.v4.view.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"/>

             </RelativeLayout>
        </LinearLayout>
         <LinearLayout 
            android:layout_width="match_parent"
            android:layout_weight="0.20"
            android:layout_height="0dp">
           <RelativeLayout
                android:id="@+id/SignUpLayout"
                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_centerHorizontal="true">

            <LinearLayout        
                                android:id="@+id/viewPagerCountDots"                         
                                android:layout_width="match_parent"                      
                                android:layout_height="match_parent"                        
                                android:layout_marginBottom="@dimen/margin_05"                      
                                android:layout_above="@+id/btnNext"                      
                                android:layout_centerHorizontal="true"                   
                                android:gravity="center"                         
                                android:orientation="horizontal" />
                        <Button
                          android:layout_width="wrap_content"
                          android:layout_height="@dimen/margin_40"
                          android:text="Next"
                          android:layout_marginTop="@dimen/margin_10"
                          android:layout_marginBottom="@dimen/margin_20"
                          android:layout_alignParentBottom="true"
                          android:id="@+id/btnNext"
                         android:textColor="@color/colorWhite"
                         android:textSize="@dimen/textSize_15"
                         android:background="@drawable/button_transparen"
                         app:fontFamily="@font/lato_light"
                         android:paddingLeft="@dimen/margin_50"
                         android:paddingRight="@dimen/margin_50"
                         android:layout_centerHorizontal="true"
                         android:inputType="none|textCapWords" />
                    </RelativeLayout>
            </LinearLayout>
        </LinearLayout>
</RelativeLayout>

//TourItemLayout.axml

 <?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">



    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SONG"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:id="@+id/lblTourWizFirstLine"
            android:layout_marginRight="@dimen/margin_38"
            app:fontFamily="@font/lato_bold"
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"
             />
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SPLITS"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_marginRight="@dimen/margin_38"
            android:layout_marginTop="@dimen/margin_20_minus"
            android:id="@+id/lblTourWizSecondLine"
            android:layout_below="@+id/lblTourWizFirstLine"
            app:fontFamily="@font/lato_bold" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"/>
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="MADE"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_marginRight="@dimen/margin_38"
            android:layout_marginTop="@dimen/margin_20_minus"
            android:id="@+id/lblTourWizThirdLine"
            android:layout_below="@+id/lblTourWizSecondLine"
            app:fontFamily="@font/lato_bold" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"/>

        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="EASY"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_marginRight="@dimen/margin_38"
            android:layout_marginTop="@dimen/margin_20_minus"
            android:id="@+id/lblTourWizFourthLine"
            android:layout_below="@+id/lblTourWizThirdLine"
            app:fontFamily="@font/lato_bold" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"/>

        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Invite your co-writers\nto collaborate on a\nnew project"
            android:layout_marginTop="@dimen/margin_70"
            android:lines="3"
            android:maxLines="3"
            android:ellipsize="end"
            android:id="@+id/lblDescriptionText"
            android:layout_below="@+id/lblTourWizThirdLine"
            app:fontFamily="@font/lato_regular" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:layout_marginRight="@dimen/margin_85"
            android:textSize="@dimen/textSize_18"/>

        <!--<ImageView android:id="@+id/TextTour"
                   android:src="@drawable/tour1text"
                   android:layout_centerVertical="true"

                   android:layout_marginLeft="@dimen/margin_38"
                   android:scaleType="fitStart" 
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"/>-->

    </RelativeLayout>



</RelativeLayout>

Upvotes: 0

Views: 56

Answers (3)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10346

According to your description, you want to support different screen size, I find one article that you can take a look:

1.Declare the screen size the application supports

2.Layouts for different screen sizes

https://www.c-sharpcorner.com/article/xamarin-android-create-android-app-supporting-multiple-screens/

Upvotes: 0

Shiva Snape
Shiva Snape

Reputation: 544

Inorder to support multiple devices and multiple screen support , there are different options available.

1) You can create different dimens file,dimens.xml(small,normal,large,xlarge) inside res->values folder.

2) Provide different xml files for different screen sizes. (Not preferable)

3) Use Constraint Layouts.

Upvotes: 0

Alexander Dadukin
Alexander Dadukin

Reputation: 564

There are a lot of ways to achieve such a behavior. For example, you may define dimens resources for a different phones with smallest width qualifiers.

https://developer.android.com/training/multiscreen/screensizes

Upvotes: 1

Related Questions