Hi,
I want to create a screen like I've (tried to) drawn above.
A,b,c,d,e,f,g and h are buttons, and p is a EditText.
Now what I want to accomplish is that when deployed on a larger or smaller screen, or rotated, the following will happen:
element 'p' stays the same height but sizes horizontally (gets
wider/smaller)
elements a-h (the buttons) all size horizontally and
vertically. So when the screen gets twice as wide, the buttons are
two times wider, and when it's twice as high, the buttons are twice
as high.
I've been able to create one row of buttons to size horizontally (with a lineairlayout and a android:layout_weight, but I am not getting any further.
Try it out,hope 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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
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" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
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" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
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" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
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" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp" />
</LinearLayout>
Here's a solution that will work:
Set the EditText height as you wish.
<LinearLayout
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" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="40dp" />
</LinearLayout>
One quick solution is to make use of nested layouts and nested weights. An example of this could be:
<LinearLayout
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" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
However, nested weights aren't recommended as they are computationally heavy. An alternative (superior) layout could be based on relative layouts to replace nested LinearLayouts and their weights. A hidden center component is used to split the relative layout in two. An example of this is posted below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView2" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView3" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView3" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView4" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView4" />
</RelativeLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
The solution using RelativeLayout was inspired by the answer from DeeV in this SO question: Making two LinearLayouts have 50% of the screen each without using layout_weight
If you want to avoid the soft keyboard from showing when the layouts are inflated you can do the following to your parent LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:focusableInTouchMode="true">
// try this
<?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:padding="5dp"
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="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="a"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="b"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="c"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="d"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="e"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="f"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="g"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="h"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="p"/>
</LinearLayout>
Related
I have four textviews in my Linear Layout and they have equal
width as follows,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView86" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content" />
<TextView
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content" />
<TextView
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content" />
<TextView
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
My problem is, The textviews should be displayed with the same height.The content(text) for that textview will be set programmatically. I tried with Relative layout but the width of textview couldn't be same. I need both height and width should be same as tallest child.
Guide me please. Thanks!
Use below layout :
<LinearLayout
android:weightSum="1"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:background="#color/black_30"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="match_parent"
/>
<TextView
android:background="#color/com_facebook_blue"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="match_parent"
/>
<TextView
android:background="#color/tw__composer_red"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="match_parent"
/>
<TextView
android:background="#color/colorAccent"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="match_parent"
/>
</LinearLayout>
Checkout below xml Code , You set the child height to wrap_content that should be match_parent :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:background="#drawable/bluebackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView86" />
<LinearLayout
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:background="#drawable/bluebackground"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
/>
<TextView
android:background="#drawable/bluebackground"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
/>
<TextView
android:background="#drawable/bluebackground"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
/>
<TextView
android:background="#drawable/bluebackground"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
/>
</LinearLayout>
</LinearLayout>
I have one outer ScrollView in which there is one RecyclerView and three tabs. Every tab has a fragment and that fragment loads in corresponding tab using ViewPager but outer ScrollView does not scroll my layout. I used nested ScrollView but it also does not scroll. Maybe I did something wrong. Does any one have a suggestion? Please share with me.
Here is my xml code structure
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/parent_scroll"
android:layout_weight="1"
android:background="#color/business_price_bg"
android:focusableInTouchMode="false">
<RelativeLayout
android:id="#+id/business_detail_main_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/activity_main_search_top_main_ll"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_main_search_top_main_ll_height"
android:background="#color/location_setting_bottom_button_color"
android:gravity="center"
android:orientation="vertical">
</LinearLayout>
<RelativeLayout
android:id="#+id/business_detail_activity_business_slider_main_rl"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/activity_main_search_top_main_ll">
<android.support.v7.widget.RecyclerView
android:id="#+id/business_detail_activity_slider_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</RelativeLayout>
<TextView
android:id="#+id/business_detail_activity_business_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/business_detail_activity_business_slider_main_rl"
android:layout_margin="10dp"
android:text=""
android:textColor="#android:color/black"
android:textSize="14sp" />
<TextView
android:id="#+id/business_detail_activity_business_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/business_detail_activity_business_title"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:text=""
android:textSize="13sp" />
<android.support.design.widget.TabLayout
android:id="#+id/business_detail_activity_tabslayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/business_detail_activity_business_description"
android:background="#android:color/transparent"
app:tabIndicatorColor="#color/pencilin_orange_color"
app:tabIndicatorHeight="5dp"
app:tabTextAppearance="#style/MyTabLayoutTextAppearance" />
<android.support.v4.view.ViewPager
android:id="#+id/business_detail_activity_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/business_detail_activity_tabslayout"
android:background="#android:color/white" />
</RelativeLayout>
</ScrollView>
You are going against the Android's UI Standards that's why you can never achieve your goals. Try to stick with Android UI Standards and make less complex UI.
I changed my screen Layout Structure and finally ScrollView is working
Here is solution:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<LinearLayout
android:id="#+id/business_detail_main_rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:id="#+id/activity_main_search_top_main_ll"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_main_search_top_main_ll_height"
android:layout_weight="0."
android:background="#color/location_setting_bottom_button_color"
android:gravity="center"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.45"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/business_detail_activity_business_slider_main_rl"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/activity_main_search_top_main_ll">
<android.support.v7.widget.RecyclerView
android:id="#+id/business_detail_activity_slider_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scrollbars="vertical" />
</RelativeLayout>
<TextView
android:id="#+id/business_detail_activity_business_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/business_detail_activity_business_slider_main_rl"
android:layout_margin="10dp"
android:text=""
android:textColor="#android:color/black"
android:textSize="14sp" />
<TextView
android:id="#+id/business_detail_activity_business_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/business_detail_activity_business_title"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:text=""
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="1">
<Button
android:id="#+id/business_preview_screen_services_btn"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.88"
android:background="#android:color/transparent"
android:text="#string/business_preview_screen_services_btn_str"
android:textAllCaps="false" />
<View
android:id="#+id/business_preview_screen_service_btn_seperator"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.12"
android:background="#color/location_setting_bottom_button_color" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="1">
<Button
android:id="#+id/business_preview_screen_about_btn"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.88"
android:background="#android:color/transparent"
android:text="#string/business_preview_screen_services_btn_about_btn_str"
android:textAllCaps="false" />
<View
android:id="#+id/business_preview_screen_about_btn_seperator"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.13"
android:background="#color/light_gray_section_cell_seperator" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="1">
<Button
android:id="#+id/business_preview_screen_staff_btn"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.88"
android:background="#android:color/transparent"
android:text="#string/business_preview_screen_services_btn_staff_btn_str"
android:textAllCaps="false" />
<View
android:id="#+id/business_preview_screen_staff_btn_seperator"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.13"
android:background="#color/light_gray_section_cell_seperator" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
I have the follwoing way to have tile view of any grid size. But I want only 2x3 tiles on the page and 2x1 on the below the visible part of the page. Which you can access only after scrolling the page. But I am not able to achieve this by the below method.
I tried scroll view for the whole view.xml but then it got shrunk to the top of the page. And I don't have any control on the size of tiles. The change according to the view.
view.xml
<?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="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
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="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
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="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
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="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
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="1" />
</LinearLayout>
</LinearLayout>
did you test this layout structure:
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
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="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
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="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
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="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
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="1"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
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
I would like a layout to appear like the below:
I understand that this must be done using weights and a combination of either LinearLayouts, TableLayouts or GridLayouts.
Regarding the image, all items are centred horizontally unless specified otherwise.
Any help is greatly appreciated.
I am finding it difficult to convert items from taking up a percentage of the screen to weights. From what I have read so far, it seems that I will need multiple layers of nesting different layouts but I was hoping it could be done easily with GridLayout functionality.
This is what I have so far:
<?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/bg_repeat"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="horizontal" >
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:contentDescription="#string/c_d"
android:src="#drawable/img" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3" >
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:orientation="vertical" >
<EditText
android:id="#+id/edit1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="text" >
</EditText>
<EditText
android:id="#+id/edit2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="text" />
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="1dp"
android:clickable="true"
android:text="#string/btn" >
</Button>
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:layout_weight="1" >
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:text="#string/btn2" >
</Button>
<Button
android:id="#+id/btn3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:text="#string/btn2" >
</Button>
</LinearLayout>
</LinearLayout>
I merged the two images into 1. If this could be done more efficiently, I would love to hear about it.