I need help for get my layout of a image and text to work.
I want the image to scale to be the same height my TextView take in use.
I want also the image to be left to the text.
For in example # is my image
# "My Text"
or
## "My long text
## is this here"
The witdh of the image will be so the image keep the aspects.
My code is now this, the basic layout work but the image is to big.
<LinearLayout
android:id="#+id/packet_list_view_layout_subvehicle" android:layout_width="fill_parent"
android:layout_weight="1" android:orientation="horizontal"
android:gravity="left" android:layout_height="wrap_content">
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_image"
android:src="#drawable/packet"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="==================="
/>
EDIT 1
A other try that give me the same result.
<LinearLayout
android:id="#+id/packet_list_view_layout_subvehicle"
android:layout_width="fill_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:gravity="left"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/packet" />
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
EDIT 2
I has now found a half working code, the problem here is the width of the image is the origin width and not the new scale witdh.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/packet_list_view_layout_subvehicle"
>
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_imageAA"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/packet"
/>
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|left"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
I has finally found a working way, not very good but work for me.
My code is now
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/packet_list_view_layout_subvehicle"
>
<mypacket.MyImageView
android:id="#+id/packet_list_view_layout_subvehicle_imageAA"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/packet"
/>
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|left"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
And the mypacket.MyImageView is this code.
public class MyImageView extends ImageView {
public MyImageView(Context context) {
super(context);
}
public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, heightMeasureSpec);
}
}
EDIT: In true, I don't use this, base one some error with how the system calc the size, that do the image will be bigger then need, and this will do the text to warp to two lines. In final I use a normal ImageView and set fix hegth and withd.
Related
I am building an app that accesses a WordPress website API to list the posts, which has a preview like this:
The big white space at the top is the image of the post, which I implemented by copying a code I found online, creating a class that extends ImageView and modifying somethings, making the image 100% wide, because previously I couldn't achieve it.
It works, but the image is overlapping the other elements:
This is the code I've copied and adapted:
public class ProportionalImageView extends AppCompatImageView {
public ProportionalImageView(Context context) {
super(context);
}
public ProportionalImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ProportionalImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d != null) {
int w = MeasureSpec.getSize(widthMeasureSpec);
int h = w * d.getIntrinsicHeight() / d.getIntrinsicWidth();
setMeasuredDimension(w, h);
}
else super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
What I want to achieve is to make the image 100% wide but keep the proportion and not overlap, of course.
My layout file, for each square:
<?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="280dp"
android:layout_marginBottom="32sp"
android:background="#android:color/white">
<skillpoint.com.skillpoint.ProportionalImageView
android:id="#+id/imgImageUrl"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#+id/imgImageUrl"
android:background="#color/colorAccent" />
<TextView
android:id="#+id/tvTitle"
style="#style/Post.Preview"
android:layout_below="#+id/imgImageUrl"
android:text="Lorem Ipsum"
android:textColor="#color/colorTextColorPrimaryDark"
android:textSize="22sp" />
<TextView
android:id="#+id/tvDate"
style="#style/Post.Preview"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvTitle"
android:layout_margin="0dp"
android:text="00/00/0000"
android:textColor="#color/colorTextColorPrimaryDark"
android:textSize="12sp" />
<TextView
android:id="#+id/tvContent"
style="#style/Post.Preview"
android:layout_below="#+id/tvDate"
android:text="Lorem ipsum dolor sit amet"
android:textColor="#color/colorTextColorSecondaryDark"
android:textSize="13sp" />
</RelativeLayout>
Custom ImageView class is overlapping other elements in screen
Because your RelativeLayout has static height just change it to android:layout_height="wrap_content" you issue will be solved check the below images
Use
android:layout_height="wrap_content"
instead of
android:layout_height="280dp"
Try this Remove static height from your RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<com.example.user33.workingtestapp.ProportionalImageView
android:id="#+id/imgImageUrl"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/disha" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#+id/imgImageUrl"
android:background="#color/colorAccent" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imgImageUrl"
android:text="Lorem Ipsum"
android:textColor="#ff00"
android:textSize="22sp" />
<TextView
android:id="#+id/tvDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvTitle"
android:layout_margin="0dp"
android:text="00/00/0000"
android:textSize="12sp" />
<TextView
android:id="#+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvDate"
android:text="Lorem ipsum dolor sit amet"
android:textSize="13sp" />
</RelativeLayout>
OUTPUT
without static hight
with static hight
..
As shown in the figure i have to create buttons with two functions. For example, in the bottom first row the "0" has another function called "Rnd" and "." has functions "Ran# RanInt".
I have taken this up as a project and I am stuck - I can't get the buttons, and the name above the button as shown in figure to be in a correct alignment.
Also, I am not sure this is the correct method, I have used GridLayout as shown in code, I used a LinearLayout inside of GridLayout for the buttons and they seem to fit - but I can't make the text to be placed above the buttons as shown in figure.
The font file can be downloaded from here ... download casio fx-es plus series. I have renamed the file ES-03 as casiofont.ttf in my program.
screen shot
<TextView
android:layout_width="wrap_content"
android:layout_height="10dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="space to show enabled functions"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/webView2" />
<WebView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/webView2"
android:layout_below="#+id/textView"
android:layout_alignParentStart="true"></WebView>
<GridLayout
android:id="#+id/gridlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:rowCount="9"
android:columnCount="6"
android:layout_below="#+id/webView2">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_row="0"
android:layout_column="0"
android:weightSum="5"
android:id="#+id/linearLayout"
android:layout_below="#+id/webView2"
android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/gridlayout">
<TextView
android:id="#+id/rnd"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:text="#string/rnd"
android:layout_weight="1"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_row="0" />
<TextView
android:id="#+id/ran_ranint"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:text="#string/ran_ranint"
android:layout_column="1"
android:layout_columnSpan="1"
android:layout_row="0" />
<com.example.girikarnal.engineringcalc.CalculatorButtonTextView
android:id="#+id/pi_e1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/pi_e"
android:layout_column="2"
android:layout_row="0" />
<TextView
android:id="#+id/pi_e2"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/e"
android:layout_weight="0.78"
android:layout_column="2"
android:layout_width="wrap_content"
android:layout_row="0" />
<com.example.girikarnal.engineringcalc.CalculatorButtonTextView
android:layout_width="41dp"
android:layout_height="wrap_content"
android:id="#+id/drg_ans"
android:text="#string/dgr_ans"
android:gravity="center"
android:layout_weight="0.80" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/linearlayout1"
android:layout_row="1"
android:layout_column="0">
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/zero"
android:text="#string/zero_Rnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="1"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/dot"
android:text="#string/dot_or_ran"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="2"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/multiple_of_ten"
android:text="#string/multiple_of_ten_or_pi_e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="3"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/ans"
android:text="#string/ans_or_DRG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="4"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/equals"
android:text="#string/equals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="5"
android:layout_row="1" />
</LinearLayout>
</GridLayout>
</RelativeLayout>
CalculatorButton
public class CalculatorButtonButton extends Button {
public CalculatorButtonButton(Context context) {
super(context);
init();
}
public CalculatorButtonButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/casiofont.ttf");
// String s="tf";
// SpannableString spanString = new SpannableString(s);
// spanString.setSpan(new StyleSpan(Typeface.BOLD), 0, spanString.length(), 0);
setTypeface(tf);
}
}
CalculatorTextView
public class CalculatorButtonTextView extends TextView {
// Constructors
public CalculatorButtonTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public CalculatorButtonTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CalculatorButtonTextView(Context context) {
super(context);
init();
}
// This class requires casiofont.ttf to be in the assets/fonts folder
private void init() {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/casiofont.ttf");
setTypeface(tf);
}
}
Just create a custom view.
Something like this
<?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">
<TextView
android:gravity="center"
android:text="text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="btn"
android:layout_width="match_parent"
android:layout_height="fill_parent" />
</LinearLayout>
CalcBtn class
public class CalcBtn extends LinearLayout {
public CalcBtn(Context context) {
super(context);
init(context);
}
public CalcBtn(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public CalcBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
View.inflate(context, R.layout.calc_btn, this);
}
}
And then use it in your layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<com.example.example.CalcBtn
android:layout_width="100dp"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="60dp"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Well it's not clear how exactly you want to lay out your buttons, but firstly you got several things wrong in your usage of GridLayout:
the row and column counts seem wrong (don't you have 2 rows and 5 columns ?)
there's no need for a LinearLayout within the GridLayout ; each child of GridLayout will be assigned a cell in the grid, so you can lay text and button views directly under the grid layout (cf. example below)
Additionally:
most likely the GridLayout height should be wrap_content given the rest of the layout
no need to specify a column span of 1, that's the default (that's not even a span actually...)
no need to specify children layout widths and heights (they're not taken into account in GridLayout)
no need to specify children column and row indexes, they'll be added to the grid in the order they are declared
no need to specify the row numbers either, it can be inferred from the columns number and the number of children
So, you could declare your grid with something like this:
<GridLayout
android:id="#+id/gridlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:columnCount="5">
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"/>
<!-- ... etc add you remaining 3 labels here -->
<Button
android:id="#+id/button1"
android:text="#string/textButton1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"/>
<!-- ... etc add you remaining 3 buttons here -->
</GridLayout>
But if I understand correctly you want to create equally sized columns and rows (and maybe stretch or shrink them ?), and GridLayout (from my experience) can be very tricky to adapt to these use cases (if you want to go down that road, try using Spaces rather than fiddling with row / column and elements attributes). TableLayout works way better for this though. You'd write something like this instead:
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:shrinkColumns="*">
<TableRow>
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"/>
<!-- ... etc add you remaining 3 labels here -->
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:text="#string/textButton1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"/>
<!-- ... etc add you remaining 3 buttons here -->
</TableRow>
</TableLayout>
Or, if you want your columns to be equally sized and take up all the width available to the TableLayout, using weights:
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"
android:layout_width="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"
android:layout_width="0dp"
android:layout_weight="1"/>
<!-- ... etc add you remaining 3 labels here -->
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:text="#string/textButton1"
android:layout_width="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"
android:layout_width="0dp"
android:layout_weight="1"/>
<!-- ... etc add you remaining 3 buttons here -->
</TableRow>
</TableLayout>
You could also use nested LinearLayouts (a horizontal one with 5 nested vertical ones or vice-versa), this is basically what TableLayout does (TableLayout and TableRow are LinearLayouts).
By the way these examples are with "plain" text views and buttons, but you can of course use your Casio-font-enabled custom ones in place it won't make any difference.
So although GridLayout is usable and should consume less system resources than TableLayout, the latter may be easier to configure to match your desired layout.
For details I recommend checking the GridLayout guide and the TableLayout one.
I am using a GridView in a Relative layout. I want the GridView to show
up as tall as needed to show all the rows. However, I am seeing only
one row when set (layout_width=MATCH_PARENT and)
layout_height=WRAP_CONTENT. If I set layout_height to a size that
equals mulitple rows, then I do see those rows.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<RelativeLayout
android:id="#+id/layout_month"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/textv_month_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:gravity="center_horizontal|center_horizontal"
android:textColor="#ffffff"
android:textSize="7dp" />
<ImageView
android:id="#+id/top_bar"
android:layout_width="fill_parent"
android:layout_height="15dp"
android:layout_below="#+id/textv_month_name"
android:background="#drawable/calendar_top_small"
android:clickable="false" />
<GridView
android:id="#+id/gridv_inner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top_bar"
android:layout_gravity="center"
android:clickable="false"
android:gravity="center"
android:numColumns="7"
android:stretchMode="columnWidth"
>
</GridView>
<Button
android:id="#+id/monthBtn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/transparent" />
</RelativeLayout>
</RelativeLayout>
Any Help will be appreciable
This is a very useful answer.
The GridView didn’t like the wrap_content of its height when it was put in a vertically tight space; it only showed a single row of items (scrolling all content in that single row).
The short version of my fix includes sub classing the GridView and overriding the onMeasure method. The essence of the fix focuses on setting the measured height spec to a ridiculously large number.
MyGridview.Java
package com.arun.calendar;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.GridView;
public class MyGridView extends GridView {
public MyGridView(Context context) {
super(context);
}
public MyGridView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyGridView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int heightSpec;
if (getLayoutParams().height == LayoutParams.WRAP_CONTENT) {
// The two leftmost bits in the height measure spec have
// a special meaning, hence we can't use them to describe height.
heightSpec = MeasureSpec.makeMeasureSpec(
Integer.MAX_VALUE >>2, MeasureSpec.AT_MOST);
}
else {
// Any other height should be respected as is.
heightSpec = heightMeasureSpec;
}
super.onMeasure(widthMeasureSpec, heightSpec);
}
}
And the new XML file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >
<RelativeLayout
android:id="#+id/layout_month"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textv_month_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:gravity="center_horizontal|center_horizontal"
android:textColor="#ffffff"
android:textSize="7dp" />
<ImageView
android:id="#+id/top_bar"
android:layout_width="fill_parent"
android:layout_height="15dp"
android:layout_below="#+id/textv_month_name"
android:background="#drawable/calendar_top_small"
android:clickable="false" />
<com.arun.calendar.MyGridView
android:id="#+id/gridv_inner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top_bar"
android:layout_gravity="center"
android:clickable="false"
android:gravity="center"
android:numColumns="7"
android:stretchMode="columnWidth" />
</RelativeLayout>
<Button
android:id="#+id/monthBtn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/transparent" />
</RelativeLayout>
And in java file
MyGridView viewHolder.gridView = (MyGridView) v.findViewById(R.id.gridv_inner);
I have the following layout file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/second_grey">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:id="#+id/categoryName"
android:text="#string/sport"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="12dp"
android:padding="2dp"
android:id="#+id/button"
android:text="#string/see_more"
android:textSize="12sp"
android:background="#drawable/blue"
android:textColor="#android:color/white" />
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="0.99">
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img1"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/football"
android:padding="8dp"
android:id="#+id/tv1"
android:layout_below="#+id/imgContainer1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img2"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/basketball"
android:padding="8dp"
android:id="#+id/tv2"
android:layout_below="#+id/imgContainer2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img3"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tennis"
android:padding="8dp"
android:id="#+id/tv3"
android:layout_below="#+id/imgContainer3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</LinearLayout>
And I put it in a ListView in this layout:
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/categories"></ListView>
then, with a simple Adapter, I just set the layout of each element to the layout file.
It looks like this:
But if I just do instead of the ListView, it looks like this
EDIT: Notice the change of Sport for Fútbol, that's just my mistake, it has nothing to do with the actual layout.
EDIT2:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Category category = mList.get(position);
if (convertView == null)
convertView = ((Activity) mContext).getLayoutInflater().inflate(R.layout.category, parent, false);
TextView categoryName = (TextView) convertView.findViewById(R.id.categoryName);
categoryName.setText(category.name);
categoryName.setTypeface(Typeface.createFromAsset(mContext.getAssets(), "fonts/Roboto-Italic.ttf"));
return convertView;
}
EDIT3:
package com.favega.groups;
import android.annotation.TargetApi;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;
public class SquareLayout extends LinearLayout {
public SquareLayout(Context context) {
super(context);
}
#TargetApi(11)
public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public SquareLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int size = width > height ? height : width;
setMeasuredDimension(size, size);
}
}
int size = width > height ? height : width;
setMeasuredDimension(size, size);
Clearly you are setting Measured Dimension to the smallest of width and height!
Since you gave width and height as match_parent, we can assume that one of the value got as zero from parent. As your intention is to make a square image, I prefer you relate this SquareLayout to the child(image) itself rather that the parent. By using wrap_content.
Set each tag of view in converView.setTag(viewName); before returning covertView.
Try May help.Thanks!!
I am trying to do something similar to the image below in Android. The problem is, whenever the screen size changes (when the user rotates the device), the checkboxes and the button disappear from the screen. This is my layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/preview"
android:layout_width="fill_parent"
android:contentDescription="#string/content_description"
android:layout_height= "1.5in" />
<CheckBox
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/preview"
android:text="#string/location_text" />
<CheckBox
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/location"
android:text="#string/timestamp_text" />
<Button
android:id="#+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/timestamp"
android:layout_marginRight="19dp"
android:gravity="center_vertical"
android:onClick="uploadClicked"
android:text="#string/upload_button_text" />
</RelativeLayout>
I need to display the image and all controls and support all screen sizes. How do I make the size of the ImageView dynamic?
I never got the scaleType thing to work for me.
I subclassed ImageView:
package your.pkg;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;
public class AspectRatioImageView extends ImageView {
public AspectRatioImageView(Context context) {
super(context);
}
public AspectRatioImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public AspectRatioImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
if (getDrawable() != null && getDrawable().getIntrinsicWidth() != 0) {
int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
setMeasuredDimension(width, height);
} else {
setMeasuredDimension(0, 0);
}
}
}
And used that instead of the regular ImageView:
<your.pkg.AspectRatioImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
/>
This scales to the full width of the parent View and maintains the aspect ratio while doing so.
If you used a LinearLayout instead of a RelativeLayout, you could make the ImageView expand to take all the empty space in the screen. The scaleType attribute will let you specify how to stretch the image.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/preview"
android:layout_width="fill_parent"
android:contentDescription="#string/content_description"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter" />
<CheckBox
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/location_text" />
<CheckBox
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/timestamp_text" />
<Button
android:id="#+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="19dp"
android:layout_gravity="right"
android:onClick="uploadClicked"
android:text="#string/upload_button_text" />
</LinearLayout>
Based on all the feedback. This is what I used:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/preview"
android:layout_width="fill_parent"
android:contentDescription="#string/content_description"
android:layout_height= "1.5in" />
<CheckBox
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/preview"
android:text="#string/location_text" />
<CheckBox
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/location"
android:text="#string/timestamp_text" />
<Button
android:id="#+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/timestamp"
android:layout_marginRight="19dp"
android:gravity="center_vertical"
android:onClick="uploadClicked"
android:text="#string/upload_button_text" />
</RelativeLayout>
</ScrollView>