Everytime i use nested layouts, my sweet ide shows the error saying "nested layouts are bad performance". So i dig up a little why it is and found that it is the exponential calculation thing etc. Also relative layout usage over linear layout is suggested generally. But suppose the below code;
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:background="#cccccc"
android:layout_height="match_parent" android:orientation="vertical"
tools:context=".MainActivity" android:weightSum="10">
<LinearLayout android:layout_marginTop="9dp" android:layout_marginLeft="10dp"
android:background="#drawable/sub_background_dashboard" android:layout_marginRight="10dp"
android:layout_marginBottom="3dp"
android:layout_width="match_parent" android:layout_weight="4"
android:layout_height="0dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent" android:weightSum="2"
android:layout_weight="2.3"
android:layout_height="0dp" android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" android:layout_marginBottom="2dp">
<LinearLayout
android:layout_width="0dp" android:background="#drawable/sub_background_dashboard"
android:layout_weight="1" android:layout_marginRight="3.5dp"
android:layout_height="match_parent" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp" android:background="#drawable/sub_background_dashboard"
android:layout_weight="1" android:layout_marginLeft="3.5dp"
android:layout_height="match_parent" >
</LinearLayout>
</LinearLayout>
<LinearLayout android:layout_marginTop="5dp" android:layout_marginLeft="10dp"
android:background="#drawable/sub_background_dashboard" android:layout_marginRight="10dp"
android:layout_marginBottom="3dp"
android:layout_width="match_parent" android:layout_weight="2.7"
android:layout_height="0dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent" android:weightSum="10"
android:layout_weight="1"
android:layout_height="0dp" android:layout_marginTop="3dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent" android:weightSum="3"
android:layout_weight="9" android:background="#77000000"
android:layout_height="0dp"
android:orientation="horizontal">
<Button
android:layout_width="0dp" android:layout_weight="1" android:textColor="#DDDDDDDD"
android:layout_height="match_parent" android:background="#00000000"
android:gravity="center" android:textSize="17sp"
android:text="Snooze"/>
<View
android:layout_width="1dp" android:layout_marginTop="5dp"
android:layout_height="match_parent" android:layout_marginBottom="5dp"
android:background="#bbbbbbbb"/>
<Button
android:layout_width="0dp" android:layout_weight="1"
android:textSize="17sp" android:background="#00000000"
android:text="Dismiss" android:gravity="center"
android:layout_height="match_parent" android:textColor="#DDDDDDDD"/>
<View
android:layout_width="1dp" android:layout_marginTop="5dp"
android:layout_height="match_parent" android:layout_marginBottom="5dp"
android:background="#bbbbbbbb"/>
<Button
android:layout_width="0dp" android:layout_weight="1"
android:textSize="17sp" android:background="#00000000"
android:text="Cancel" android:gravity="center"
android:layout_height="match_parent" android:textColor="#DDDDDDDD"/>
</LinearLayout>
<View
android:layout_width="match_parent" android:background="#ff0000"
android:layout_height="0dp" android:layout_weight="1"/>
</LinearLayout>
</LinearLayout >
Think Linear Layouts as templates for views etc. This line of xml code will work for every screen size for portrait mode!!!. Calculations are already done, no percentage calculation needed(and implementation of it) from my side and everything covers space as it expected to be.
If i would use Relative Layout, for horizontal views that width calculation would be much longer and maybe would require dynamic side( I am not suggesting doing gui in dynamic side is bad, sure it is better even) So even small nested layouts like this, is it ill-advised still?
I use nested linear-layouts as well, because its easy. But for performance you can better use GRIDLAYOUT. Android introduced it in Ice Cream Sandwich to avoid nested layouts.
A little example:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="7"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_column="0"
android:layout_row="0"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_column="1"
android:layout_gravity="right"
android:layout_row="0"
android:text="TextView" />
<View
android:id="#+id/view1"
android:layout_height="16dp"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_row="1"
android:background="#F90" />
<Button
android:id="#+id/button1"
android:layout_column="0"
android:layout_row="2"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_column="0"
android:layout_row="3"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_column="0"
android:layout_row="4"
android:text="Button3" />
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="5"
android:background="#F90" />
<ImageView
android:id="#+id/imageView2"
android:layout_column="0"
android:layout_row="6"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_column="1"
android:layout_gravity="right"
android:layout_row="2"
android:text="HEADER" />
<View
android:id="#+id/view3"
android:layout_width="0dp"
android:layout_height="16dp"
android:layout_column="1"
android:layout_gravity="bottom|fill_horizontal"
android:layout_row="6"
android:background="#F90" />
Related
I'm new in android programming and my problem is that i created a simple calculator interface with some LienarLayouts and the result is not the same on the design display and my physical phone.
The result i get on the design
The result i get on my phone (Galaxy S7)
I couldn't find any solutions for that. For the operators it's some images that i put on different drawable folders (hdpi, xhdpi and xxhdpi).
i will put my xml file here.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:background="#color/clrBlue"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="50dp"
android:text="567"
android:textColor="#android:color/background_light"
android:textSize="45sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="7"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="8"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="9"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/divide" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="4"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="5"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="6"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/multiply" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="1"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="2"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="3"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/subtract" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="192dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/button15"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#color/clrBlue"
android:text="clear"
android:textSize="25sp" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="96dp"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:text="0"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
app:srcCompat="#drawable/add" />
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/transparent"
android:paddingRight="50dp"
android:paddingTop="125dp"
app:srcCompat="#drawable/equal" />
</RelativeLayout>
The result is different because of the different sizes. At the top of your layout display you will see that Nexus 4 is selected which is of screen size 4.7" and I think Galaxy S7 is of size 5.1".
Also, there can be a difference in density pixels.
You can refer to the android document for different pixel densities.
Support Different Pixel Densities
Relative and Linear layouts is not best choice for create calculator layout. To make this layout try use GridLayout or ConstraintLayout. It will be easier and more reliable solution
Edited
I have been battling with GridLayout and TableLayout for the past couple of hours and for the life of me can't figure out a way to make a CardView that looks like the following:
Currently I have a CardView parent with this GridLayout is its child:
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:rowCount="3"
android:columnCount="3"
android:orientation="horizontal"
android:padding="20dp">
<!--FirstRow-->
<ImageView
android:id="#+id/away_logo"
android:layout_row="1"
android:layout_column="0"
android:layout_columnWeight="0.3"
android:layout_gravity="start"
android:gravity="center_vertical"
android:src="#android:drawable/btn_star_big_on"/>
<LinearLayout
android:id="#+id/scores_layout"
android:layout_row="1"
android:layout_rowWeight="0.5"
android:layout_column="1"
android:layout_columnWeight="0.4"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/away_score_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="10"
android:gravity="center_vertical|start"
android:layout_weight="0.5"/>
<TextView
android:id="#+id/home_score_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center_vertical"
android:text="11"
android:gravity="center_vertical|end"
android:layout_weight="0.5"/>
</LinearLayout>
<ImageView
android:id="#+id/home_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="0.33"
android:layout_column="2"
android:layout_columnWeight="0.3"
android:layout_gravity="start"
android:gravity="center_vertical"
android:src="#android:drawable/btn_star_big_on"/>
<!--SecondRow-->
<TextView
android:id="#+id/away_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="0.3"
android:layout_column="0"
android:layout_columnWeight="0.33"
android:layout_gravity="start"
android:text="Team"
android:gravity="center_vertical"/>
<TextView
android:id="#+id/home_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="0.3"
android:layout_column="2"
android:layout_columnWeight="0.33"
android:layout_gravity="end"
android:text="Team"
android:gravity="center_vertical"/>
<!--LastRow-->
<TextView
android:id="#+id/time_rink_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="0.3"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_columnWeight="1"
android:text="7:00P.M.atBotany"
android:layout_gravity="center_horizontal"/>
</GridLayout>
Which gives this layout where the stars are placeholders to visualise where the ImageViews are and the scores are 1 - 13:
Try this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
tools:text="7:00 P.M. at Venue"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
tools:src="#drawable/team_1_image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
tools:text="Team 1"/>
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
tools:text="1 - 3"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
tools:src="#drawable/team_2_image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
tools:text="Team 2"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Why not try using relative layout to contain the inner content (also can do it for the title too), and align the views according to the parents, left, right, and center portions and it should work for you.
I'm trying to use Gridlayout. I want my grid's buttons to fill the screen but I have a problem doing that. I notice that the layout itself fill the screen but his children are not filling the layout. This is the output:
http://i.imgur.com/TWNuTaj.png
I searched a lot on the internet but most of the answers are offering to replace the GridLayout to LinearLayout or RelativeLayout But I have to stay with GridLayout.
Also I dont want to give the buttons specific size but rather stay with the structure in the linked picture.
Here is my code:
<GridLayout 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:layout_margin="0.5dp"
android:columnCount="4"
android:orientation="horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:rowCount="5"
tools:context=".Level1" >
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="0"
android:text="0" />
<Button
android:id="#+id/b_1"
android:layout_column="1"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:text="1" />
<Button
android:id="#+id/b_2"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowSpan="3"
android:text="2" />
<Button
android:id="#+id/b_3"
android:layout_column="3"
android:layout_row="0"
android:text="3" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="1"
android:text="0" />
<Button
android:id="#+id/b_4"
android:layout_column="1"
android:layout_gravity="fill_vertical"
android:layout_row="1"
android:layout_rowSpan="3"
android:text="4" />
<Button
android:id="#+id/b_6"
android:layout_column="3"
android:layout_gravity="fill_vertical"
android:layout_row="1"
android:layout_rowSpan="3"
android:text="6" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="2"
android:text="0" />
<Button
android:id="#+id/b_5"
android:layout_column="2"
android:layout_row="3"
android:text="5" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="3"
android:text="0" />
<Button
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_row="4"
android:text="0" />
</GridLayout>
Try this way,hope this will help you to solve your problem.
GridLayout : "GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space in non-trivial proportions between multiple rows or columns ... For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group."
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="1" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="4" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="5" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="6" />
</LinearLayout>
</LinearLayout>
Based on previous answer by #Haresh Chhelana, it worked like so just sharing my solution:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<!-- position 1 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_elsa" />
<!-- position 3 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_daniel" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<!-- position 2 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_anna" />
<!-- position 4 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_elmo" />
</LinearLayout>
</LinearLayout>
sample
source: https://github.com/eduardocerqueira/sing
I have searched and tried a lot of solution without success.
I have a full size image in the main screen of my app. So i want to organize this image with 2 buttons on the bottom of the screen.
With this XML everything seems ok but in some devices (HTC One, LG Nexus 4...) the image is not visible . In others devices is all ok and indeed i think the code is pretty good. I know that could be a weight problem but if i use relative layout there is the problem of the overlapping (i don't want use scroll view because the main screen must be all visible immediatly).
What i'm missing?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/main_gradient">
<ImageView android:id="#+id/imgMainLogo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:padding="20dp"
android:adjustViewBounds="true"
android:contentDescription="#string/image_description"
android:gravity="center"
android:src="#drawable/logo"/>
<LinearLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:padding="15dp"
android:gravity="bottom">
<Button
android:id="#+id/buttonRegister"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:padding="20dp"
android:text="#string/main_btn_register"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:background="#drawable/button_background"/>
<Button
android:id="#+id/buttonEnter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:padding="20dp"
android:text="#string/main_btn_enter"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:background="#drawable/button_background"/>
</LinearLayout>
</LinearLayout>
Checkout the weight related changes that I have made. Let me know if it works.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_gradient"
android:orientation="vertical"
android:weightSum="1" >
<ImageView
android:id="#+id/imgMainLogo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"
android:adjustViewBounds="true"
android:contentDescription="#string/image_description"
android:gravity="center"
android:padding="20dp"
android:src="#drawable/logo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"
android:gravity="bottom"
android:orientation="horizontal"
android:padding="15dp"
android:weightSum="1" >
<Button
android:id="#+id/buttonRegister"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="0.5"
android:background="#drawable/button_background"
android:padding="20dp"
android:text="#string/main_btn_register"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold" />
<Button
android:id="#+id/buttonEnter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0.5"
android:background="#drawable/button_background"
android:padding="20dp"
android:text="#string/main_btn_enter"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="20dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:orientation="horizontal"
android:padding="20dp"
android:weightSum="2" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:text="Enter"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
hi im trying to design my app for both android phone and tablet. So i already had it designed but needed to redesign for scaling purposes for different screens.
This is the layout im going for.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="horizontal" >
<fragment
android:id="#+id/map"
android:layout_marginTop="5dp"
android:layout_weight=".1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.google.android.gms.maps.MapFragment"
/>
<Button
android:id="#+id/button3"
android:layout_weight=".25"
android:layout_marginLeft="34dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="ClickTourismButton"
android:text="#string/Tourism" />
<Button
android:id="#+id/button4"
android:layout_weight=".25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="34dp"
android:text="#string/Nearby" />
<Button
android:id="#+id/button2"
android:layout_weight=".25"
android:layout_marginLeft="34dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Favourites" />
<Button
android:id="#+id/button1"
android:layout_weight=".25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="34dp"
android:text="#string/Map" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal" >
<TextView
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:id="#+id/feedupdate1" />
<ListView
android:id="#android:id/list"
android:background="#color/red"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/empty"
android:textIsSelectable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/feedupdate"
android:layout_marginLeft="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:textIsSelectable="true"/>
<ListView
android:id="#+id/list1"
android:background="#color/blue"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:layout_marginLeft="6dp" />
</LinearLayout>
</RelativeLayout>
When i run the app the two linear layouts are on top of each other?? or the map fragment which is seen above as the black rectangle takes up all the screen??? Ive no idea what im doing wrong, ive looked through several tutorials and t seems right?
Need assistance please
thanks
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="2"
android:background="#color/white">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<fragment
android:id="#+id/map"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.google.android.gms.maps.MapFragment"
/>
<Button
android:id="#+id/button3"
android:layout_marginLeft="34dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="ClickTourismButton"
android:text="#string/Tourism" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="34dp"
android:text="#string/Nearby" />
<Button
android:id="#+id/button2"
android:layout_marginLeft="34dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Favourites" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="34dp"
android:text="#string/Map" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:id="#+id/feedupdate1" />
<ListView
android:id="#android:id/list"
android:background="#color/red"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/empty"
android:textIsSelectable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/feedupdate"
android:layout_marginLeft="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:textIsSelectable="true"/>
<ListView
android:id="#+id/list1"
android:background="#color/blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:layout_marginLeft="6dp" />
</LinearLayout>
</LinearLayout>
one component takes up each side??
its divided in two but the map fragment takes up all of one side and the first listview takes up all of the other???
Change your orientation of both child LinearLayouts to VERTICAL
For top remove Relative and use LinearLayout with orientation HORIZONTAL
and have weightSum=2
Now in both child linearlayout views give layout_width="0dp" and layout_weight="1"
Example XML for you : http://pastebin.com/2MCBN9qk
Try changing RelativeLayout with LinearLayout, please take a look at this link for a deeper understanding about the different types of layouts.
Try using weightSum
and add your linear layouts inside a Relative layout for better positioning.