Layouts on release .apk on different cellphones


#1

Hello!

I am now on the final stage of my application and i am producing the release .apk.
After i produce the release .apk i am trying on several cellphones that my company has.

I worked with a ZTE BLADE Android cellphone defining all the layouts to this cellphone. All the layouts work perfectly on this cellphone.

But theni move to a HUAWEI cellphone and for example the bottombar i have to navigate between several screens doesnt even show up, and i try to make it visible etc but it doesnt display.

Then i move to a SAMSUNG cellphone and most of the components are out of the place where they were supposed to be.

Then i try a LTE|4G cellphone which is an android cellphone with a very large screen and every gets really out of control there!

How can i define a layout for all types of cellphones? Making all the components adjustable etc…

I’ll provide 2 htmls and 2 css of my screens so you can see how the code looks like of my application:

For example:

HomePage.html

<GridLayout rows="100,auto,150,130,150,auto">
    <StackLayout row="0">
        <label class="text-title" text="FastCanteen"></label>
    </StackLayout>
    <StackLayout row="1" marginBottom="30">
        <image class="imageAccountCircle" src="res://ic_account_circle_white"></image>
        <Label class="labelName" [text]=user.name textWrap="true"></Label>
        <Label class="labelNIF" [text]=user.nif textWrap="true"></Label>
    </StackLayout>
    <StackLayout row="2">
        <StackLayout marginLeft="70" marginRight="70" backgroundColor="#444444" borderRadius="30%" opacity="0.7" height="100">
            <Label class="labelBalanceValue" text="52.21€"></Label>
            <Label class="labelTextBalance" text="Available Balance"></Label>
        </StackLayout>
    </StackLayout>
    <StackLayout row="3" (tap)="accountTransactions()" marginBottom="10" marginLeft="20" marginRight="20" backgroundColor="#444444">
        <GridLayout rows="auto auto auto" columns="* 75">
            <Label class="labelLastBill" text="Last Bill" textWrap="true" row="0" col="0" marginTop="10"></Label>
            <Label class="labelValue" text="- € 19.00" textWrap="true" row="1" col="0"></Label>
            <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
            <Label class="labelTypeOfBill" text="Payment" textWrap="true" row="2" col="0" marginBottom="10"></Label>
        </GridLayout>
    </StackLayout>
    <FlexboxLayout row="4">
        <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
            [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
    </FlexboxLayout>
    <AbsoluteLayout row="5">
        <image class="imageRhombus" src="res://rhombus"></image>
    </AbsoluteLayout>
</GridLayout>

Homepage-common.css

AbsoluteLayout{
  margin-top:-1285;
  margin-Left:-290;
  width:70;
  height:70;
}

.imageRhombus{
  width:70;
  height:70;
}

.transactionsButtons {
    display:inline-block;
    text-align:center;
    text-transform: capitalize;
    font-size:36;
    color:white;
}


.bottombarButtons{
  width:50;
  flex-grow:1;
  background-color:white;
}

.labelLastBill{
  color:white;
  margin-left:10;
  height:25;
  margin-top:10;
}

.labelValue{
  color:white;
  margin-left:10;
  height:40;
  font-size:26;
  font-weight:bold;
}

.labelBalanceValue{
  color:white;
  margin-left:50;
  height:40;
  font-size:35;
  font-weight:900;
}

.labelTypeOfBill{
  color:white;
  margin-left:10;
  height:20;
}

.text-title {
 margin-left:105;
 margin-top:50;
 color: white;
 font-size:28;
}

.imageAccountCircle{
  display:inline-block;
  margin-left:35;
  margin-Right:285;
  margin-Bottom:230;
}

.labelTextBalance{
  color:white;
  margin-top:15;
  margin-left:30;
  font-size:20;
  height:25;
}

.labelTextUserInfo{
  color:white;
  margin-top:-140;
}

.labelName{
  margin-Top:-225;
  margin-Left:25;
  font-Size:20;
  color:white;
}

.labelNIF{
  margin-Left:25;
  font-Size:20;
  color:white;
}

Transactions.html:

<StackLayout marginTop="-53" orientation="vertical" width="410" height="450" backgroundColor="lightgray">
  <ActionBar marginLeft="80" fontSize="30" title="Account Transactions" backgroundColor="transparent" color="white">
  </ActionBar>
  <StackLayout (tap)="paymentDetails()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <GridLayout rows="auto auto auto" columns="* 75">
      <Label class="labelTransactionType" text="Payment" textWrap="true" row="0" col="0" marginTop="10"></Label>
      <Label class="labelTransactionValue" text="-€19.00" textWrap="true" row="1" col="0"></Label>
      <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
      <Label class="labelTransactionData" text="Date: 1 of April of 2017" textWrap="true" row="2" col="0"  marginBottom="10"></Label>
    </GridLayout>
  </StackLayout>
  <StackLayout (tap)="refundDetails()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <GridLayout rows="auto auto auto" columns="* 75">
      <Label class="labelTransactionType" text="Refund" textWrap="true" row="0" col="0" marginTop="10"></Label>
      <Label class="labelTransactionValue" text="+€3.50" textWrap="true" row="1" col="0"></Label>
      <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
      <Label class="labelTransactionData" text="Date: 1 of April of 2017" textWrap="true" row="2" col="0"  marginBottom="10"></Label>
    </GridLayout>
  </StackLayout>
    <StackLayout (tap)="bankTransactionDetails()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <GridLayout rows="auto auto auto" columns="* 75">
      <Label class="labelTransactionType" text="Bank Transaction" textWrap="true" row="0" col="0" marginTop="10"></Label>
      <Label class="labelTransactionValue" text="+€10.00" textWrap="true" row="1" col="0"></Label>
      <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
      <Label class="labelTransactionData" text="Date: 2 of April of 2017" textWrap="true" row="2" col="0"  marginBottom="10"></Label>
    </GridLayout>
  </StackLayout>
</StackLayout>
<FlexboxLayout orientation="vertical" marginTop="80%">
  <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
    [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
</FlexboxLayout>
<AbsoluteLayout class="layoutImageRhombus">
  <image class="imageRhombus" src="res://rhombus"></image>
</AbsoluteLayout>

Transactions-common.css

.layoutImageRhombus{
  margin-top:-590;
  margin-Left:-290;
  width:70;
  height:70;

}

.imageRhombus{
  width:70;
  height:70;
}

TextField {
  color: white;
}

.transactionsButtons {
    display:inline-block;
    text-align:center;
    text-transform: capitalize;
    font-size:36;
    color:black;
}

.labelTransactionType{
  margin-Left:10;
   height:25;
}

.labelTransactionValue{
 margin-Left:30; 
 height:40;
 font-Size:24;
 color:black;
}

.labelTransactionData{
  margin-Left:10;
  height:20;
}

Anyone could provide me on a hint on how to make this “universal” for all cellphones?
I am running on a really short deadline for this delivery if i could get any help on this, would be great!
Thank you!


#2

If it helps here are two types of differentt cellphones i use:

ZTE Blade A512 specifications:

SM-N910F specificaitons:

As you can see screen width and Height are very different, and therefore i think the components get a little out of place.
Any hints?