Android - How to remove unwanted gaps when using LinearLayout with weights - android

I have a vertical LinearLayout that contains 2 horizontal LinearLayouts. Below the vertical LL, I have another horizontal LL. Since I'm using the weight attribute, I've made either the height or width attributes of the layouts = 0dp.
Code -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonBack"
android:text="back" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonRefresh"
android:text="refresh" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore1"
android:text="Score: " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore2"
android:text="Score: " />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPlayer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P1"
/>
<Button
android:id="#+id/buttonPlayer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P2" />
</LinearLayout>
This is how it looks -
As you can see, there are unwanted gaps (and rounded corners) between the elements. How do I remove the white spaces?


Replace All your buttons with material buttons
app:cornerRadius="0dp" this will remove corners
And android:background="#000000" this is for expand the buttons to full height
<com.google.android.material.button.MaterialButton
android:layout_width="0dp"
app:cornerRadius="0dp" //
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#000000"
android:id="#+id/buttonRefresh"
android:text="refresh" />


Use this code I just added a background to your Linear Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonBack"
android:text="back" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonRefresh"
android:text="refresh" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:layout_marginTop="10dp"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore1"
android:text="Score: " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore2"
android:text="Score: " />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:layout_marginTop="10dp"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPlayer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P1"
/>
<Button
android:id="#+id/buttonPlayer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P2" />
</LinearLayout>


Like this?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_weight="1.0">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="BACK"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonBack"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="SCORE:"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonScore1"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="P1"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonPlayer1"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_weight="1.0">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="REFRESH"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonRefresh"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="SCORE:"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonScore2"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="P2"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonPlayer2"/>
</LinearLayout>
</LinearLayout>
I've put a padding of 1px for each Button because of Android bugs on rendering text in a Button.

Related

How to get the screen height and adjust view to fit proportionately

I have a requirement where i need to add multiple views to a screen with only top and bottom padding as 10. The first view which is a banner should occupy one third of the screen, while the rest 3 view should fill the entire screen with proportionate heights of each. How can i dynamically calculate the screen height and adjust my view accordingly.

Assuming your parent layout is LinearLayout,
Set the banner's properties as
layout_height="0dp"
layout_weight="3"
For each of the remaining 3 views, set properties as
layout_height="0dp"
layout_weight="2"
Doing this will make sure the banner has 1/3rd of the screen height, and the remaining 3 views are proportionately sized.
(This answer is not to find Height of screen dynamically. But based on your question, it looks like this is what you wanted to acheive.)

You can follow this example code to modify your own code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:circular="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="#drawable/bg_simple"
android:orientation="vertical"
android:weightSum="10"
tools:context="com.batterysaver.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingRight="15dp"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="10dip"
android:layout_weight="1"
android:orientation="horizontal">
<com.lylc.widget.circularprogressbar.CircularProgressBar
android:id="#+id/battery_percentage"
style="#style/Widget.ProgressBar.Holo.CircularProgressBar"
android:layout_width="110dip"
android:layout_height="110dip"
circular:cpb_subtitle="Battery"
circular:cpb_title="Title" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/optimize_Button"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_centerVertical="true"
android:src="#drawable/save_power" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/panel"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/temp_degree"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/voltage_meter"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/level_value"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/temp_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Temp"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/voltage_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Voltage"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/level_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Level"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:orientation="vertical"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/wifi_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp" />
<ImageView
android:id="#+id/blutooth_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp" />
<ImageView
android:id="#+id/brightness_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_light_normal" />
<ImageView
android:id="#+id/rotate_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_rotate_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/mode_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_sound_normal" />
<ImageView
android:id="#+id/screen_timout_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_timeout" />
<ImageView
android:id="#+id/location_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_location_normal" />
<ImageView
android:id="#+id/sync_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_saintic_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="#+id/flightmode_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_airplanmode_normal" />
<ImageView
android:id="#+id/mobiledata_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_data_normal" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

how can I create button and picture horizontally?

I want to create more buttons and pictures either in horizontal or vertical direction.
like this picture
please help me for doing this...

Try following code:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

Manage your layout orientation="horizontal" and orientation="vertical" you will get views in horizontal and vertical from
here some code copy paste in your XML layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:orientation="horizontal"
android:padding="8dp"
android:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="Btn1" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="4dp"
android:layout_weight="1"
android:background="#a03"
android:src="#android:drawable/ic_lock_power_off" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="Btn2" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="4dp"
android:layout_weight="1"
android:background="#a03"
android:src="#android:drawable/ic_lock_power_off" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:orientation="vertical"
android:padding="8dp"
android:weightSum="4" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="btn3" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#a03"
android:src="#android:drawable/ic_lock_power_off" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="btn4" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#a03"
android:src="#android:drawable/ic_lock_power_off" />
</LinearLayout>
Graphical View

Understanding layout_weight

