Aligning layout to fit all screen size - java

This is my linear layout and i have achieved the following.. I want to consume full page height.So I am taking the weight of the layout.But images are getting stretched
But the images are getting stretched.. I want to use the original
width of the image.. What changes do i need to make ??
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mdfooter"
android:layout_below="#+id/mdtlone"
android:background="#color/white"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/one"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/breakfastview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/mealbreakfast"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
<TextView
android:id="#+id/tvrequiredbreakfast"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/breakfastactual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/two"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/lunchview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/meallunch"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
<TextView
android:id="#+id/tvrequiredlunch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/lunchactual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/three"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/dinnerview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/mealdinner"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
<TextView
android:id="#+id/tvrequireddinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/dinneractual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/four"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/snackview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/mealsnacks"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
<TextView
android:id="#+id/tvrequiredsnacks"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/snacksactual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/five"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#E8E8E8" >
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Total"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#4CC1D2"
android:textStyle="bold" />
<TextView
android:id="#+id/calorieoutput"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/totalout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Please suggest anything


Chnage background to src "android:src="#drawable/mealbreakfast""
<ImageView
android:id="#+id/breakfastview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/mealbreakfast"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />


Design as per below you will be able to solve your problem.
I changed here for only one ImageView you will do the same in others ImageView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mdfooter"
android:layout_below="#+id/mdtlone"
android:background="#color/white"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/one"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/breakfastview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/mealbreakfast"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
</LinearLayout>
<TextView
android:id="#+id/tvrequiredbreakfast"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/breakfastactual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/two"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/lunchview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/meallunch"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
<TextView
android:id="#+id/tvrequiredlunch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/lunchactual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/three"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/dinnerview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/mealdinner"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
<TextView
android:id="#+id/tvrequireddinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/dinneractual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/four"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/snackview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/mealsnacks"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
<TextView
android:id="#+id/tvrequiredsnacks"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<TextView
android:id="#+id/snacksactual"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:clickable="true"
android:gravity="center"
android:onClick="gotoCalorieMealsDiaryActivity"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/five"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#E8E8E8" >
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Total"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#4CC1D2"
android:textStyle="bold" />
<TextView
android:id="#+id/calorieoutput"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/totalout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/newbuttonshape"
android:gravity="center"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
</LinearLayout>
Here Your ImageView was Stretched so I replaced the
<ImageView
android:id="#+id/breakfastview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/mealbreakfast"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
with my code
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/breakfastview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/mealbreakfast"
android:clickable="true"
android:onClick="onClick"
android:scaleType="center" />
</LinearLayout>
This will not stretch your ImageView and it looks as it is.
Hope this will be helpful... Thanks

Related

How to decrease the space between column

I have this table:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="369dp"
android:layout_height="118dp"
android:layout_marginTop="224dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/q1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="A:" />
<TextView
android:id="#+id/q2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="15%" />
<TextView
android:id="#+id/q3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/editTextBackground"
android:layout_weight="1.5"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:textColor="#000000" />
<TextView
android:id="#+id/q4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="20%" />
<TextView
android:id="#+id/q5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
<TextView
android:id="#+id/q6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="25%" />
<TextView
android:id="#+id/q7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="B:" />
<TextView
android:id="#+id/a2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="15%" />
<TextView
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
<TextView
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="20%" />
<TextView
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
<TextView
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="25%" />
<TextView
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
How to make the columns closer together?
To make less space between 15% and underscore?

Used below codes
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="369dp"
android:layout_height="118dp"
android:layout_marginTop="224dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/q1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="A:" />
<TextView
android:id="#+id/q2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="15%" />
<TextView
android:id="#+id/q3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:textColor="#000000" />
<TextView
android:id="#+id/q4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="20%" />
<TextView
android:id="#+id/q5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
<TextView
android:id="#+id/q6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="25%" />
<TextView
android:id="#+id/q7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="B:" />
<TextView
android:id="#+id/a2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="15%" />
<TextView
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
<TextView
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="20%" />
<TextView
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
<TextView
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="25%" />
<TextView
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Output :

Create separator between button

