I want to create layout similar to one attached. The left hand side needs to be scrolled text occupying 75% of screen horizontally. The remaining 25% will consists of few icons stacked vertically and a button that should align at the bottom.
But I can't seem to get the working.
http://i.imgur.com/TzzBy9h.png
I would appreicate any help in getting this layout stuff right, my current layout looks like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/card_details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxLines="50"
android:layout_weight="0.7"
android:gravity="bottom"
android:text="" >
</TextView>
<ImageView
android:id="#+id/photo_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:minHeight="84dp"
android:minWidth="84dp"
android:scaleType="centerCrop" />
</LinearLayout>
</ScrollView>
<LinearLayout android:gravity="center" android:orientation="horizontal"
android:padding="4.0dip" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/read_id_btn"
style="#style/PageButton"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:text="#string/read_id" />
</LinearLayout>
</LinearLayout>
~
Try weigth "2" and "1".
Good luck with it.
Try This code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginBottom="15dp"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
Related
I have movies Application
and I am working in the details of the movie layout
now I have two posters for each movie (orginal poster and backdrop poster)
I am working to make some thing like this:
I am trying to do that but I have problem which is: the backdrop poster came to the front of orginal poster and hide it (backdrop poster hide the orginal poster)
how I can send the original poster to the front of backdrop poster
this is my code:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#ffffff"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<ImageView
android:id="#+id/iv_movie_poster1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="67dp"
android:src="#drawable/ic_launcher_background" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/relativeLayout2"
>
<ImageView
android:id="#+id/iv_movie_poster_back"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher_background" />
<!--android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"-->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iv_movie_poster1"
android:layout_centerHorizontal="true"
android:background="#ffff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="8dp"
android:id="#+id/relativeLayout2">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp">
<TextView
android:id="#+id/tv_movie_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#57486c"
android:padding="16dp"
android:textSize="36sp"
tools:text="The Hunger Games" />
<TextView
android:id="#+id/tv_movie_lang"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="italic"
tools:text="English" />
<TextView
android:id="#+id/tv_movie_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="7.4/10" />
<TextView
android:id="#+id/tv_movie_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
tools:text="2015"
/>
<TextView
android:id="#+id/tv_movie_overview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
tools:text="Katniss Everdeen and Peeta Mellark become targets of the Capitol after their victory in the 74th Hunger Games sparks a rebellion in the Districts of Panem. " />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
and thankyou
Made the layout i think it will fulfill your requirement. Using Frame Layout overlay the poster image on the back image and accordingly manage.
Follow this XML part for upper layer. Make changes accordingly relate to images you used.
<?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:orientation="vertical">
<LinearLayout
android:id="#+id/llMain"
android:layout_width="match_parent"
android:layout_height="280dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<ImageView
android:id="#+id/iv_movie_poster1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/testimage" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/iv_movie_poster_back"
android:layout_width="150dp"
android:layout_height="150dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/com_facebook_button_icon_blue" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
Here you can view the upper layer output.
I just can't seem to find a way to fit the photo onto my home page screen, I've tried many different ways but it wasn't successful. I have an image that pushes the layout that is under it and squeezes the buttons on the screen. Is there any way I can auto resize the height it for different screens? I only need the height since the width should be match_parent. Below is the xml file.
<?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="#color/white"
android:orientation="vertical"
>
<RelativeLayout
android:id="#+id/headerLayout"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/nav_bar_homepage" >
<TextView
android:id="#+id/pageTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="WELCOME!" />
<ImageView
android:id="#+id/hiddenIcDrawer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:src="#drawable/nav_icon"
android:visibility="invisible" />
</RelativeLayout>
<ImageView
android:id="#+id/horLine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/headerLayout"
android:scaleType="center"
android:src="#drawable/line_big_white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:scaleType="fitStart" >
<ImageView
android:id="#+id/image_homepage_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="center_horizontal"
android:src="#drawable/image_homepage"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_margin="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/field_red_homepage"
android:orientation="vertical"
android:scaleType="fitXY" >
<ImageView
android:id="#+id/logo_homep"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="10dp"
android:scaleType="fitXY"
android:src="#drawable/logo_homepage" />
<ImageView
android:id="#+id/redeembytton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/btn_redeemrewards"
android:scaleType="fitXY" >
</ImageView>
<ImageView
android:id="#+id/orderbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="15dp"
android:background="#drawable/btn_orderonline"
android:scaleType="fitXY" >
</ImageView>
<ImageView
android:id="#+id/rewardsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="15dp"
android:background="#drawable/btn_earnrewards"
android:scaleType="fitXY" >
</ImageView>
<ImageView
android:id="#+id/referFriendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="10dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="15dp"
android:background="#drawable/btn_referafriend"
android:scaleType="fitXY" >
</ImageView>
</LinearLayout>
</LinearLayout>
Wrap you xml code into ScrollView if you are okay with scrolling down to reach your contents under ImageView. If you don't want to scroll down, it is best to use "weight" attribute. I am giving you an idea how to implement it in your code.
Let's say the height of the whole screen is 1. You have an image and a button to put on the screen for all devices. So split the screen into two parts... 0.8 for imageview and 0.2 for the button. You can use the code below to get this result.
<?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" <!-- Important >
android:orientation="vertical"
android:layout_weight=".8" > <!-- 80% of your screen size>
<!-- Your ImageView >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp" <!-- Important >
android:orientation="vertical"
android:layout_weight=".2" > <!-- 20% of your screen size>
<!-- Your Button >
</LinearLayout>
</LinearLayout>
Try this
I think you should use
android:layout-weight="1" for adjusting the height according to different devices.use it in your <ImageLayout/>.
I'm trying to create a layout that contains a text field (placed at the top of the screen), and below it, i need to display images in a form of table of 2x2. I'd like to show all images to be with the same size.
I've used relative layout, with nested table layout, but from some reason i can't have the imageview on the same size. it's alwayes displaying them in different size.
...
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_below="#+id/TextView">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="???"
android:layout_height="???"
android:layout_weight="1"
</ImageView>
<ImageView
android:id="#+id/imageView2"
android:layout_width="???"
android:layout_height="???"
android:layout_weight="1">
</ImageView>
</TableRow>
<TableRow>
android:id="#+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="???"
android:layout_height="???"
android:layout_weight="1" >
</ImageView>
<ImageView
android:id="#+id/imageView4"
android:layout_width="???"
android:layout_height="???"
android:layout_weight="1" >
</ImageView>
</TableRow>
thanks!
Instead of TableLayout, you could use LinearLayout with weight as this:
<?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:baselineAligned="false"
android:orientation="vertical"
android:weightSum="2" >
<TextView
android:id="#+id/textViewAnim"
android:text="#string/my_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- 2 images in a row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="2" >
<ImageView
android:id="#+id/image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/my_image" />
<ImageView
android:id="#+id/image2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/my_image" />
</LinearLayout>
<!-- ............... -->
<!-- 2 images in a row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="2" >
<ImageView
android:id="#+id/image3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/my_image" />
<ImageView
android:id="#+id/image4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/my_image" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="409dp"
android:layout_height="396dp"
android:baselineAligned="false"
android:orientation="vertical"
android:weightSum="2"
android:layout_marginTop="50dp"
android:layout_marginLeft="30dp">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/animals" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/aquatic" />
</LinearLayout>
<LinearLayout
android:layout_width="458dp"
android:layout_height="396dp"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="vertical"
android:weightSum="2"
android:layout_marginTop="50dp"
android:layout_marginLeft="30dp">
<ImageView
android:id="#+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/flowers" />
<ImageView
android:id="#+id/image4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/birds" />
</LinearLayout>
I have a simple screen with 4 buttons and their images:
and when I change it to landscape mode the images get cropped and the text is lost:
I am currently using a linear layout as follows:
<?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:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:background="#drawable/rings" >
<LinearLayout
android:id="#+id/row1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="top|fill_vertical"
android:orientation="horizontal" >
<Button
android:id="#+id/classesButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:contentDescription="#string/title_activity_class_list"
android:drawableBottom="#drawable/ic_classes"
android:onClick="viewClasses"
android:scaleType="fitCenter"
android:text="#string/classes"
android:minLines="1"
android:textColor="#android:color/primary_text_light" />
<Button
android:id="#+id/studentsButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:drawableBottom="#drawable/ic_students"
android:onClick="viewStudents"
android:scaleType="fitCenter"
android:text="#string/students"
android:minLines="1"
android:textColor="#android:color/primary_text_light" />
</LinearLayout>
<LinearLayout
android:id="#+id/row2"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="bottom|fill_vertical"
android:orientation="horizontal" >
<Button
android:id="#+id/levelsButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:contentDescription="#string/levels"
android:drawableBottom="#drawable/ic_levels"
android:minLines="1"
android:onClick="viewLevels"
android:scaleType="fitCenter"
android:text="#string/levels"
android:textColor="#android:color/primary_text_light" />
<Button
android:id="#+id/skillsButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:contentDescription="#string/skills"
android:drawableBottom="#drawable/ic_skills"
android:onClick="viewSkills"
android:scaleType="fitCenter"
android:text="#string/skills"
android:minLines="1"
android:textColor="#android:color/primary_text_light" />
</LinearLayout>
</LinearLayout>
Update I changed the scale type to fitCenter and expected that to solve the issue but is has not. I am truly puzzled why scaling doesn't resize the image to fit inside the layout when it seems like others have found it does scale images to fit on screens.
I have experimented with using a relative layout but can't find an easy way to have the 4 buttons fill the screen equally.
Thanks in advance, I've spent far too much time on this!
You could change the Scale Type of the images to see which option would work best for you (may not work due to the fill_parent & Weight of Images).
You could make TextViews and put the Text above the images instead of having the button already with text (personal preference).
If you would link me with the four images I could figure it out for you :)
Markus
I finally figured out the layout which results in a scaled image that is visible along with the corresponding text. It took a lot of trial and error playing with Buttons, ImageButtons and ImageViews. The layout I am now using contains child linear layouts that are clickable which contains a text and image view.
<?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:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/rings"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/row1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:baselineAligned="false"
android:gravity="top|fill_vertical"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/classesLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:clickable="true"
android:onClick="viewClasses"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingTop="#dimen/input_padding"
android:text="#string/classes"
android:textColor="#android:color/primary_text_light" />
<ImageView
android:id="#+id/classesIcon"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/ic_classes"
android:contentDescription="#string/classes"
android:minLines="1"
android:scaleType="fitCenter"
android:textColor="#android:color/primary_text_light" />
</LinearLayout>
<LinearLayout
android:id="#+id/studentsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:clickable="true"
android:onClick="viewStudents"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingTop="#dimen/input_padding"
android:text="#string/students"
android:textColor="#android:color/primary_text_light" />
<ImageView
android:id="#+id/studentsIcon"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/ic_students"
android:contentDescription="#string/students"
android:minLines="1"
android:scaleType="fitCenter"
android:textColor="#android:color/primary_text_light" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/row2"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:baselineAligned="false"
android:gravity="bottom|fill_vertical"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/levelsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:clickable="true"
android:onClick="viewLevels"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingTop="#dimen/input_padding"
android:text="#string/levels"
android:textColor="#android:color/primary_text_light" />
<ImageView
android:id="#+id/levelsButton"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/ic_levels"
android:contentDescription="#string/levels"
android:minLines="1"
android:scaleType="fitCenter"
android:textColor="#android:color/primary_text_light" />
</LinearLayout>
<LinearLayout
android:id="#+id/skillsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:drawable/menuitem_background"
android:clickable="true"
android:onClick="viewSkills"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingTop="#dimen/input_padding"
android:text="#string/skills"
android:textColor="#android:color/primary_text_light" />
<ImageView
android:id="#+id/skillsButton"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:contentDescription="#string/skills"
android:src="#drawable/ic_skills"
android:minLines="1"
android:scaleType="fitCenter"
android:textColor="#android:color/primary_text_light" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
The resulting portrait and landscape renderings are:
I have added supports-screens to manifest, all UI elements values are in dip.
Why then I'm changing screen type in Graphical Layout my layout doesn't re-sizes?
I'm using LinearLayout, maybe better way is RelativeLayout?
Please help;
My Layout code:
<?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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#000000">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerInParent="true"
android:text="Login" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/Image"
android:layout_width="280dip"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_marginTop="20dip"
android:layout_height="35dip"
android:src="#+drawable/logo_big"/>
<EditText
android:id="#+id/LoginName"
android:hint="Email"
android:layout_marginTop="20dip"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:inputType="textEmailAddress"/>
<EditText
android:hint="Password"
android:layout_marginTop="0dip"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:inputType="textPassword"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:password="true"
android:id="#+id/Password"/>
<Button
android:id="#+id/LogIn"
android:layout_marginTop="20dip"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:text="#+string/LogIn"/>
<TextView
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:gravity="center"
android:layout_marginTop="10dip"
android:textStyle="bold"
android:textSize="18dp"
android:text="#+string/DontHaveAnAccount"/>
<Button
android:id="#+id/SingUpNow"
android:layout_width="fill_parent"
android:layout_marginTop="10dip"
android:layout_height="45dip"
android:src="#+drawable/gray_button"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:background="#+drawable/primary_button"
android:clickable="true"
android:text="#+string/SingUpNow"/>
<Button
android:textColor="#FFFFFF"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_marginTop="10dip"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:id="#+id/ForgotYourPassword"
android:background="#+drawable/secondary_button"
android:text="#+string/ForgotYourPassword"/>
</LinearLayout>
</LinearLayout>
Help;
This tips maybe help you...
Avoid the use of graphical layout, just check you code there will be some hard code value or maybe there Absolute Layout..
To re-size the screen layout use Relative Layout... that will be fit for all screen..