• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Apps Help on application UI design

C

charankumarbr

Lurker
Hello All,

I am Charan Kumar, a beginner in android. I have created an UI design XML file. The design I have created shows all the components on a 3.4 inch display screen phone. But, When I try on 3 inch and 3.2 inch screen phone, the components which are at lower part of UI are not getting displayed. The components are not getting fitted to the screen...

I am using "dp" to mention the width and height.

Please help me how to design an UI that displays all components on all phones.
 
have you set the height of the containing layout to
Code: 
android:layout_height="fill_parent"
fill parent just takes all the space available, so it will always go from top to bottom

that usually fixes the problem for me :)
 
@moviemastersdk : Yes, I have used layout_height ="fill_parent", But individual components in each layout are fixed size say like: for a Button,
:layout_width="50dp" and
:layout_height="25dp"

The button will not be displayed when it is placed after couple of rows at the bottom, all the components will be displayed.
 
charankumarbr said:
@moviemastersdk : Yes, I have used layout_height ="fill_parent", But individual components in each layout are fixed size say like: for a Button,
:layout_width="50dp" and
:layout_height="25dp"

The button will not be displayed when it is placed after couple of rows at the bottom, all the components will be displayed.
Click to expand...



Could you maybe paste your XML file here?
 
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="fill_parent"
android:padding="0sp">
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:baselineAligned="true"
android:layout_width="fill_parent" android:layout_height="60dp"
android:fitsSystemWindows="true">
<Button android:id="@+id/xNum" android:layout_width="62dp"
android:layout_height="fill_parent" android:text="123"
android:textColor="#000" android:tag="num"
android:textStyle="bold" android:background="#0000ff" android:textSize="27dp"
android:onClick="fun3" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xCL"
android:layout_width="62dp" android:layout_height="fill_parent"
android:textColor="#000" android:tag="CL"
android:text="CL" android:textStyle="bold" android:layout_gravity="left"
android:background="#ff1f00" android:textSize="27dp" android:layout_marginLeft="5dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xBCKSP"
android:layout_gravity="left" android:layout_width="186dp"
android:layout_height="fill_parent"
android:text="Backspace" android:tag="BCKSP" android:textStyle="bold"
android:textColor="#ffffff" android:fitsSystemWindows="true"
android:background="#000000" android:textSize="27dp"
android:layout_marginLeft="5dp"/>
</LinearLayout>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:baselineAligned="true"
android:layout_width="fill_parent" android:layout_height="60dp"
android:fitsSystemWindows="true">
<Button android:id="@+id/xA" android:layout_width="62dp"
android:layout_height="fill_parent" android:text="A"
android:textColor="#000" android:tag="A"
android:textStyle="bold" android:textSize="27dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xB"
android:layout_width="62dp" android:layout_height="fill_parent"
android:textColor="#000" android:tag="B" android:textSize="27dp"
android:text="B" android:textStyle="bold" android:layout_gravity="left" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xC"
android:layout_gravity="left" android:layout_width="62dp"
android:layout_height="fill_parent" android:textSize="27dp"
android:text="C" android:tag="C" android:textStyle="bold"
android:textColor="#000" android:fitsSystemWindows="true" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xD"
android:layout_width="62dp" android:layout_gravity="center_horizontal"
android:layout_height="fill_parent" android:text="D" android:tag="D"
android:textColor="#000" android:textStyle="bold" android:textSize="27dp"
android:fitsSystemWindows="true" android:ellipsize="marquee" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xE"
android:layout_width="62dp" android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" android:text="E"
android:tag="E" android:fitsSystemWindows="true" android:textSize="27dp"
android:textColor="#000" android:textStyle="bold"
android:ellipsize="marquee" />
</LinearLayout>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:baselineAligned="true"
android:layout_width="fill_parent" android:layout_height="60dp"
android:fitsSystemWindows="true">
<Button android:id="@+id/xF" android:layout_width="62dp"
android:layout_height="fill_parent" android:text="F"
android:textColor="#000" android:tag="F"
android:textStyle="bold" android:textSize="27dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xG"
android:layout_width="62dp" android:layout_height="fill_parent"
android:padding="0sp" android:textColor="#000" android:tag="G" android:textSize="27dp"
android:text="G" android:textStyle="bold" android:layout_gravity="left" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xH"
android:layout_gravity="left" android:layout_width="62dp"
android:padding="0sp" android:layout_height="fill_parent"
android:text="H" android:tag="H" android:textStyle="bold"
android:textColor="#000" android:fitsSystemWindows="true" android:textSize="27dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xI"
android:layout_width="62dp" android:layout_gravity="center_horizontal"
android:layout_height="fill_parent" android:text="I" android:tag="I"
android:textColor="#000" android:textStyle="bold" android:textSize="27dp"
android:fitsSystemWindows="true" android:ellipsize="marquee" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xJ"
android:layout_width="62dp" android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" android:text="J"
android:tag="J" android:fitsSystemWindows="true" android:textSize="27dp"
android:textColor="#000" android:textStyle="bold"
android:ellipsize="marquee" />
</LinearLayout>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_gravity="fill_vertical"
android:fitsSystemWindows="true" android:orientation="horizontal">
<LinearLayout android:baselineAligned="true"
android:layout_width="fill_parent" android:layout_height="60dp"
android:fitsSystemWindows="true">
<Button android:id="@+id/xK" android:layout_width="62dp"
android:layout_height="fill_parent" android:text="K"
android:textColor="#000" android:tag="K" android:padding="0sp"
android:textStyle="bold" android:textSize="27dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xL"
android:layout_width="62dp" android:layout_height="fill_parent"
android:padding="0sp" android:textColor="#000" android:tag="L" android:textSize="27dp"
android:text="L" android:textStyle="bold" android:layout_gravity="left" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xM"
android:layout_gravity="left" android:layout_width="62dp"
android:padding="0sp" android:layout_height="fill_parent"
android:text="M" android:tag="M" android:textStyle="bold" android:textSize="27dp"
android:textColor="#000" android:fitsSystemWindows="true" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xN"
android:layout_width="62dp" android:layout_gravity="center_horizontal"
android:layout_height="fill_parent" android:text="N" android:tag="N"
android:textColor="#000" android:textStyle="bold" android:textSize="27dp"
android:fitsSystemWindows="true" android:ellipsize="marquee" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xO"
android:layout_width="62dp" android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" android:text="O"
android:tag="O" android:fitsSystemWindows="true" android:textSize="27dp"
android:textColor="#000" android:textStyle="bold"
android:ellipsize="marquee" />
</LinearLayout>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent" android:fitsSystemWindows="true"
android:orientation="horizontal">
<LinearLayout android:baselineAligned="true"
android:layout_width="fill_parent" android:layout_height="60dp"
android:fitsSystemWindows="true">
<Button android:id="@+id/xP" android:layout_width="62dp"
android:layout_height="fill_parent" android:text="P"
android:textColor="#000" android:tag="P" android:padding="0sp"
android:textStyle="bold" android:textSize="27dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xQ"
android:layout_width="62dp" android:layout_height="fill_parent"
android:padding="0sp" android:textColor="#000" android:tag="Q" android:textSize="27dp"
android:text="Q" android:textStyle="bold" android:layout_gravity="left" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xR"
android:layout_gravity="left" android:layout_width="62dp"
android:padding="0sp" android:layout_height="fill_parent" android:textSize="27dp"
android:text="R" android:tag="R" android:textStyle="bold"
android:textColor="#000" android:fitsSystemWindows="true" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xS"
android:layout_width="62dp" android:layout_gravity="center_horizontal"
android:layout_height="fill_parent" android:text="S" android:tag="S"
android:textColor="#000" android:textStyle="bold" android:textSize="27dp"
android:fitsSystemWindows="true" android:ellipsize="marquee" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xT"
android:layout_width="62dp" android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" android:text="T"
android:tag="T" android:fitsSystemWindows="true" android:textSize="27dp"
android:textColor="#000" android:textStyle="bold"
android:ellipsize="marquee" />

