I am working on an activity where I created a custom view that I am adding dynamically within a LinearLayout. The problem is that I am unable to give margin between the custom views I add.
Here is a look at the two views I added which are next to each other.
Screentshot:
Code for creating the views dynamically:
private void AddSelectedTagUI(final com.main.feedify.serializers.Tags tag){
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.tags,tags_section_selectedtags,false);
TextView tagName = (TextView)v.findViewById(R.id.customview_tags_name);
tagName.setText(tag.getTagName());
ImageView close_button = (ImageView)v.findViewById(R.id.customview_tags_close);
close_button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
RemoveTag(tag.getTagID(), selectedTags);
}
});
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
tags_section_selectedtags.addView(v, params);
// cast view to tags and add it in our layout.
// this will help us find out the tag we wanna delete.
view_selectedTags.add(v);
this.UpdateMessage(true);
}
tags.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:background="#drawable/tags"
android:padding="5dp"
android:id="#+id/custom_tag"
>
<TextView android:id="#+id/customview_tags_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beyonce"
android:layout_marginLeft="10dp"
android:layout_marginRight="3dp"
android:layout_centerVertical="true"
android:textColor="#android:color/white"
android:textSize="#dimen/title" />
<ImageView
android:id="#+id/customview_tags_close"
android:layout_width="wrap_content"
android:layout_marginTop="2dp"
android:layout_toRightOf="#+id/customview_tags_name"
android:layout_height="wrap_content"
android:src="#drawable/close"
android:layout_marginLeft="3dp"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
activity_tags.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background">
<TextView
android:id="#+id/tags_lbl_taginfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Add at least 4 favorite topics"
android:layout_marginTop="20dp"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_below="#+id/tags_lbl_taginfo"
android:layout_width="match_parent"
android:layout_height="190dp"
android:layout_marginTop="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:id="#+id/tags_section_selectedtags">
</LinearLayout>
<EditText
android:id="#+id/tags_txt_tags"
android:layout_below="#+id/tags_section_selectedtags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:hint="Add tags ..."
android:textColor="#color/tags_edittext"
android:paddingTop="15dp"
android:singleLine="true"
android:paddingLeft="9dp"
android:paddingBottom="15dp"
android:background="#drawable/tags_edittext"
/>
<TextView
android:id="#+id/tags_lbl_tagsuggestion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Suggestions"
android:layout_marginTop="15dp"
android:layout_below="#id/tags_txt_tags"
/>
</RelativeLayout>
Custom Tags Class:
package com.main.feedify.custom_views;
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.main.feedify.feedify_mockup.R;
import com.tokenautocomplete.TokenCompleteTextView;
/**
* Created by Muazzam on 10/17/2015.
*/
public class Tags extends RelativeLayout{
private com.main.feedify.serializers.Tags tag;
public Tags(Context context, AttributeSet attrs)
{
super(context, attrs);
LayoutInflater inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.tags,this);
}
public void setTag(com.main.feedify.serializers.Tags t){
this.tag = t;
}
public com.main.feedify.serializers.Tags getTag(){
return this.tag;
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
MarginLayoutParams margins = MarginLayoutParams.class.cast(getLayoutParams());
int margin = 5;
margins.topMargin = 0;
margins.bottomMargin = 0;
margins.leftMargin = margin;
margins.rightMargin = 0;
setLayoutParams(margins);
};
}
You are setting margins in Pixels. Try converting them into dp, so that the margins value becomes independent of display density.
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
MarginLayoutParams margins = MarginLayoutParams.class.cast(getLayoutParams());
int margin = pxToDp(5);
margins.topMargin = 0;
margins.bottomMargin = 0;
margins.leftMargin = margin;
margins.rightMargin = 0;
setLayoutParams(margins);
};
private int pxToDp(int px) {
return (int) (px / Resources.getSystem().getDisplayMetrics().density);
}
EDIT:
Get rid of the margin code in onLayout() and set those margins, when you are puting this view inside a viewgroup like LinearLayout or RelativeLayout etc.
You should try setting the layout_margin to your RelativeLayoutin your XML file, same as you did with the padding.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:background="#drawable/tags"
android:layout_margin="5dp"
android:padding="5dp"
android:id="#+id/custom_tag">
<TextView android:id="#+id/customview_tags_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beyonce"
android:layout_marginLeft="10dp"
android:layout_marginRight="3dp"
android:layout_centerVertical="true"
android:textColor="#android:color/white"
android:textSize="#dimen/title" />
<ImageView
android:id="#+id/customview_tags_close"
android:layout_width="wrap_content"
android:layout_marginTop="2dp"
android:layout_toRightOf="#+id/customview_tags_name"
android:layout_height="wrap_content"
android:src="#drawable/close"
android:layout_marginLeft="3dp"
android:layout_marginRight="10dp" />
</RelativeLayout>
You should add left margin to view while adding it.
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
//add this line
params.leftMargin=50;
//end
tags_section_selectedtags.addView(v, params);
I think that the problem lays in this piece of code:
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
MarginLayoutParams margins = MarginLayoutParams.class.cast(getLayoutParams());
int margin = 5;
margins.topMargin = 0;
margins.bottomMargin = 0;
margins.leftMargin = margin;
margins.rightMargin = 0;
setLayoutParams(margins);
};
Here you change the layout parameters inside the onLayout() method and it should lead to the infinite layout of your view: custom view's parent view calls onLayout() which calls setLayoutParams() which results in onLayout()... And so it goes.
One way to prevent this behavior is to add your margins in tags.xml file, just like you did with the paddings. The infinite layout loop will be gone and your view will have a chance to set its margins.
I have designed a view dynamically and have given parameters such like yours, have a look at this code:
https://stackoverflow.com/a/33339420/5479863
and to convert into dp from pixel use this method
private int getPixelsToDP(int dp) {
float scale = getResources().getDisplayMetrics().density;
int pixels = (int) (dp * scale + 0.5f);
return pixels;
}
Related
I created a new small example to explain my new problem. In the example I created a RelativeLayout that fills the whole screen. And 3 children :
Custom view (PView) created to draw proportional view that must fill all free space by width in portrait mode and free space by height in landscape mode without overlay on top and bottom of FrameLayout (pink)
FrameLayout with id top that must show above middle (red)
FrameLayout with id bottom that must show below middle (yellow)
But now in landscape mode middle item overdraw top and bottom. Have anyone idieas how to fix it ?
layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/top"
android:layout_width="100dp"
android:layout_height="24dp"
android:layout_above="#+id/middle"
android:layout_centerHorizontal="true"
android:background="#FFFF0000" />
<test.com.heighttest.PView
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#FFFF00FF" />
<FrameLayout
android:id="#+id/bottom"
android:layout_width="100dp"
android:layout_height="24dp"
android:layout_below="#+id/middle"
android:layout_centerHorizontal="true"
android:background="#FFFFFF00" />
</RelativeLayout>
PView.java
package test.com.heighttest;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
/**
* Created by Anton Potekhin (Anton.Potekhin#gmail.com) on 26.09.16.
*/
public class PView extends RelativeLayout {
public static final int USE_FOR_SCALE_WIDTH = 0;
public static final int USE_FOR_SCALE_HEIGHT = 1;
public int getUseForScale() {
return useForScale;
}
public void setUseForScale(int useForScale) {
this.useForScale = useForScale;
}
private int useForScale = 0;
public float getAspectRatio() {
return aspectRatio;
}
public void setAspectRatio(float aspectRatio) {
this.aspectRatio = aspectRatio;
}
/**
* Aspect ratio to calculate size of view. Set 0 to not use aspect ratio (Works like RelativeLayout).
*/
private float aspectRatio = 0;
public PView(Context context) {
super(context);
}
public PView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//Use aspect ratio only if it more than 0
if (aspectRatio > 0) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if (useForScale == USE_FOR_SCALE_WIDTH) {
height = Math.round(width / aspectRatio);
} else {
width = Math.round(height * aspectRatio);
}
widthMeasureSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
MainActivity.java
package test.com.heighttest;
import android.content.res.Configuration;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
private PView middleView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
com.facebook.stetho.Stetho.initializeWithDefaults(this);
setContentView(R.layout.activity_main);
middleView = (PView) findViewById(R.id.middle);
middleView.setAspectRatio(1.2f);
if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
middleView.setUseForScale(PView.USE_FOR_SCALE_HEIGHT);
} else {
middleView.setUseForScale(PView.USE_FOR_SCALE_WIDTH);
}
}
}
Screenshot in portrait mode (Works correctly):
Screenshot in landscape mode (Works incorrect because middle overdraw top and bottom):
Screenshot what i want to get in landscape mode
Solution by #nidhi-pandya (with my fixes):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<FrameLayout
android:id="#+id/top"
android:layout_width="100dp"
android:layout_height="24dp"
android:background="#FFFF0000" />
<test.com.heighttest.PView
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFFF00FF" />
<FrameLayout
android:id="#+id/bottom"
android:layout_width="100dp"
android:layout_height="24dp"
android:background="#FFFFFF00" />
</LinearLayout>
</RelativeLayout>
Add LinearLayout below Relativelayout and use its orientation to arrange your content vertically. Use alignparenttop, alignparentbottom and centerinparent attribute. It will give you the same output in both orientation.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<FrameLayout
android:id="#+id/top"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="#FFFF0000" />
<test.com.heighttest.PView
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#FFFF00FF" />
<FrameLayout
android:id="#+id/bottom"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:background="#FFFFFF00" />
</LinearLayout>
</RelativeLayout>
I have the following fragment. No matter what I do but the image is not visible in the Image View-: For testing I put the button on fragment but that is refelected but image is not visible
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.transenigma.iskconapp.DynamicImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/img2"
android:id="#+id/myAboutImg" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="8dp"
tools:text="Text"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_gravity="center_horizontal|bottom" />
<!--</android.support.v7.widget.CardView>-->
</FrameLayout>
I have made the following class that extends ImageView-:
package com.transenigma.iskconapp;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class DynamicImageView extends ImageView {
public DynamicImageView(final Context context, final AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
final Drawable d = this.getDrawable();
if (d != null) {
// ceil not round - avoid thin vertical gaps along the left/right edges
final int width = MeasureSpec.getSize(widthMeasureSpec);
final int height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
this.setMeasuredDimension(width, height);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
What did you want to do in your DynamicImageView?
You can try to delete the method onMeasure,and see the difference between them.
Maybe the mistake is in your onMeasure.
I am trying to create a tree graph based on user data. There is no library or anything to help and im just a beginner. I just created 8 image buttons and after the app calculates the data, it needs to draw lines between these nodes to connect them. I have no idea how to use canvas or drawline so any help would be much appreciated.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20dp"
android:id="#+id/nodesImages">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="1"
android:layout_margin="20dp"
android:id="#+id/node1"
android:background="#drawable/node"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="2"
android:id="#+id/node2"
android:layout_margin="20dp"
android:background="#drawable/node"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="5"
android:id="#+id/node5"
android:layout_margin="20dp"
android:background="#drawable/node"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="6"
android:id="#+id/node6"
android:layout_margin="20dp"
android:background="#drawable/node"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="3"
android:layout_margin="20dp"
android:id="#+id/node3"
android:background="#drawable/node"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="4"
android:id="#+id/node4"
android:layout_margin="20dp"
android:background="#drawable/node"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="7"
android:id="#+id/node7"
android:layout_margin="20dp"
android:background="#drawable/node"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:text="8"
android:id="#+id/node8"
android:layout_margin="20dp"
android:background="#drawable/node"/>
![enter image description here][1]</LinearLayout>
Edit - DrawView Class
How can I use this DrawView class to add the lines?
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;
public class DrawView extends View
{
Paint paint = new Paint();
static int startX, startY, endX, endY;
public DrawView(Context context,int startX, int startY, int endX, int endY)
{
super(context);
this.startX = startX;
this.startY = startY;
this.endX = endX;
this.endY = endY;
paint.setColor(Color.BLACK);
}
public DrawView(Context context)
{
super(context);
paint.setColor(Color.BLACK);
}
#Override
public void onDraw(Canvas canvas)
{
canvas.drawLine(startX, startY, endX, endY,paint);
}
}
Edit 2:
This is not working for some reason:
LinearLayout myLayout = (LinearLayout) findViewById(R.id.nodesImages);
DrawView drawView = new DrawView(getApplicationContext(),(int)node1.getX(),(int)node1.getY(),(int)node2.getX(),(int)node2.getY());
myLayout.addView(drawView);
Edit 3
There are so many libraries for creating complex graphs (line,bar,scatter,etc) . Why can't somebody create a library for tree graphs???? seems easy for those people!!!
based on your provide width and height of your button in layout. I use translation to do that. See the below code and the ugly Image for explain ##!
LinearLayout nodesImages = (LinearLayout) findViewById(R.id.nodesImages);
View v = new View(this); //this, because I write this code in the Activity class
//yah, try to understand values 20, 30,...
v.setLayoutParams(new ViewGroup.LayoutParams(dpToPx(20+20),dpToPx(2)));
v.setBackgroundColor(Color.BLACK);
nodesImages.addView(v);
v.setTranslationY(-dpToPx(30+20+20)-dpToPx(20+30/2));
v.setTranslationX(dpToPx(20+30));
with:
private int dpToPx(int dp) {
return (int) (dp * getResources().getDisplayMetrics().density + 0.5f);
}
Ugly Image for explain:
UPDATE get location of view:
final LinearLayout nodesImages = (LinearLayout) findViewById(R.id.nodesImages);
//using addOnGlobalLayoutListener to make sure layout is happened.
nodesImages.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
//Remove the listener before proceeding
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
nodesImages.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
nodesImages.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
Button node1 = (Button)findViewById(R.id.node1);
int[] loc1 = new int[2];
node1.getLocationInWindow(loc1);//loc1[0] is x and loc1[1] is y
//for more information about this method, in Android Studio, just right-click -> Go To -> Declaration
Button node2 = (Button)findViewById(R.id.node2);
int[] loc2 = new int[2];
node2.getLocationInWindow(loc2);
View v = new View(getApplication());
v.setLayoutParams(new ViewGroup.LayoutParams(loc2[0]-loc1[0]-node1.getWidth(),dpToPx(2)));//dpToPx(20 + 20), dpToPx(2)));
v.setBackgroundColor(Color.BLACK);
nodesImages.addView(v);
v.setTranslationY(-dpToPx(30+20+20)-dpToPx(20+30/2));
v.setTranslationX(dpToPx(20+30));
}
}
);
Psst... Just do it in XML
<View
android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#android:color/black"/>
Basically the android list view activity is transparent well i have managed to make it solid black using custom layout but how do i make it like the third image where the corner colour will be random .
thanks in advance
MainActivity.java
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.ArrayAdapter;
public class MainActivity extends Activity {
// Declare
private LinearLayout slidingPanel;
private boolean isExpanded;
private DisplayMetrics metrics;
private RelativeLayout headerPanel;
private int panelWidth;
private int panelWidth1;
private ImageView menuViewButton,menuRightButton;
FrameLayout.LayoutParams menuPanelParameters;
FrameLayout.LayoutParams slidingPanelParameters;
LinearLayout.LayoutParams headerPanelParameters;
LinearLayout.LayoutParams listViewParameters;
//Example
////////
String[] Example = new String[]
{ "Android Introduction","Android Setup/Installation","Android Hello World",
"Android Layouts/Viewgroups","Android Activity & Lifecycle","Intents in Android"};
////////
//Example
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layer_stack);
// Initialize
metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
panelWidth = (int) ((metrics.widthPixels) * -0.65);//Right panel width
panelWidth1 = (int) ((metrics.widthPixels) * 0.65);//left panel width
headerPanel = (RelativeLayout) findViewById(R.id.header);
headerPanelParameters = (LinearLayout.LayoutParams) headerPanel
.getLayoutParams();
headerPanelParameters.width = metrics.widthPixels;
headerPanel.setLayoutParams(headerPanelParameters);
slidingPanel = (LinearLayout) findViewById(R.id.slidingPanel);
slidingPanelParameters = (FrameLayout.LayoutParams) slidingPanel
.getLayoutParams();
slidingPanelParameters.width = metrics.widthPixels;
slidingPanel.setLayoutParams(slidingPanelParameters);
///////
ArrayAdapter<String> ExampleArrayAdapter = new CustomAdapter(this, Example);
//changing code//practice
/*new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
Example);*/
ListView ExampleListView = (ListView)findViewById(R.id.listView);
ExampleListView.setAdapter(ExampleArrayAdapter);
///////
// Slide the Panel
menuRightButton = (ImageView) findViewById(R.id.menuViewButton);
menuRightButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
if (!isExpanded) {
isExpanded = true;
// Expand
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager
.beginTransaction();
fragmentTransaction.replace(R.id.menuPanel,
new LeftMenuFragment());
fragmentTransaction.commit();
new ExpandAnimation(slidingPanel, panelWidth1,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.65f, 0, 0.0f, 0, 0.0f);
} else {
isExpanded = false;
// Collapse
new CollapseAnimation(slidingPanel, panelWidth1,
TranslateAnimation.RELATIVE_TO_SELF, 0.65f,
TranslateAnimation.RELATIVE_TO_SELF, 0.0f, 0, 0.0f,
0, 0.0f);
}
}
});
}
}
custom_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="70dp"
android:orientation="horizontal"
android:layout_marginTop="60dp"
android:background="#drawable/blue_bg">
<ImageView
android:id="#+id/imageView1"
android:layout_width="70dp"
android:layout_height="60dp"
android:src="#drawable/ic_launcher"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:gravity="left" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="19sp"
android:textColor="#ffffff"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="20dp"
android:text="Tweet body text here"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="5dp"
android:ellipsize="end"
android:lines="3"
android:textColor="#ffffff"
android:textSize="14sp" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Small Text"
android:layout_marginTop="5dp"
android:textColor="#ffffff"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
CustomAdapter.java
public class CustomAdapter extends ArrayAdapter {
private LayoutInflater inflater;
public CustomAdapter (Activity activity, String[] items){
super(activity, R.layout.custom_layout, items);
inflater = activity.getWindow().getLayoutInflater();
}
#Override
public View getView(int position, View convertView, ViewGroup parent){
return inflater.inflate(R.layout.custom_layout, parent, false);
}
}
I have managed to make it show random colour with updating the get view function with the following code but everytime i scroll the colour changes, how do i make it stable so that once the colour is assigned it won't change?
Random rnd = new Random();
int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
View rowView = inflater.inflate(R.layout.custom_layout, parent, false);
rowView.setBackgroundColor(color);
You have to use a custom adapter with two views. You can change the color of left view in getView method of adapter.
Finally, i have achieved the following answer to my question But i'm still facing the problem where on every scroll the colors are changing , where i want them to be constant once assigned, if anyone can help it will be great. thank you all. By just modifying xml and custom adapter code i have made it my xml code as
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_marginTop="70dp"
android:layout_height="70dp"
android:background="#drawable/blue_bg">
<LinearLayout
android:layout_marginLeft="20dp"
android:layout_width="345dp"
android:layout_height="70dp"
android:background="#drawable/white_bg">
<ImageView
android:id="#+id/imageView1"
android:layout_width="70dp"
android:layout_height="60dp"
android:src="#drawable/ic_launcher"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:gravity="left" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:layout_marginTop="10dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="19sp"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="15dp"
android:text="Tweet body text here"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="5dp"
android:ellipsize="end"
android:lines="3"
android:textColor="#000000"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Modifying the java code with the following code
Random rnd = new Random();
int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(257), rnd.nextInt(258));
View rowView = inflater.inflate(R.layout.custom_layout, parent, false);
rowView.setBackgroundColor(color);
Create your layout file as follows.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_weight="0.3" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_weight="0.7" />
</LinearLayout>
Your activity class onCreate() method should look like something like this.
ListView listView = (ListView) findViewById(R.id.listView1);
String[] Example = new String[] { "Android Introduction",
"Android Setup/Installation", "Android Hello World",
"Android Layouts/Viewgroups", "Android Activity & Lifecycle",
"Intents in Android" };
ArrayList<String> list = (ArrayList<String>) Arrays.asList(Example);
CustomAdapter adapter = new CustomAdapter(this, list);
listView.setAdapter(adapter);
Create a custom adapter class as follows.
public class CustomAdapter extends BaseAdapter {
Context context;
ArrayList<String> listOfContents;
LayoutInflater inflater;
public CustomAdapter(Context context, ArrayList<String> list) {
this.context = context;
listOfContents = list;
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return listOfContents.size();
}
#Override
public Object getItem(int position) {
return listOfContents.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = inflater.inflate(R.layout.list_row, null);
Random rnd = new Random();
int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256),
rnd.nextInt(256));
TextView clorText = (TextView) convertView.findViewById(R.id.textView1);
TextView clorText2 = (TextView) convertView
.findViewById(R.id.textView2);
clorText.setBackgroundColor(color);
clorText2.setBackgroundColor(Color.BLACK);
return convertView;
}
}
This code is completely untested. You should get a rough idea about using Listview and Custom adapter and generating random color.
The colour keeps changing because the list items are recycled, now when android calls the getView() method for the second time for a particular list item on scrolling, you regenerate the colour value and it changes.
Since, you are able to generate random colours, all you need to do is to store the colour once the item is generated, and then reuse that colour.
What you could do is to create an array list which stores the colour value and then inside the getView() method check if the colour for a particular position exists in the arraylist. If yes, then use that colour else generate a random colour and also add it to the arraylist of colours.
E.g. (Untested code but the approach should be similar)
Inside getView() :
int color = 0;
if(colorsList.size > position) {
//This means that the color has already been generated for this position
color = colorsList.get(position);
} else {
//Color hasnt been generated for this position.
color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256),
rnd.nextInt(256));
colorsList.add(color);
}
clorText.setBackgroundColor(color);
I'm stuck.
The problem is how to place text on a static image and keep position depends on it between different screen dimensions.
To achieve this I've tried the layout above:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/default_view_padding">
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:adjustViewBounds="true"
android:layout_height="900dp"
android:layout_centerInParent="true"
android:src="#drawable/example"/>
<TextView
android:layout_alignLeft="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignEnd="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_width="wrap_content"
android:layout_marginTop="190dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>
</RelativeLayout>
But on different screens it looks differently.
So, by example, screenshots. The static image background (in example white image with green line), the view with text on nexus5, on nexus7.
As you can see, a text placed on different places over image.
I doesn't know why is it happend, because I'm using dp and relative layout.
I tried wrap_content/match_parent on image sizes, without ajust view bounds etc. And it haven't help.
Ty for answers.
EDIT: I want the text to always be above the green line on the same distance in different screen dimensions. (the same as in the second image)
EDIT2: Someone misunderstood me, sorry if the question isn't clear. As a background in example i'm tried to use imageview instead of background tag of relative layout, because it is'nt help whatever, i tried that before
The line, which I used in example, is only for that. It just needs to explain the issue of the text positioning
use dimens.xml to Support different size of screens.
in your res folder create some value folders Like :
values-xlarge
values-large
values-small
values-sw800dp
...
in these folders youy should have dimens.xml and define your dimensions.
for example this may be your dimensions for normal screens :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="ImageViewWidth">500dp</dimen>
<dimen name="ImageViewHeight">900dp</dimen>
<dimen name="TextViewMarginTop">190dp</dimen>
</resources>
Definitely your dimensions for large or xlarge screens are different!
to use these, simply put them in XML instead of hard-coding dimens
<TextView
android:layout_alignLeft="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignEnd="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_width="wrap_content"
android:layout_marginTop="#dimens/TextViewMarginTop"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>
If you just want green color as a background of text then use android:background on textview and remove ImageView. Create a 9Patch image with green line at bottom and give that image as background to your text.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/abc_ab_transparent_light_holo"
android:text="Dummy text string"
android:id="#+id/dummy_text" />
I don't know if I understand the question,
but I think solution could be putting RelativeLayout in another contener, ie:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="#dimen/default_view_padding" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:layout_height="900dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/example" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/iv_background"
android:layout_alignLeft="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_centerHorizontal="true"
android:layout_marginTop="190dp"
android:gravity="center"
android:text="Dummy text string" />
</RelativeLayout>
</LinearLayout>
set android:gravity="center", android:layout_centerInParent="true" and android:layout_alignParentTop="true" of the textview
Create a custom view like my sample:
layout view_product_image.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background_light_blue"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgProduct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dip"
android:src="#drawable/main0x" />
<TextView
android:id="#+id/tvQty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imgPoduct"
android:layout_marginLeft="3dp"
android:layout_marginTop="2dp"
android:background="#color/lightBlue3"
android:text="1111"
android:textColor="#color/red"
android:textSize="16dip" />
<TextView
android:id="#+id/tvInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgProduct"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:lines="2"
android:maxLines="2"
android:minLines="2"
android:singleLine="false"
android:text="TextView"
android:textColor="#color/black"
android:textSize="16dip" />
</RelativeLayout>
Class:
package org.mabna.order.ui;
import org.mabna.order.R;
import org.mabna.order.businessLayer.db.BoPreferences;
import org.mabna.order.utils.Farsi;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class ImageView_Product extends LinearLayout implements OnTouchListener {
private static final float FONT_SIZE_LARGE = 20;
private static final float FONT_SIZE_NORMAL = 16;
private static final float FONT_SIZE_SMALL = 12;
private RelativeLayout rlParent;
private ImageView imgProduct;
private TextView tvInfo;
private TextView tvQty;
private double qty = 0;
private float mDensity;
private Typeface tf;
public ImageView_Product(Context context) {
super(context);
initialize();
}
public ImageView_Product(Context context, AttributeSet attrs) {
super(context, attrs);
initialize();
}
protected void initialize() {
if (!this.isInEditMode()) {
tf = Farsi.getFarsiFont(this.getContext());
}
mDensity = this.getResources().getDisplayMetrics().density;
LayoutInflater layoutInflater = (LayoutInflater) getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater
.inflate(R.layout.view_product_image, this);
rlParent = (RelativeLayout) view.findViewById(R.id.rlParent);
imgProduct = (ImageView) view.findViewById(R.id.imgProduct);
tvInfo = (TextView) view.findViewById(R.id.tvInfo);
tvQty = (TextView) view.findViewById(R.id.tvQty);
tvInfo.setTypeface(tf);
tvInfo.setTextSize(FONT_SIZE_SMALL);
}
public TextView getTextView() {
return tvInfo;
}
public ImageView getImageView() {
return imgProduct;
}
public TextView getQtyView() {
return tvQty;
}
public void setInfoText(String text) {
tvInfo.setText(text);
}
public String getInfoText(String text) {
return tvInfo.getText().toString();
}
public void setQty(double value) {
this.qty = value;
if (this.qty > 0) {
tvQty.setText(BoPreferences.getStringValueNoGrouping(this.qty,
getContext()));
setStateHasQty();
} else {
tvQty.setText("");
setStateHasNotQty();
}
}
public double getQty() {
return Double.valueOf(tvQty.getText().toString());
}
public void setStateSelected() {
imgProduct.setBackgroundResource(R.drawable.border06);
}
public void setStateNotSelected() {
imgProduct.setBackgroundResource(R.drawable.border05);
}
private void setStateHasQty() {
tvQty.setBackgroundResource(R.color.lightBlueTransparent);
tvQty.setTextSize(FONT_SIZE_LARGE);
// tvInfo.setBackgroundResource(R.color.darkGreen);
rlParent.setBackgroundResource(R.drawable.background_light_green);
}
private void setStateHasNotQty() {
tvQty.setBackgroundResource(0);
tvQty.setTextSize(FONT_SIZE_NORMAL);
// tvInfo.setBackgroundResource(R.color.lightBlue3);
rlParent.setBackgroundResource(R.drawable.background_light_blue);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
return false;
}
public void setImageSize(int width, int height) {
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)
imgProduct.getLayoutParams();
lp.width = (int) (width * mDensity);
lp.height = (int) (height * mDensity);
imgProduct.setLayoutParams(lp);
tvInfo.setMaxWidth(lp.width);
}
}
I think I understand your problem. Here I've aligned the image to the left and right of the text and set the ImageView and TextView layout_width to wrap_content. I have used android:layout_below and given it a top margin.
This appears to work on all screen sizes.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="20dp">
<TextView
android:id="#+id/tv_example"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>
<ImageView
android:id="#+id/iv_background"
android:layout_width="wrap_content"
android:layout_height="4dp"
android:layout_alignLeft="#+id/tv_example"
android:layout_alignRight="#id/tv_example"
android:layout_marginTop="4dp"
android:layout_below="#+id/tv_example"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:src="#drawable/example"/>
</RelativeLayout>
You can change the height and top margin of the ImageView if you wish.
Use LinearLayout instead of RelativeLayout:
<?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" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:layout_height="900dp"
android:adjustViewBounds="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:gravity="center"
android:text="Dummy text string" />
</LinearLayout>
Second Solution is use android:drawablePadding=""and android:drawableBottom="" in TextView.
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding=""
android:drawableBottom=""
android:gravity="center"
android:text="Dummy text string" >
</TextView>