I have problem with create my button separator. This my buttons layout with my xml layout my create button.
This is fragment activity_swipe.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/searchDreamButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#drawable/button_selector"
android:gravity="center"
android:text="#string/search_dream"
android:textAllCaps="false"
android:textColor="#color/colorWhite" />
<Button
android:id="#+id/singInButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#drawable/button_selector"
android:gravity="center"
android:text="#string/sign_in"
android:textAllCaps="false"
android:textColor="#color/colorWhite" />
</LinearLayout>
but try make separator that this

Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#android:color/holo_blue_bright"
>
<Button
android:id="#+id/searchDreamButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#android:color/holo_blue_bright"
android:text="#string/search_dream"
android:textAllCaps="false"
/>
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#color/black_color"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
<Button
android:id="#+id/singInButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="#string/sign_in"
android:textAllCaps="false"
/>
</LinearLayout>

try this my friend
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/searchDreamButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#drawable/button_selector"
android:gravity="center"
android:text="#string/search_dream"
android:textAllCaps="false"
android:textColor="#color/colorWhite" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#000" />
<Button
android:id="#+id/singInButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#drawable/button_selector"
android:gravity="center"
android:text="#string/sign_in"
android:textAllCaps="false"
android:textColor="#color/colorWhite" />
</LinearLayout>

How to design in 10 inch tablet only in portrait mode in Android?

I have to design an application for 10 inch tab in Android.But when i run the application the design is in blur or not clear .I don't know why. I have also declare the android:screenOrientation="portrait" in manifest .How to design properly and where I'm doing wrong in xml file.Thanks in advance.
Here is my xml file code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" >
<ImageView
android:id="#+id/imageLogoBBT"
android:layout_width="400dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:contentDescription="#string/desc"
android:scaleType="fitXY"
android:src="#drawable/banya_tree_logo" />
<ImageView
android:id="#+id/imageButtonBack"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="15dp"
android:layout_marginTop="18dp"
android:contentDescription="#string/desc"
android:scaleType="fitCenter"
android:src="#drawable/back_img" />
<RelativeLayout
android:id="#+id/relImagLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/imageLogoBBT"
android:background="#drawable/inner_back"
android:padding="5dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E6E9E9" >
<TextView
android:id="#+id/textViewTitle"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/APPLICATION_FOR_FUND_TRANSFER"
android:textColor="#32241F"
android:textSize="25sp"
android:textStyle="bold" >
</TextView>
<TextView
android:id="#+id/APPLICANTS_INFORMATION_Detail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewTitle"
android:layout_marginLeft="10dp"
android:text="#string/APPLICANTS_INFORMATION"
android:textColor="#32241F"
android:textSize="20sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/linearScroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/lastrowLayout"
android:layout_below="#+id/APPLICANTS_INFORMATION_Detail"
android:baselineAligned="false"
android:orientation="horizontal" >
<ScrollView
android:id="#+id/scrollFormOne"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:baselineAligned="false"
android:orientation="vertical"
android:padding="2dp" >
<LinearLayout
android:id="#+id/linearlayout_One"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearlayout_textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginTop="5dp"
android:layout_weight="0.10"
android:gravity="left"
android:text="#string/title"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<TextView
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginTop="5dp"
android:layout_weight="0.25"
android:gravity="left"
android:paddingLeft="5dp"
android:text="#string/last_name"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<TextView
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginTop="5dp"
android:layout_weight="0.25"
android:gravity="left"
android:paddingLeft="5dp"
android:text="#string/first_name"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearlayout_EditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:baselineAligned="false"
android:orientation="horizontal" >
<Spinner
android:id="#+id/gps_spinnertitleName"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:layout_weight="0.10"
android:background="#drawable/button_shape"
android:gravity="center"
android:inputType="text"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gps_edittextLastName"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_weight="0.25"
android:background="#drawable/button_shape"
android:gravity="left"
android:inputType="text"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gps_editTextFirst"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_weight="0.25"
android:background="#drawable/button_shape"
android:gravity="left"
android:inputType="text"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<ScrollView
android:id="#+id/scrollFrorm_Two"
android:layout_width="400dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:baselineAligned="false"
android:orientation="vertical"
android:padding="2dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/Beneficiary_Address"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gspET_Beneficiary_Address"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_marginTop="5dp"
android:background="#drawable/button_shape"
android:inputType="textMultiLine"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/Beneficiary_Account_No"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gspET_Beneficiary_Account_No"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:background="#drawable/button_shape"
android:inputType="number"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/Beneficiary_Bank_Name"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gspET_Beneficiary_Bank_Name"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:background="#drawable/button_shape"
android:inputType="text"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/Beneficiary_Bank_Address"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gspET_Beneficiary_Bank_Address"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_marginTop="5dp"
android:background="#drawable/button_shape"
android:inputType="textMultiLine"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/BIC_Chips_ID_BSB_Code_Fed_Wire_ABA_Sort_Code"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gspET_BIC_Chips_ID_BSB"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:background="#drawable/button_shape"
android:inputType="text"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/Intermediary_Bank_Name"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gspET_Intermediary_Bank_Name"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:background="#drawable/button_shape"
android:inputType="text"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/Intermediary_Bank_Address"
android:textColor="#241444"
android:textSize="19sp"
android:textStyle="normal" />
<EditText
android:id="#+id/gspET_Intermediary_Bank_Address"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_marginTop="5dp"
android:background="#drawable/button_shape"
android:inputType="textMultiLine"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:textColor="#241444"
android:textSize="19sp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/lastrowLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="7dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="10dp" >
<CheckBox
android:id="#+id/android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:text="#string/I_Accept_Terms_Conditions"
android:textColor="#android:color/black" />
<ImageView
android:id="#+id/buttonSubmit_Next"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="0.40"
android:contentDescription="#string/desc"
android:src="#drawable/next_btton" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Screen Shot 2014-06-24 at 4.05.30 PM

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
>
// your left side part
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
>
// your right side part
</LinearLayout>
</LinearLayout>
and also use different images for 10 inch tablets

