I`m trying to create a menu that will hold four ImageButtons next to each other and will be relative in size in order to support different screens resolutions.
Below the menu I need an additional small image button.
Here how it looks in Eclipse:
http://i.stack.imgur.com/QMvcs.jpg
This is how i built it in menu.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/abs__background_holo_dark"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal"
android:weightSum="1" >
<ImageButton
android:id="#+id/newsItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:onClick="NewsClicked" />
<ImageButton
android:id="#+id/imageItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:onClick="TeamsClicked" >
</ImageButton>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal"
android:weightSum="1" >
<ImageButton
android:id="#+id/chatItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:onClick="ChatClicked" >
</ImageButton>
<ImageButton
android:id="#+id/teamItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:onClick="ImagesClicked" />
</LinearLayout>
</LinearLayout>
<ImageButton
android:layout_weight="0.05"
android:id="#+id/orderDigital"
android:layout_width="match_parent"
android:layout_height="0dp"
android:onClick="DigitalClicked" />
</LinearLayout>
But on my phone it displays like this:
http://i.stack.imgur.com/cyQoc.png
Can you suggest another way to build that?
Problem solved.
I forgot that there was another layout(master page) that actually parent of main layout and it was with height=wrap content
Thanks :)
Related
I want to have the following layout :
But when I run the code the first linear layout which contains a relative layout and an image is shown correctly.
Then there is the "view pager" but it is not on the screen.
and then there is a text box and a button which are there too.
So why my view pager is missing?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
tools:ignore="NestedWeights,ContentDescription" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:src="#drawable/sp_page_name"
tools:ignore="ContentDescription" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:padding="#dimen/product_views_horizontal_padding"
tools:ignore="NestedWeights" >
</RelativeLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager_sharepoint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/TODO"/>
<TextView
android:id="#+id/sharepoint_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sharepoint_description"
tools:ignore="SelectableText" />
<ImageButton
android:id="#+id/sp_more_info"
android:layout_width="70dp"
android:layout_height="30dp"
android:background="#drawable/more_info_icon"
android:layout_gravity="left"
android:onClick="sp_more"/>
</LinearLayout>
</ScrollView>
The height of your ViewPager is android:layout_height="wrap_content".
So if your ViewPager doesn't contain other views, it won't be visible.
Well, I found out that scrolling views do not work very good together.
For my layout I solve the problem by changing the height and width of the viewpager to static sizes. Actually I defined some different sizes in my dimen.xml files for different screen sizes and use them for the height and width of my view pager.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
tools:ignore="NestedWeights,ContentDescription" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:src="#drawable/sp_page_name"
tools:ignore="ContentDescription" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:padding="#dimen/product_views_horizontal_padding"
tools:ignore="NestedWeights" >
</RelativeLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager_sharepoint"
android:layout_width="#dimen/viewpager_width"
android:layout_height="#dimen/viewpager_height"
android:contentDescription="#string/TODO"/>
<TextView
android:id="#+id/sharepoint_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sharepoint_description"
tools:ignore="SelectableText" />
<ImageButton
android:id="#+id/sp_more_info"
android:layout_width="70dp"
android:layout_height="30dp"
android:background="#drawable/more_info_icon"
android:layout_gravity="left"
android:onClick="sp_more"/>
</LinearLayout>
</ScrollView>
I'm trying to design something like that :
Currently i'm having issue putting the button at "the middle" of the two layouts reunion point. Is there a way i do this ?
Thanks.
Here is a way to do it
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FF0000">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FFFF00"
android:weightSum="0.5">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#000000"
android:text="TEST"
android:textColor="#FFFFFF"/>
</RelativeLayout>
OUTPUT:
You can change the layout height from android:layout_weight="0.5"
you can use RelativeLayout for your parent and try adding twoLinearLayouts , one below another and set their heights, now place a Button in your RelativeLayout and set android:layout_centerInParent="true" for your Button .
and if you want to use weight for layouts, instead of adding two LinearLayout to your RelativeLayout, add one LinearLayout with weightSum=100 and then add two LinearLayouts to it with custom weights.
for your case , you have to do sth like this :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:background="#f00" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#0f0" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="test" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I'm trying to position four RelativeLayouts on the screen equally as shown on the image below. I just can't seem to get anywhere. Each one will contain a text label and a button centred in their quadrant. I've tried placing the four inside RelativeLayout with the alignComponent values set appropriately and alignParent values set to Left/Right and Top/Bottom. I've also tried with just the alignComponent set and just alignParent set but to no avail.
It should look like this,
Since you want to use RelativeLayout, the easiest way is to use vertical and horizontal struts (which are invisible) and use those as anchors for your four RelativeLayouts children. This approach is definitely more efficient than nested LinearLayouts with weights. You should probably read this before nesting LinearLayouts with weights.
A snippet from the above link:
Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.
So for using RelativeLayouts with struts, your XML could be like this:
<RelativeLayout 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"
tools:context="${relativePackage}.${activityClass}" >
<View
android:id="#+id/horizontalStrut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerVertical="true" />
<View
android:id="#+id/verticalStrut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/horizontalStrut"
android:layout_toLeftOf="#id/verticalStrut"
android:background="#color/red" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/horizontalStrut"
android:layout_toRightOf="#id/verticalStrut"
android:background="#color/black" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalStrut"
android:layout_toLeftOf="#id/verticalStrut"
android:background="#color/blue" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalStrut"
android:layout_toRightOf="#id/verticalStrut"
android:background="#color/green" >
</RelativeLayout>
</RelativeLayout>
Try This Layout.. It Could Help You...
<?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="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/black" >
<!-- put your stuff here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/red" >
<!-- put your stuff here -->
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/white" >
<!-- put your stuff here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/green" >
<!-- put your stuff here -->
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Sample Output..
You can easily done it using LinearLayout or tableLayout,
SAmple shows using LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#FF0000" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#331323" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#662200" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#FF8800" >
</LinearLayout>
</LinearLayout>
You can use LinearLayout then set android:weightSum for your parent layout then you can set now your layout_weight for your quadrants.Like this..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum = "2"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/black" >
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/red" >
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/white" >
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#color/green" >
</RelativeLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0B6121"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#DF013A">
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#0080FF">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#A901DB"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
I'm an absolute beginner with android, I found a code that detects multitouches and another code that splits the screen into 6 areas
here is the layout for each code :
<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" >
<LinearLayout
android:background="#android:color/black"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:background="#android:color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:background="#android:color/black"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:background="#android:color/darker_gray"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:background="#android:color/white"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:background="#android:color/black"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
layout for detecting multitouches :
<com.example.multitouch.MultitouchView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
my question is how to combine these two layouts? and how to know each touch in which area lies ?
Thanks in advance
Make a parent of your layout - RelativeLayout and add a View with match_parent to both sides dimensions above all views what you want. Use flag View.INVISIBLE to hide this view.
And add to this this view ScaleDetector. That's all.
I am currently trying to work out how to align certain elements within my Android app's GUI.
Please see the image link below, the first layout is the current one, and the second is what I am aiming for.
Currently, I am using two linear Layouts. I have tried to use relative and table layouts for the right hand buttons and EditText, but always the EditText is shrunk, or overflows the tablet's screen size.
Thanks for your help!
Image Link: (http://postimage.org/image/pptkdkomx/)
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:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5" android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5" android:text="Button2"/>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
Why don't you use RelativeLayout and on your EditText use android:layout_alignBottom="myImage"
Just brought together a quick template, you may need to fix + add your own attributes since I used only notepad:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
<Button android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>