How can I layout a Text with an icon exactly like this:
I did it with this Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="64dp"
android:layout_height="64dp">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:duplicateParentState="true"
android:src="#drawable/delete_icon" />
<TextView
android:id="#+id/txtLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:duplicateParentState="true"
android:text="xxx" />
</RelativeLayout>
But the Android guide says: Use compound drawables - A LinearLayout which contains an ImageView and a TextView can be more efficiently handled as a compound drawable.
I have tried, but I couldn't find the layout parameters (size for the image, different paddings for image and text) that I need.
<TextView
android:id="#+id/txtLabel"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal|bottom"
android:duplicateParentState="true"
android:drawableTop="#drawable/delete_icon"
android:paddingTop="8dp"
android:drawablePadding="8dp"
android:text="xxx" />
Here is the result (left with RelativeLayout, right with compound drawable):
If there is a better standard component which provides the necessary parameters, it's acceptable, too.
I tried to do the same.
I got this result (please note that the image has an "optical square", which is smaller than the physical image size):
I'm using my favourite method: the compound drawable.
But:
1 - I prepared some images at different resolutions, so that 32*32 is referred to a standard mdpi (160dpi) resolution, and scaling at different resolutions (xxhdpi is 96*96 px wide and tall)-
2 - I placed these images in the corresponding drawable folders (drawable-ldpi to drawable-xxhdpi).
3 - I corrected the layout a bit, to match.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_margin="0dp"
android:padding="0dp"
>
<TextView
android:id="#+id/txtLabel"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal|bottom"
android:padding="8dp"
android:drawableTop="#drawable/delete_icon"
android:drawablePadding="4dp"
android:text="XXX"
android:textSize="12sp"
/>
</RelativeLayout>
I used all caps letters to better see the spacing between the text and the drawable.
Does it fit your needs?
Related
I read this Android Studio documentation: https://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
Well the documentation is pretty obvious, to support different screens.
Use match_parent, wrap_content, create layout-sw folders.. Hmm, eazy task.. Yep, I made 5 layout-sw300dp-700dp folders, every layout owns match-parent and wrap content characteristic.. But somehow my image isn't getting scaled and all I want to do is to scale the image in one of my LinearLayouts..
I know theres a lot of answer out there on the forum, but as you can see its not confusing for me, but I'm sure I'm missing something important to end the screen support..
Should I create different size images and place them in a drawable folder?
Because whenever I'm reviewing another layout file for example sw600dp the image isnt scaled there.. Even the layouts aren't getting scaled..
Should I configure every layout-sw folders? I mean to place bigger image, to resize layouts.
I need to fill up the LinearLayout with the image. Now there's white spaces on the left and right side of the LinearLayout
The code belongs to the RelativeLayout, which has match-parents aswell.
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:padding="15dp"
android:text="This is random text"
android:textColor="#000000"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.39"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:id="#+id/linearLayout"
android:layout_above="#+id/linearLayout2"
android:layout_alignParentEnd="true">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:id="#+id/linearLayout2"
android:layout_above="#+id/linearLayout4"
android:layout_alignParentStart="true"
android:layout_marginTop="15dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:layout_marginTop="15dp"
android:id="#+id/linearLayout4"
android:layout_above="#+id/linearLayout5"
android:layout_alignParentStart="true">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="15dp"
android:id="#+id/linearLayout5"
android:gravity="fill">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/info1"
android:layout_gravity="fill_horizontal"
android:contentDescription="" />
</LinearLayout>
I am very very new to developing with Android on Eclipse.
I am making a basic relative layout and have a title, welcome msg, image, final text. in portrait mode.
The image seems to be the issue. When I am in a 2.7" screen the view bounds extend to the left and the right which is fine as there is nothing there. However if I move to a 7" or 10" view the image bounds extend up and down which pushes the text on top up and on the bottom down. So now there is a rather large chunk of white space.
http://imgur.com/GeM4psS this is the image when in 7-10" portrait (see the blue bounds pushing text away)
http://imgur.com/16JCtSy this is the image when in 2.7" and now the bound push to the left and right but don't cause any issues.
Optimally I would like for the image to just be always within those bounds. Below is all the xml involved. No java was changed. Appreciate any help. Thanks. A heads up if I change it to fitxy it stretches the image.
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="cs.play.quotably.MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/app_name"
android:textSize="30sp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/textView3"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/fdr"
android:scaleType="fitCenter"
android:src="#drawable/fdr" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/welcome"
android:textSize="15sp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/quote1"
android:textSize="15sp" />
</RelativeLayout>
Thanks for any and all help!!
you should try this one.
change the width and height to 30dp and it is not a fixed value.
just try different values like 40dp and 50dp.
and once you satisfy test it on both devices.
it should work
<ImageView
android:id="#+id/imageView1"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_above="#id/textView3"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/fdr"
android:scaleType="fitCenter"
android:src="#drawable/fdr" />
I still dont really get it how many space layouts take.
I have the following xml.
The inner LinearLayout's for the bottom space height is set to wrap_content, so it should take the height of the maximum height in there. Which is 52dp. And there is the ImageButton which is set to wrap_content, so the button should be centered vertically on the right side, since its an 24dp image (in xhdpi it has 32x32 pixels). So why is it stretched over the full height like displayed here?:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp">
<de.ph1b.audiobook.utils.SquareImageView
android:id="#+id/cover"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_gravity="bottom">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="52dp"
android:paddingLeft="16dp"
android:maxLines="2"
android:ellipsize="end"
android:paddingRight="16dp"
android:gravity="center_vertical"
android:textSize="16sp" />
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
</LinearLayout>
</LinearLayout>
either #drawable/ic_more_vert_grey600_24dp is larger than you think or borderlessButtonStyle has a larger background.
Please check the size. I have replicated the behavior and the ImageButton is set to wrap_content and is centered.
change your image button code
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:scaleType="fitXY"
android:gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
Here i am trying to handle different screens ,These are several screens i am trying to handle ,Here if i adjust for one screen remaining screens getting error ,not getting what is problem
here is
Here is my code
<?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:background="#drawable/transactionpagebg" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="160dp"
android:gravity="center"
android:paddingLeft="50dp"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:inputType="number" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="150dp"
android:layout_height="50dp" />
</LinearLayout>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/saveButton"
android:layout_width="113px"
android:layout_height="wrap_content"
android:layout_x="61dp"
android:layout_y="330dp"
android:background="#drawable/savebutton" />
<Button
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="208dp"
android:layout_y="330dp"
android:background="#drawable/settingbutton" />
</AbsoluteLayout>
</RelativeLayout>
to do as it need to be, you need to have support for different screen sizes you need to have different layouts, and also some changes in your manifest file...
check this question How to support different screen size in android
and this link http://developer.android.com/guide/practices/screens_support.html
There are many ways to make each view look right on various screens. However, I have found two methods are working best for me (at the moment):
To get the views to dynamically set their screen positions, wrap the widgets in a LinearLayout (LL), and put those LLs in a single LL. Set the weight of the inner LL to 1, and they will space themselves equally within the parent LL. This works for horizontal and vertical layouts. The distance between the widgets gets adjusted automatically by the OS.
create different dimens.xml folders/files for the different screen sizes (small, medium, large) and further differentiate them by density of needed (mdpi, hdpi, xhdpi, etc.). This way you can set margins, paddings, font sizes, for each size/density to get what you want.
EDIT: I see you put "TRANSACTION" in the background drawable? You can't do that! You need to create an image with just the text, and put it in an ImageView at the top of the layout. That way, you can set its position and size as needed for different screens, and make the other widgets adjust their positions relative to that image.
Even better would be to find a free font (ttf file) you can use that matches what you want, and put it in a TextView.
Here is a quick example of your layout with the ideas I mentioned. You would put the margins and font sizes in a dimens.xml file, so that you can adjust them.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ee"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/hh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="36dp"
android:text="TRANSACTION"
android:textColor="#ffffff"
android:textSize="28sp" />
<TextView
android:id="#+id/test_textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/test_linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/test_editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:background="#ffffff"
android:inputType="number" />
<Spinner
android:id="#+id/test_spinner1"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#999999" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/test_saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:text="Save" />
<Button
android:id="#+id/test_settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
There has been a flaw on my design for most of .xml files where the sizes usually goes larger on some screens and some on lower screens. I use px(Pixels).
I know that this might be a bad choice on my end because new phones will end up with more pixel ratio. eg Samsung Galaxy Nexus making all text into tiny text.
What would be a far more suitable type to use for future phones to come?
Extra:
I have been using linear layout for a long time but now that I need a scrolling for long menu I designed a RelativeLayout that nested a ScrollView which ScrollView nests a linear layout. Would it be a better Option to nest a tableLayout to have more control over the view?
Didn't want to flood the question screen cause it would look ugly.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tab_tv_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/auto_Action"
android:background="#666666"
android:text="#string/options_dialog_menu_Action"
android:textSize="27px"
/>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="#+id/FirstOption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/manual_Action"
android:layout_below="#+id/tab_tv_one"
android:text="#string/options_dialog_menu_Auto_Action"
android:textSize="27px" />
<RadioButton
android:id="#+id/SecondOption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tab_tv_two"
android:layout_below="#+id/auto_Action"
android:text="#string/options_dialog_menu_Manual_Action"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<RadioButton
android:id="#+id/ThirdOption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tab_tv_two"
android:layout_below="#+id/manual_Action"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
</RadioGroup>
<TextView
android:id="#+id/tab_tv_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/text_size"
android:layout_below="#+id/manual_Action"
android:background="#666666"
android:text="#string/options_dialog_menu_Layout_Options"
android:textSize="27px"
/>
<TextView
android:id="#+id/text_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/background_clr"
android:layout_below="#+id/tab_tv_two"
android:text="#string/options_dialog_menu_Text_Size"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<TextView
android:id="#+id/Options_clr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/brightness_ctrl"
android:layout_below="#+id/text_size"
android:text="#string/options_dialog_menu_Color_Options"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<TextView
android:id="#+id/brightness_ctrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/background_clr"
android:text="#string/options_dialog_menu_Brightness_color"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
<TextView
android:id="#+id/backToBasics"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/brightness_ctrl"
android:text="#string/options_dialog_menu_Back_To_Basics"
android:textSize="27px"
android:onClick="onClick"
android:clickable="true"
/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Don't use pixels, use dp (aka dip aka density independent pixels). Otherwise, as you noted, size will be dependent on density, which isn't good.
Its not just the galaxy nexus, ldpi phones will look different than mdpi, which will look different than hdpi etc. There is rarely any good reason to use px sizes, particularly with regards to view dimensions.
With regards to your extra question it depends entirely on what you want your layout to look like. Without seeing code and/or at least knowing what you want to occur (vs what you see now), no one is going to really be able to answer that.