Do not scale the images using layout_width or layout_height by your self. I can see in the ImageView you have specified dp values, this will make system to scale your image which may cause blur. Instead use size and density-specific resources inside drawable folders like
res/drawable-mdpi/icon.png //for medium-density screens
res/drawable-hdpi/icon.png //for high-density screens
You can create specific layout suitable to the screen size and palce it in res\layout-xxx folders
Wherever possible use 9-patch images
If you have only one image and have to be scaled for different screen then use highest resolution image and keep it in drawable-nodpi folder and specify either height or width and lets system decide other so that image get scaled properly.
Read : http://developer.android.com/guide/practices/screens_support.html#screen-independence
Image scaling: http://argillander.wordpress.com/2011/11/24/scale-image-into-imageview-then-resize-imageview-to-match-the-image/

Preventing TextView and ImageView Overlap In Relative Layout

I have a textView (titleTv) and an imageView (buyButton) which are sometimes have an overlap if the titleTv has a somewhat long name.
How might this be prevented? I understand this can be done using an external library - but it seems strange there isn't a simple way to accomplish this.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="7dip"
android:paddingTop="7dip" >
<TextView
android:id="#+id/titleTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:paddingLeft="5dp"
android:text=""
android:textSize="20sp" />
<TextView
android:id="#+id/uploaderTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTv"
android:paddingLeft="5dip"
android:paddingTop="5dp"
android:textColor="#color/verylightgrey"
android:textSize="16sp" />
<TextView
android:id="#+id/viewCountTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTv"
android:layout_toRightOf="#id/uploaderTv"
android:paddingTop="5dp"
android:textColor="#android:color/black"
android:textSize="16sp" />
<ImageView
android:id="#+id/buyButton"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:paddingTop="7dip"
android:src="#drawable/buy_a_up_btn" />
</RelativeLayout>
Example:
(the overlapping fields are the video's title and the $ button)
http://i.stack.imgur.com/clpNv.png

just add your ImageView below that TextView. Add this attribute in your ImageView declaration
android:layout_below="#+id/titleTv"
Now the xml should be like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="7dip"
android:paddingTop="7dip" >
<TextView
android:id="#+id/titleTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:paddingLeft="5dp"
android:text=""
android:textSize="20sp" />
<TextView
android:id="#+id/uploaderTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTv"
android:paddingLeft="5dip"
android:paddingTop="5dp"
android:textColor="#color/verylightgrey"
android:textSize="16sp" />
<TextView
android:id="#+id/viewCountTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTv"
android:layout_toRightOf="#id/uploaderTv"
android:paddingTop="5dp"
android:textColor="#android:color/black"
android:textSize="16sp" />
<ImageView
android:id="#+id/buyButton"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_below="#+id/titleTv"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:paddingTop="7dip"
android:src="#drawable/buy_a_up_btn" />
</RelativeLayout>

Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="7dip"
android:paddingTop="7dip" >
<ImageView
android:id="#+id/buyButton"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:paddingTop="7dip"
android:src="#drawable/buy_a_up_btn" />
<TextView
android:id="#+id/titleTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/buyButton"
android:background="#color/white"
android:paddingLeft="5dp"
android:text=""
android:textSize="20sp" />
<TextView
android:id="#+id/uploaderTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTv"
android:paddingLeft="5dip"
android:paddingTop="5dp"
android:textColor="#color/verylightgrey"
android:textSize="16sp" />
<TextView
android:id="#+id/viewCountTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleTv"
android:layout_toRightOf="#id/uploaderTv"
android:paddingTop="5dp"
android:textColor="#android:color/black"
android:textSize="16sp" />
</RelativeLayout>

Why different android versions display different GUI?

Please have a look at the following code
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:gravity="right"
android:padding="5dp"
android:paddingBottom="5dp"
android:stretchColumns="1,2,3"
tools:context=".MainActivity" >
<TableRow
android:id="#+id/tableRow0"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/billTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="5dp"
android:text="#string/billTextView"
android:textColor="#000" />
<EditText
android:id="#+id/billEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:layout_weight="1"
android:inputType="numberDecimal"
android:longClickable="false" >
<requestFocus />
</EditText>
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tenTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_weight="1"
android:gravity="center"
android:text="10%"
android:textColor="#000" />
<TextView
android:id="#+id/fifteenTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="15%"
android:textColor="#000" />
<TextView
android:id="#+id/twentyTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="20%"
android:textColor="#000" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tipTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="5dp"
android:text="#string/tipTxtView"
android:textColor="#000" />
<EditText
android:id="#+id/tip10EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
<EditText
android:id="#+id/tip15EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
<EditText
android:id="#+id/tip20EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/totalTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="5dp"
android:text="#string/totalTextView"
android:textColor="#000" />
<EditText
android:id="#+id/total10EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
<EditText
android:id="#+id/total15EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
<EditText
android:id="#+id/total20EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/customTextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
android:padding="5dp"
android:text="#string/customTextView"
android:textColor="#000" />
<SeekBar
android:id="#+id/customSeekBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="2"
android:layout_weight="1"
android:focusable="false"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:progress="18" />
<TextView
android:id="#+id/customTipTextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:text="a"
android:textColor="#000" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tipCustomTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="5dp"
android:text="#string/tipCustomTextView"
android:textColor="#000" />
<EditText
android:id="#+id/tipCustomEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
<TextView
android:id="#+id/totalCustomTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|right"
android:padding="5dp"
android:text="#string/totalCustomTextView"
android:textColor="#000" />
<EditText
android:id="#+id/totalCustomEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cursorVisible="false"
android:focusable="false"
android:gravity="center"
android:longClickable="false"
android:textSize="14sp" />
</TableRow>
</TableLayout>
The project is created using Android Version 3.2.
This is how it get displayed in Galaxy Nexus, which is set to Android version 2.3.3
This is how it get displayed in Galaxy Nexus, which is set to Android version 3.2
As you can see, in that new version one, the GUI is bit upset. It seems like the components are overlapping. That is why it doesn't show the borders of the components. Please help!

Yep, this is normal. The visual appearance of Android has been greatly polished with Android 4.0. It has nothing to do with your code directly. Android does this automatically.
If you want all your users to see the old style, you can set down the targetVersion within the <uses-sdk> tag of your manifest file. However, I discourage you from doing this.

Categories

Resources