I have a little issue with my menu. I have 3 Textviews spanning the full width of the device. Each Textview should contain text and an image above.
Problems:
The image always shows against the border of my textview
Beneath the textview open space is added (if I remove the image, the space below is gone too)
I want the icon and the text to be aligned in the center of my textview as '1'.
Current partial code: (the icon is added outside the xml so not visible in this code, and I removed some code that has nothing to do with this part)
<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="#color/backgroundBlue"
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=".MainActivity" >
<LinearLayout
android:id="#+id/llMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<com.olbrecht.thescienceofwinning.SquareTextView
android:id="#+id/menu_ebook"
android:text="#string/menu_ebook"
android:textColor="#color/white"
android:layout_width="0dp"
android:layout_height ="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:background="#color/menuBlue" />
<com.olbrecht.thescienceofwinning.SquareTextView
android:id="#+id/menu_library"
android:text="#string/menu_library"
android:textColor="#color/white"
android:layout_width="0dp"
android:layout_height ="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:background="#color/menuBlue"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp" />
<com.olbrecht.thescienceofwinning.SquareTextView
android:id="#+id/menu_faq"
android:text="#string/menu_faq"
android:textColor="#color/white"
android:layout_width="0dp"
android:layout_height ="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:background="#color/menuBlue" />
</LinearLayout>
</RelativeLayout>
Notice: The size of my textview is different on each device, depending on the width, the height gets matched equal to the width, making a square.
Solved by changing android:gravity="center_horizontal" and adding android:layout_gravity="bottom"
and adding the following code to create the icons and calculating the height to define the topside padding:
TextView tv_ebook = (TextView)findViewById(R.id.menu_ebook);
tv_ebook.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ebook_icon, 0, 0);
BitmapDrawable bd_ebook=(BitmapDrawable) this.getResources().getDrawable(R.drawable.ebook_icon);
int h_ebook = bd_ebook.getBitmap().getHeight();
tv_ebook.setPadding(0, h_ebook, 0, 0);
Related
I have a vertical LinearLayout with 2 TextSwitcher inside. Sometimes only the first one(#+id/ts1) will show, sometimes both of them will show on screen. The font size for ts1 is 20, for ts2 is 16.
<LinearLayout
android:id="#+id/linearLayout1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center_vertical"
android:focusable="false"
android:layout_marginLeft="#dimen/dimen_left1"
android:visibility="gone">
<TextSwitcher
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:id="#+id/ts1"/>
<TextSwitcher
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:id="#+id/ts2"/>
</LinearLayout>
When I tested it, when both of them showed on screen, it worked fine, but when there's only ts1 shown, the text is not centered vertically, it's more like on the top vertically instead of centered. I programmatically set the visibility of these 2 TextSwitchers.
Does anyone know why this happens?
Thanks!!!
Setting the layout_gravity on TextSwitchers does not change the text android:gravity of the underlying TextViews. You can override the default TextViews that TextSwitchers use by putting them in your XML. From there, you can set the android:layout_gravity or android:gravity on them to center the text vertically. This should work:
<TextSwitcher
android:id="#+id/ts1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
</TextSwitcher>
<TextSwitcher
android:id="#+id/ts2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
</TextSwitcher>
You need to add gravity option to TextView, not the TextSwitcher.
For example, you can add layout_width, layout_height, and gravity option dynamically.
mSwitcher1 = (TextSwitcher) findViewById(R.id.textSwitcher1);
mSwitcher1.setFactory(new ViewSwitcher.ViewFactory() {
public View makeView() {
TextView myText = new TextView(MainActivity.this);
myText.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
myText.setTextSize(36);
myText.setTextColor(Color.BLUE);
// Add this
myText.setGravity(Gravity.CENTER);
// Add this
myText.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
return myText;
}
});
Have you tried using the ConstraintLayout? Using it may help you out. If you give more information on what the behavior of everything needs to be, I can give you a code example.
The code is a simple xml file containing a linear layout.Inside the linear layout , I have two text Views and a lnother linear layout, containing a button.
I want to set the font size equal to height of the textview. We get the height using weight and weight sum method.
<?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/orange"
android:weightSum="100"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="45"
android:text="Coming Soon"
android:gravity="center_vertical"
android:background="#color/mainscreen" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="10"
android:text="TextView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="45"
android:background="#color/mainscreen">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
You can achieve this programatically.
TextView defaultTextView = new TextView(context);
float sourceTextSize = defaultTextView.getTextSize();
TextView.setTextSize(sourceTextSize/getResources().getDisplayMetrics().density);
The defaultTextView.getTextSize() returns size in pixels and setTextSize(size) takes input as sp, So your text becomes bigger.
Here, instead of directly setting up the text size, first we are converting them according to density.
Draw a shape drawable for textview .
<solid android:color="#color/your_background_coler"/>
and put it in textview background attribute.
We can not set text size like wrap_content,fill_parent or match_parent
as like textview height so, if you need to set text size equals to
Textview height than you need to go for fix textview height and text
size like....
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="#string/hello_world"
android:textSize="50dp"/>
I'm trying to build an android application and I've created a screen with a table layout and added to the first table row an image view and two large texts, to the second row I've added one button.
When I change the text of the button it automatically changes the size of the image view above to match the size of the button.
Here is the code:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
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=".ChildInfoActivity" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:contentDescription="#string/child_info_image_descreption" />
<TextView
android:id="#+id/childInfoNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name_text_view"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/childInfoHasArrivedTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/has_arrived_text_view"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/more_info_button"
android:layout_weight="1" />
</TableRow>
why is that?
The reason is because when using TableLayout, each TableRow will have same size for each same column. Since the ImageView and Button are both on column 0, everything that affects Button's width will also affect ImageView's width.
If you permit the Button to span over many columns, add android:layout_span="2" to the Button. Else, use different layout, such as LinearLayout or RelativeLayout.
Because your row item, which holds imageView and textViews, has "wrap_content" value as height. So probably when your texts' heights getting bigger than your imageviews it increases its parent height as well.
You may try to put imageView and textViews inside a relativeLayout and wrap textViews with imageViews height and then put that relativeLayout into row item. It will be nested, but i think still it is better than given exact size because that way it wouldn't be seen so good on some devices...
Your buttons have
android:layout_width="wrap_content". If you set
android:layout_width="100dp"
then your width won't be dynamic.
remove android:layout_gravity="center_vertical" and as u have given added android:layout_weight="1" to button add this line to other components also
This is what is expected to come-----
The first text view:
Fox Pro
Drag
Main View Item
This is what is coming-----
And the other text view:
Fox Pro
Drag
Main View Item
So if the text is long enough to certain limit, it is coming wrapped in a next line.
Please note that the problem is only coming in the higher ppi 7inch device(~213 ppi).
The same thing is coming fine in lower ppi 7inch device(~160 ppi).
I tried to do the following programatically,
setting the width to full match_parent-------
DisplayMetrics dm = new DisplayMetrics();
// Display device dpi value of Y in pixels
int screenDPIy = (int)dm.ydpi;
if(screenDPIy > 180)
{
entrytype.setTextSize(14);
entrydate.setTextSize(12);
entrytype.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
entrydate.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
}
else
{
entrytype.setTextSize(16);
entrydate.setTextSize(14);
}
No Success.
My Layout xml:
<?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:id="#+id/mapentrieslist"
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#drawable/selector"
android:gravity="left|center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_weight="0.9"
android:orientation="horizontal"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.47"
android:orientation="vertical" >
<TextView
android:id="#+id/entrytype"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fox Pro"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/vehicle_source"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:visibility="gone"/>
<TextView
android:id="#+id/entrydate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#989898"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
You have a number of options:
Add a marquee that automatically scrolls : textView marquee
Place the TextView inside of a Horizontal ScrollView instead of a LinearLayout
Set the TextView to put an ellipses at the end : Detect whether TextView in ListView is ellipsized
The first two preserve the text while the third removes the extra characters.
I'm trying (in vain) to add margins to my ListView items. I have tried adding margin values to my RelativeLayout below but no matter what I do all I seem to get is a 1px line between each item.
What I really would like is to have rounded corners on each item, a 1px black border and a 3-5px margin left, top, and right but right now I'll settle for just a margin around each item :-)
How do I achieve my goals? Just the margin for now... ;-)
Here's what I have:
UPDATE: I have updated the xml below removing main layout and fragment layout. I have also updated the ListView item layout to what I have now which is closer to what I want but still not perfect. Screenshot added as well
listview item layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/matchMargin"
android:paddingRight="#dimen/matchMargin"
android:paddingTop="#dimen/matchMargin" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cfcfcfcf" >
<include
android:id="#+id/matchKampstart"
layout="#layout/kampstart_layout" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tournamentImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/tournamentImageViewContentDescription"
android:gravity="left"
android:src="#drawable/sofabold_launcher" />
<ImageView
android:id="#+id/homeTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/homeTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/homeTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:text="#string/home"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/dash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/dash"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/awayTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/awayTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/awayTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/away"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tvChannelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:contentDescription="#string/tvChannelImageViewContentDescription"
android:gravity="right"
android:src="#drawable/sofabold_launcher" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This gives me the following where you'll notice a very small line to the right and left for each item. That I would also like to get rid of.
I'm not great with layouts, but I have noticed in the past that ListView rows often ignore LayoutParams. I have no idea where this happens or if it's possible to override, I do know you can easily work around it by adding another layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#990000ff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#9900ff00"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ff0000" />
</LinearLayout>
</LinearLayout>
Typically layouts that only have one child can be removed, but as you can see this one serves a purpose:
The outer-most layout is blue, the TextView is red, and the green is the extra layout that allows you to add some extra spacing. Notice the difference between padding (the green on the left) and margin (no green on the right). You have clearly stated that you want to use margins (android:layout_margin) but your code clearly uses padding (android:padding) so I included both.
A little late seeing this, but just add the following lines to your ListView xml element
android:divider="#00000000"
android:dividerHeight="10dp"
See the answer here for why. In short the child asks the parent, and the list view row uses AbsListView.LayoutParams, which doesn't include margins.
Why LinearLayout's margin is being ignored if used as ListView row view
In your adapter, catch your relative layout in getView(), then give a layout params ,
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
params.setMargins(80, 0, 0, 0); //substitute parameters for left, top, right, bottom
YourRelativeLayoutInAdapter.setLayoutParams(params);
I suppose you have a ListView defined in an XML file somewhere, if so, you could add some padding to it, so that there will be some space between the edge of the screen and the ListView.
Example:
<ListView
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:padding="15dp"/>