I want to do this:
The problem: all of the layout is contain by ScrollView into a LinearLayout and at the bottom must be the buttons of the stepper. To do that i used layout_weight to locating the elements in the space how i want.
Here is my XML code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
android:background="#drawable/shape_fondo"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:src="#mipmap/indicador_wizzard2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Días de ingesta"
android:layout_marginBottom="6dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="12dp"
android:layout_marginLeft="12dp"
android:weightSum="49">
<ToggleButton
android:id="#+id/lunes"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Lu"
android:textOff="Lu"/>
<ToggleButton
android:id="#+id/martes"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Ma"
android:textOff="Ma"/>
<ToggleButton
android:id="#+id/miercoles"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Mie"
android:textOff="Mie"/>
<ToggleButton
android:id="#+id/jueves"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Jue"
android:textOff="Jue"/>
<ToggleButton
android:id="#+id/viernes"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Vie"
android:textOff="Vie"/>
<ToggleButton
android:id="#+id/sabado"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Sa"
android:textOff="Sa"/>
<ToggleButton
android:id="#+id/domingo"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Do"
android:textOff="Do"/>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.3"
android:id="#+id/contenedortitulito">
<TextView
android:id="#+id/titulohora"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_alignParentLeft="true"
android:text="Hora" />
<TextView
android:id="#+id/titulodosis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_alignParentRight="true"
android:text="Dosis"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/listview"
android:background="#color/azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/contenedortitulito"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
style="#style/botones"
android:id="#+id/btn_cancelar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Atrás"
android:layout_gravity="center"/>
<Button
style="#style/botones"
android:id="#+id/btn_irapaso3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Continuar"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</ScrollView>
I do not quite understand the concept of layout weight. Can you explain me?
Thanks!

You Need to provide weightsum to parent layout first of all after that you can distribute weight accordingly..
i have provided example of screen in which i used weightsum and layout_weight.
You can apply layout weight on scrollview as well
Here is the code for sample screen.
You can ignore first relative layout.
Hope it Helps
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/whole_bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="35dp"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".15"
android:background="#drawable/top"
android:orientation="horizontal"
android:weightSum="6">
<ImageView
android:id="#+id/ivHome"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_home" />
<ImageView
android:id="#+id/ivTraderList"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_traderlist_green" />
<ImageView
android:id="#+id/ivStatement"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_statement_green" />
<ImageView
android:id="#+id/ivSummary"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_summary_green" />
<ImageView
android:id="#+id/ivProduct"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_product_green" />
<ImageView
android:id="#+id/ivLogout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_logout" />
</LinearLayout>
<TextView
style="#style/TitleStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="#string/trader_list_str" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/lightGreen"
android:orientation="horizontal"
android:weightSum="1">
<EditText
android:id="#+id/etDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".495"
android:editable="false"
android:focusable="false"
android:gravity="center"
android:text="#string/date_str"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#color/white"
android:textStyle="bold" />
<View
android:layout_width="0dp"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_weight=".005"
android:background="#android:color/darker_gray" />
<EditText
android:id="#+id/etTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".495"
android:editable="false"
android:focusable="false"
android:gravity="center"
android:text="#string/time_str"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".84"
android:orientation="vertical"
android:weightSum="1">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".8" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".2"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#color/lightYellow"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/tvLabelTotal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight=".595"
android:gravity="center"
android:text="#string/total_str"
android:textAppearance="?android:textAppearanceMedium" />
<View
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:layout_weight=".01"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/tvTotal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="1dp"
android:layout_weight=".395"
android:gravity="center" />
</LinearLayout>
<TextView
android:id="#+id/tvOrder"
style="#style/BtnStyle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:onClick="placeOrder"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="#string/place_order_str" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/advtLabel"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:background="#color/lightYellow"
android:orientation="horizontal" />

Position of buttons in LinearLayout

I've added 5 buttons (see below), I need that reset button should be equally align as that of the above two buttons in order to maintain uniformity. Also I am not able to align submit button exact below of GoodButton.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:layout_weight="0"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:layout_weight="0"
android:text="1" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:background="#android:color/darker_gray"></View>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="2"
android:text="Good" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:text="Reset" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:background="#android:color/darker_gray"></View>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Submit" />
</LinearLayout>
</LinearLayout>
I feel it is due to extra layout margin space i have added on top buttons.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
</LinearLayout>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_height="match_parent">
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
</LinearLayout>
</LinearLayout>
Use it, exactly what you need

Using nested weight can bring performance issues.
This design can easily be achieved by using Relative layout.
Check this code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1"
android:layout_margin="10dp">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:text="3" />
</LinearLayout>
<LinearLayout
android:layout_below="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1"
android:layout_margin="5dp">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="4" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="5" />
</LinearLayout>

your problem is that you are not distributing well the weight of the views.
You must apply weight to both horizontal LinearLayout and then try to distribute the weight of their child views equally.
See my example above:
<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="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5" />
</LinearLayout>
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Good" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:text="Reset" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Submit" />
</LinearLayout>

You can also use a TableLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<Button
android:layout_marginRight="2dp"
android:text="1" />
<Button
android:layout_marginRight="4dp"
android:text="1" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<Button
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Good" />
</TableRow>
<TableRow>
<Button
android:layout_marginRight="4dp"
android:layout_span="2"
android:text="Reset" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<Button
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Submit" />
</TableRow>
</TableLayout>

How to create this kind of layout for android

I have design of andorid layout I have no idea how to start the UI use what (grid, table layout or ). by this
Please give me example.
Here is the design!

One way to do this is with nested LinearLayouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#dddddd" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:gravity="center" >
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff4000" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center" >
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:textColor="#000000"
android:text="text here text here text here text here text here text here text here text here text here"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical"
android:background="#cccccc" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:background="#ff8000" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:layout_margin="5dp"
android:background="#ffbf00" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:background="#ff4000" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#facc2e" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#ffbf00" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#ff8000" />
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#ffbf00" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

I hope that this tutorial can help you : http://www.chess-ix.com/blog/the-use-of-layout_weight-with-android-layouts/ , any way you can use only LinearLayout horizontal and vertical to do your UI

Categories

Resources