</LinearLayout>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent" android:fitsSystemWindows="true"
android:orientation="horizontal">
<LinearLayout android:baselineAligned="true"
android:layout_width="fill_parent" android:layout_height="60dp"
android:fitsSystemWindows="true">
<Button android:id="@+id/xU" android:layout_width="62dp"
android:layout_height="fill_parent" android:text="U"
android:textColor="#000" android:tag="U" android:padding="0sp"
android:textStyle="bold" android:textSize="27dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xV"
android:layout_width="62dp" android:layout_height="fill_parent"
android:padding="0sp" android:textColor="#000" android:tag="V" android:textSize="27dp"
android:text="V" android:textStyle="bold" android:layout_gravity="left" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xW"
android:layout_gravity="left" android:layout_width="62dp"
android:padding="0sp" android:layout_height="fill_parent"
android:text="W" android:tag="W" android:textStyle="bold" android:textSize="27dp"
android:textColor="#000" android:fitsSystemWindows="true" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xX"
android:layout_width="62dp" android:layout_gravity="center_horizontal"
android:layout_height="fill_parent" android:text="X" android:tag="X"
android:textColor="#000" android:textStyle="bold" android:textSize="27dp"
android:fitsSystemWindows="true" android:ellipsize="marquee" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xY"
android:layout_width="62dp" android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" android:text="Y"
android:tag="Y" android:fitsSystemWindows="true" android:textSize="27dp"
android:textColor="#000" android:textStyle="bold"
android:ellipsize="marquee" />

