Here i want to create a layout that contains following by using fragment how can i do this?
Should i use for top portion or can i use fragment? which one is the best approach. And instead of swipe tab i want to display .(dot) in the bottom. e.g. Android home screen bottom 3-5 dots.
+-----------------------------------------------+
| +------------+ |
| | | Line 1 |
| | Image | Line 2 |
| | | Line 3 |
| | | (Static) |
| +------------+ |
|-----------------------------------------------|
| |
| |
| |
| |
| Some Content goes here |
| (Swipe tab) |
| Swipe to next -->>> |
| Here dot(.) represent the pages |
| |
| |
| |
|____________________._._.______________________|
| |
| 3 images goes here |
| (Static Horizontal scroll able) |
+-----------------------------------------------+
Hmmm...i tried it...and here is the out put...
And here is the source...
<TableLayout 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" >
<LinearLayout
android:id="#+id/news_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Test image"
android:padding="20dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your headline..."
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFCCCCCC" >
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Inner contents..."
android:textAppearance="?android:attr/textAppearanceLarge" />
</FrameLayout>
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scrollable contents here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</HorizontalScrollView>
NOTE: You need to put your tabs or any thing else in Inner contents section. And whatever contents in lower scrollable panel by you self. I just tried to make a structure for you...
Hope this helps...
You must put three layouts . In first linear horizontal layout place imageview and text views.
In the second one place a horizontal scrollable view with buttons or something suits to you contents with match parent widht to each . place page indicator tyo each button.
Third one is normal scrollable view or use gallery view to place you content.
Related
I was expecting all my TextView to be vertically centered in my RelativeLayout but this is only the case for the logo one. The others are anchored to the top of the latter.
Image
Here's my layout :
<?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="72dp"
android:gravity="center_vertical">
<TextView
android:id="#+id/logo"
android:layout_width="40dp"
android:layout_height="40dp"
android:text="TextView" />
<TextView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/logo"
android:layout_toRightOf="#+id/logo"
android:text="TextView" />
<TextView
android:id="#+id/eta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/stop"
android:layout_toRightOf="#+id/stop"
android:text="TextView" />
<TextView
android:id="#+id/direction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/stop"
android:layout_toEndOf="#+id/logo"
android:layout_toRightOf="#+id/logo"
android:text="TextView" />
The attribute layout_toEndOf performs layouting as follows:
Positions the start edge of this view to the end of the given anchor view ID. Link
Which means that all your TextViews start edges align with the logo's end.
As a starting point, just remove all layout_toEndOf attributes.
Then your layout should look something like this:
+--------------+
| | +-----------+
| | | stop |
| | +-----------+ +-----------+
| logo |/* no space */ | eta |
| | +-----------+ +-----------+
| | | direction |
| | +-----------+
+--------------+
More precisely, logo is vertically centered, same as eta. Since your layout code explictly places stop and direction directly to the right of logo, therefore direction is below stop.
I am creating an android application that adds an image/clipart on the picture. Everytime I drag the imageview on the right and bottom side of the layout, it automatically resize the image.
This is the sample scenario:
When I drag the clipart outide (TOP and Left Side of the layout), it doesnt resize the image but it cut the image (ClipArt1), but everytime I drag the image on the right and bottom side of the layout, it automatically resize, it does not exceed on the layout.
+-----------------------------+
| * ClipArt* |
| * 1 * |
| ********** |
| |
| ********* |
| *ClipArt* |
| * 2 * |
| ********* ****** |
| * CA3* |
| ****** |
+-----------------------------+
This is my XML layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.61"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/imgstage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="stage" >
<ImageView
android:id="#+id/imgView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/tap" />
</RelativeLayout>
</LinearLayout>
Forgive me if this is incorrect - I experienced this in the past. My solution was to switch the root element of my dynamic container to a fixed-size RelativeLayout... Does this work?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.61"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/imgstage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="stage" >
<ImageView
android:id="#+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/tap" />
</RelativeLayout>
</LinearLayout>
I want to make a part of a bitmap clickable and my layout looks like this:
________________________________
| ##### |
| ##### |
| ___________________ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| ___________________ |
________________________________
I thought the easiest way to this would be to place a button over the image with a relative layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?
Suggestions for other approaches are also welcome, I considered this:
http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
But it seems a bit of an overkill for my simple rectangle area.
Try this:
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
You can also use
<Button
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/image1"
android:drawableLeft="#drawable/image2t"
android:drawableRight="#drawable/image3"
android:drawableTop="#drawable/image4"
android:drawableTop="#drawable/image4"
android:textColor="#ffffff"
/>
Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/ImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
I'd like to see the following layout work:
--------------------------
| ----------- |
| |TextView1| |
| ----------- |
| ---------------------- |
| |EditText1 | |
| ---------------------- |
| ----------- |
| |TextView2| |
| ----------- |
| ---------------------- |
| |EditText2 | |
| ---------------------- |
| ----------- |
| |TextView3| |
| ----------- |
| ---------------------- |
| | | |
| | | |
| | | |
| | ImageView | |
| | | |
| | | |
| | | |
| |--------------------| |
| --------- -------- |
| |Button1||Button2| |
| --------- -------- |
| ---------------------| |
| | ButtonBar | |
| ---------------------- |
|------------------------|
My issue: I can't make Button1 and Button2 work in this layout. They either go below the ImageView, hidden behind the ButtonBar or they get shrunk to nothing between the bottom of the ImageView and the top of the ButtonBar.
The current XML-code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/footer" >
<TextView
android:id="#+id/textPostUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="user" />
<EditText
android:id="#+id/editPostUser"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textPostUser"
android:hint="user"
android:maxLength="40" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textPostComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editPostUser"
android:text="comment" />
<EditText
android:id="#+id/editPostComment"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textPostComment"
android:hint="comment"
android:maxLength="200"
android:maxLines="3" >
</EditText>
<TextView
android:id="#+id/textPostCharacterCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editPostComment"
android:text="characters"
android:textSize="5pt" />
<ImageView
android:id="#+id/imagePostResult"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/textPostCharacterCount"
android:src="#drawable/camera_icon" />
<Button
android:id="#+id/buttonPostRotateLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/imagePostResult"
android:text="left" />
<Button
android:id="#+id/buttonPostRotateRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/imagePostResult"
android:layout_toRightOf="#id/buttonPostRotateLeft"
android:text="right" />
</RelativeLayout>
<LinearLayout
android:id="#+id/footer"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonPostSave"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="save" />
</LinearLayout>
</RelativeLayout>
How do I make the left/right buttons appear below the imageview and above the buttonbar?
I'd like to at least keep the fill_parent in both height/width of the ImageView as it scales pretty nicely on different resolutions.
Your ImageView is set to fill_parent so there is no space left for the buttons below. You can switch the buttons and the imageview so the imageview takes all the space left when the buttons are already included:
<Button
android:id="#+id/buttonPostRotateLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="left" />
<Button
android:id="#+id/buttonPostRotateRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/buttonPostRotateLeft"
android:text="right" />
<ImageView
android:id="#+id/imagePostResult"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/buttonPostRotateLeft"
android:layout_below="#id/textPostCharacterCount"
android:src="#drawable/camera_icon" />
Why not putting the two buttons inside a horizontal LinearLayout?
Your buttons are set to android:layout_alignParentBottom="true", as well as the linear layout. The latter will hide the former since it comes last in the xml code.
Try putting your buttons in a linear layout and align it above the footer android:layout_above="#+id/footer"
I have a table row defined in XML file.
It contains 3 `LinearLayout' one on top of the other:
I would like to get this look:
|-------------------------------|
| |
| a |
| |
| |
|-------------------------------|
| |
| b |
|-------------------------------|
| |
| c |
|-------------------------------|
The "problem" is that the LinearLayout "a" might expand and be at different heights while "b" and "c" are always in the same height.
I would to find the maximum height of the LinearLayout's and to enforce this height to be the height of all the other LinearLayout's too, so I will get this look for each row:
|-------------------------------|
| |
| a |
| |
| |
|-------------------------------|
| |
| b |
| |
| |
|-------------------------------|
| |
| c |
| |
| |
|-------------------------------|
I tried using android:layout_weight with no success...
Any ideas?
I tried to implement this in one example.
Here is what I did :
<?xml version="1.0" encoding="utf-8"?>
<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="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ff0000"
>
<TextView
android:layout_width="30dip"
android:layout_height="wrap_content"
android:text="hjadsh haksj hasjk haksj hjkas hkjas hjkas hkjas "
android:textColor="#000000"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00ff00"
></LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#0000ff"
></LinearLayout>
</LinearLayout>
I used the textview in the first layout to show that it works as what you need.
You can also fixed the height of the layout b & c to make them of fixed height and vary layout a by setting layout_height:wrap_content
You can now customized it according to your need.
try this
<?xml version="1.0" encoding="utf-8"?>
<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="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00ffff"
></LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
></LinearLayout>
</LinearLayout>