Friends,
I am new to android so I could use your help. I want to implement a gallery where the user can flip between two images (presented in ImageView1 below). The display that I want is given by:
[TextView1] [TextView2]
[ImageView1]
[ImageView2]
Where [TextView1] and [TextView2] are static texts that do not change with flipping between the two images. [ImageView1] is the actual image that is displayed and [ImageView2] is an image indicator (i.e., image one is selected).
I am using ViewPager to bound the images to [ImageView1], which is given below:
<?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="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:id="#+id/image_to_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:contentDescription="#string/image_description"
android:scaleType="fitCenter" />
</RelativeLayout>
The main fragment where the images are shown:
<?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="wrap_content" >
<TextView
android:id="#+id/name_of_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
<TextView
android:id="#+id/date_taken"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingBottom="10dp"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
<android.support.v4.view.ViewPager
android:id="#+id/details_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
<LinearLayout
android:id="#+id/page_indicator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"/>
</RelativeLayout>
The output from the code is:
[TextView1] [TextView2]
[ImageView2]
[ImageView1]
Where the image and page indicator have reversed positions.
Any ideas how I can fix this?
I do not want any vertical space among the views. I have used a LinearLayout instead of the RelativeLayout for the main fragment, but that leaves space among the views depending on the screen size.
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/name_of_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/date_taken"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/card_text_color"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/details_image"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingBottom="10dp"
android:paddingTop="10dp" />
<LinearLayout
android:id="#+id/page_indicator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"/>
</LinearLayout>
Do This
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView1" />
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
Change your code with this
Related
My activity has 3 elements. Linearlayout, Gridview and the Linearlayout. See picture. How to make Gridview items is completely visible even if there is a scroll on all screens? p.s. Sorry for my English.
Well use this code for such a layout design...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTopLay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/btn_br_color"
android:gravity="center"
android:layout_alignParentTop="true"
android:padding="3dp">
<TextView
android:id="#+id/primiumGameNameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="4"
android:text="Layout1"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
<GridView
android:id="#+id/gridViewID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:layout_below="#+id/layoutTopLay"
android:layout_above="#+id/layoutBottomLay"
android:paddingRight="5dp"
android:paddingTop="3dp" />
<LinearLayout
android:id="#+id/layoutBottomLay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/btn_br_color"
android:gravity="center"
android:layout_alignParentBottom="true"
android:padding="3dp">
<TextView
android:id="#+id/layoutBottomText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:maxLines="24"
android:text="Layout2"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
Another way how to do it is to use layout_weight attribute:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_dark"
/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:background="#android:color/white"
>
<!-- put content here -->
</GridLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_dark"
/>
</LinearLayout>
I'm new to android and I would like to achieve something like this, where all thins are centered in their own space.
representative image
I've this code... How can I change it, and why?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp"
tools:context="se.avatarcontrol.MainActivity">
<TextView
android:id="#+id/weather"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/light"
android:layout_marginTop="15dp"
android:text="RAINY" />
<Button
android:id="#+id/light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Light OFF" />
<TextView
android:id="#+id/frontText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/sideText"
android:text="FrontView"/>
<TextView
android:id="#+id/sideText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/light"
android:layout_marginTop="15dp"
android:layout_alignParentRight="true"
android:text="SideView" />
<ImageView
android:id="#+id/frontImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android: android:layout_below="#id/frontText"
android:src="**somesource**" />
<ImageView
android:id="#+id/sideImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sideText"
android:layout_alignParentRight="true"
android:src="**othersource**"/>
</RelativeLayout>
Another thing would be how can my ImageViews fill all the space whithout overlapping each other?
please use FrameLayout or LinearLayout because it's lighter than RelativeLayout.
To achieve what you want, you should do something like :
<?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">
<!-- Weather light Layout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:src="#mipmap/ic_launcher_round" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Light" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<!-- Front + Image Layout-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Front" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Image" />
</LinearLayout>
<!-- Side + Image Layout-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Side" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Image" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
This is the structure. Just adapt your padding / margin / ids and layout_height and width. For your case, i used layout_weight which is useful to specify a size ratio between multiple views.
I try to show multiple data on an android list view screen, but my problem is the data keeps breaking the column lines instead of showing up in proper columns.
Here is my XML:
<ListView
android:id="#+id/listView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:choiceMode="singleChoice"
android:textAlignment="center"/>
</RelativeLayout>
Here is how the rows are defined:
<?xml version="1.0" encoding="utf-8"?>
<!-- row.xml -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingTop="4dip"
android:paddingBottom="6dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
<TextView android:id="#+id/FROM_CELL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"/>
<TextView android:id="#+id/FROMTIME_CELL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"/>
<TextView android:id="#+id/TOTIME_CELL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"/>
<TextView android:id="#+id/TITLE_CELL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"/>
</LinearLayout>
The different columns on the screen never come up on the same column but are shifted to the right by the exact length of the data in its preceeding column. Please let me know how to take care of this.
Thanks in advance :)
try this it will work fine ...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal" >
<TextView
android:id="#+id/txt_userName"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight="2"
android:gravity="center" />
<TextView
android:id="#+id/txt_fName"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight="2" />
<TextView
android:id="#+id/txt_lName"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight="3.51"
android:gravity="left" />
</LinearLayout>
and in second xml try this code
<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"
android:gravity="center_horizontal" >
<View
android:id="#+id/a"
android:layout_width="match_parent"
android:layout_height="0dp"
android:paddingBottom="10dp" />
<ListView
android:id="#+id/List"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Hope it hepls ....
I have a ViewPager which shows Fragments and I want that on the top, and a simple LinearLayout on the bottom. But, the Fragments are overlapping the layout at the bottom. I want the Fragment to end right about the LinearLayout. See picture:
XML with ViewPager
<?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.support.v4.view.ViewPager
android:id="#+id/steps_pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/finish_checklist_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/btn_white_glossy"
android:layout_margin="20dp"
android:text="#string/finish_checklist" />
</LinearLayout>
XML of Fragment
<?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:padding="20dp"
android:background="#fff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="26sp"
android:text="#string/step_order_label" />
<TextView
android:id="#+id/step_order"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="26sp" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#000" />
<TextView
android:id="#+id/step_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="26sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="40dp"
android:textSize="20sp"
android:text="#string/result_label" />
<TextView
android:id="#+id/result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp" />
</LinearLayout>
<!-- YES/NO BUTTONS -->
<Button
android:id="#+id/button_no"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/btn_white_glossy"
android:padding="20dp"
android:visibility="gone"
android:text="#string/button_no" />
<Button
android:id="#+id/button_yes"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button_no"
android:background="#drawable/btn_white_glossy"
android:padding="20dp"
android:layout_marginBottom="30dp"
android:visibility="gone"
android:text="#string/button_yes" />
<!-- END YES/NO BUTTONS -->
I used android:layout_below element here.
layout_below your ViewPager id.
and this layout as vertical
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill_vertical"
android:orientation="vertical" >
In all your xml files, should define the background color for it, it will solve the problem :
Add this android:background="#android:color/black" in to the View tag you defined.
p/s : This case only avoid Background was overlapped.
Given below is the screenshot of my screen which contains a progressbar. As you can see from the screen, the spacing between the left and right of the screens and this progressbar is not equal. It is less towards the right. How can I make this the same as the left with less gap?
Any help is appreciated
Code and screenshot below:
<?xml version="1.0" encoding="utf-8"?>
<TableRow 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="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blue"
android:textSize="18sp" />
<TextView
android:id="#+id/textLink"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:textSize="16sp" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:progressDrawable="#drawable/green_progress_color" />
</LinearLayout>
</TableRow>
EDIT
Main Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/bottom_layout_installing"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/total_progress" />
<ProgressBar
android:id="#+id/total_installed_package_installer"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_margin="10dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<Button
android:id="#+id/buttonAbort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_bg"
android:onClick="onAbortClick"
android:text="#string/abort"
android:textColor="#android:color/white" />
<Button
android:id="#+id/buttonLaunch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_bg"
android:text="#string/install"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_layout_installing" >
<TableLayout
android:id="#+id/installingListview"
style="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:groupIndicator="#android:color/transparent"
android:listSelector="#android:color/transparent" >
</TableLayout>
</ScrollView>
Looks like your '#drawable/green_progress_color' doesn't stretch. Try with '#android:drawable/progress_horizontal' to check if this is to your layout or your progress drawable.
Don't use a TableRow just on its own like that, remove it and just have the LinearLayout. The TableRow is causing the problem. TableRow must always be nested within a TableLayout(http://developer.android.com/reference/android/widget/TableRow.html)
<?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" >
<TextView
android:id="#+id/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blue"
android:textSize="18sp" />
<TextView
android:id="#+id/textLink"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:textSize="16sp" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="10dp"
android:progressDrawable="#drawable/green_progress_color" />
</LinearLayout>