</LinearLayout>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="fill_parent" android:fitsSystemWindows="true"
android:orientation="horizontal">
<LinearLayout android:baselineAligned="true"
android:layout_width="fill_parent" android:layout_height="60dp"
android:fitsSystemWindows="true">
<Button android:id="@+id/xZ" android:layout_width="62dp"
android:layout_height="fill_parent" android:text="Z"
android:textColor="#000" android:tag="Z" android:padding="0sp"
android:textStyle="bold" android:textSize="27dp"/>
<Button android:soundEffectsEnabled="true" android:id="@+id/xSPC"
android:layout_width="62dp" android:layout_height="fill_parent"
android:padding="0sp" android:textColor="#000" android:tag="SPC" android:textSize="27dp"
android:text="SPC" android:textStyle="bold" android:layout_gravity="left" />
<Button android:soundEffectsEnabled="true" android:id="@+id/xENTER"
android:layout_gravity="left" android:layout_width="186dp"
android:padding="0sp" android:layout_height="fill_parent" android:textSize="27dp"
android:text="ENTER" android:tag="ENTER" android:textStyle="bold"
android:textColor="#ffffff" android:fitsSystemWindows="true" android:onClick="fun5"
android:background="#000" />
</LinearLayout>
</TableRow>
</TableLayout>
 
There's really no perfect solution for fitting everything on a small screen. However you could use a ScrollView so that the users on small screens can scroll to your buttons.

Another way would be to define a /layout-small/ folder to make a smaller layout, with smaller buttons/text/etc.

Here's the official docs on how to support multiple screen sizes:
Supporting Multiple Screens | Android Developers

Eventually, for more in-depth and advanced stuff you can also use something like /res/values/dimensions.xml

hth
 
suggestion: you may want to read about listview and adapter examples. it will make your life simpler combined with relativelayout.

you can certainly use scrollview as mentioned by @alostpacket, but for that to work, you'll have to create another layout and "include" your current layout in the scrollview and use the new layout with included section in your code

scrollview has limitation in that it can only contain one view group i.e. linearlayout in your case and I see you have bunch of them (not sure why you really need them)
 
@alostpacket Thanks a lot. I will use all your information and will make a good layout.

@wubbzy: I have read about adapters. I am that concept for other components. And, Yeah I have used many layouts, have to remove some... Thanks!
 
You must log in or register to reply here.
Back
Top Bottom