I am new to badge's concept. In my application i want to show the badges on one tab. For that i used the android-viewbadger.jar file Android ViewBadger
it is working fine with 4 tabs,
TabWidget tabs = (TabWidget) findViewById(android.R.id.tabs);
badge1 = new BadgeView(this, tabs, 1);
badge1.setText("155");
badge1.setBadgePosition(BadgeView.POSITION_BOTTOM_RIGHT);
badge1.toggle();
when i add one more tab here it will look like this
i have already use these badge properties
badge1.setPadding(left, top, right, bottom);
badge1.setTextSize(15);
badge1.setBadgeMargin(5,5);
badge1.setWidth(10);
Setting badge on TabWidget will only show the badge in the space available between the drawable and the boundary of TabWidget, so adding more tabs will compress the badge. Instead using setIndicator(String,Drawable), try this:
ImageView iv = new ImageView(this);
iv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
iv.setImageResource(R.drawable.whoseinterested);
whosespec.setIndicator(iv);
Intent whoseIntent = new Intent(this, BlankActivity.class);
whosespec.setContent(whoseIntent);
tabHost.addTab(whosespec);
badge1 = new BadgeView(this, iv);
badge1.setText("155");
badge1.setTextSize(15);
badge1.setBadgeBackgroundColor(Color.BLACK);
badge1.setTextColor(Color.WHITE);
badge1.toggle();
Screenshot:
You can clearly see in your screenshot that the image in the tab with badge is shifted towards the center. If there is no space between image and its tab boundary, it will not be displayed properly.
Source : Tested myself.
Hi set badge in child of view of tab in imageview
try this
TabWidget tabsw = (TabWidget) rootView.findViewById(android.R.id.tabs);
ViewGroup viewgroup = (ViewGroup) tabsw.getChildAt(0);
viewgroup.getChildCount();
for (int i = 0; i < viewgroup.getChildCount(); i++) {
if (viewgroup.getChildAt(i) instanceof ImageView) {
ImageView new_name = (ImageView) viewgroup.getChildAt(i);
badge7 = new BadgeView(getActivity(),new_name);
badge7.setText("9");
badge7.setTextSize(9);
badge7.setBadgeMargin(0,0);
badge7.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
badge7.toggle();
}
}
Related
I am populating a viewgroup using a for loop and assigning IDs based on the iteration of the for loop. Something like :
For(int i = 0; i<=listLength; i++){
ImageView iv = new Imageview(this);
RelativeLayout r = (RelativeLayout) findViewById(R.id.relativeLayout);
iv.setId(i);
iv.setImageResource(R.drawable.imageResource);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(10, 10);
if(i==0){
params.addRule(RelativeLayout.CENTER_IN_PARENT);
}
else{
params.addRule(RelativeLayout.ABOVE, i-1);
}
iv.setLayoutParams(params);
r.addView(iv);
}
However, when I try to place the next view relative to that ID, the view always appears in the top left corner of the parent view. The first view is in the right place but the others don't seem to know where the previous view is.
I think that it is because the scope of iv.setId(); is limited to that iteration of the for loop. Is that the reason?
Here is my code:
private TabLayout tabLayout;
private int[] tabIcons = {
R.mipmap.ic_compass,
R.mipmap.ic_place,
R.mipmap.ic_passport,
R.mipmap.ic_setting
};
...
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);
The size of icon is according to image size. How could I resize it?
set icons padding
for (int i = 0; i < tablayout.getTabWidget().getChildCount(); i++)
{
tablayout.getTabWidget().getChildAt(i).setPadding(10,10,10,10);
}
If you don't want to use xml for the custom view. Simply create imageview on runtime and add that in tablayout in a particular tab.
ImageView imgView= new ImageView(MainActivity.this);
imgView.setImageResource(drawableImage);
imgView.setPadding(10,10,10,10)
tabLayout.getTabAt(1).setCustomView(imgView);
It will look like this.
change of Icon size android.support.design.widget.TabLayout
for (int i = 0; i < view_bottom_tabLayout.getTabCount(); i++)
{
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(60, 60); //set new width & Height
params.gravity = Gravity.CENTER; //set gravity back to center
view_bottom_tabLayout.getChildAt(i).setLayoutParams(params);//set ur new params
}
To get total control of size I recommend using a custom view to render the tab.
First create a new layout - named "my_custom_tab" for this example
<?xml version="1.0" encoding="utf-8"?>
<!--Change the width, height, scaleType to whatever you like-->
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:id="#+id/icon"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher"/>
Now in your code set the custom image
private void setUpTabs (ViewPager viewPager) {
TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
if (tabs != null) {
tabs.setupWithViewPager(viewPager);
int tabCount = tabAdapter.getCount(); //Assuming you have already somewhere set the adapter for the ViewPager
for (int i = 0; i < tabCount; i++) {
TabLayout.Tab tab = tabs.getTabAt(i);
if (tab != null){
ImageView myCustomIcon = (ImageView) LayoutInflater.from(tabs.getContext()).inflate(R.layout.my_custom_tab, null);
/*Here is where to set image if doing it dynamically
myCustomIcon.setImageBitmap(bitmap);
*/
tab.setCustomView(myCustomIcon);
}
}
}
}
you can do this:
LinearLayout ll = (LinearLayout) tabLayout.getChildAt(0);
for (int i = 0; i < ll.getChildCount(); i++) {
LinearLayout tabView = (LinearLayout) ll.getChildAt(i);
for (int j = 0; j < tabView.getChildCount(); j++) {
if (tabView.getChildAt(j) instanceof TextView) {
TextView textView = (TextView) tabView.getChildAt(j);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) textView.getLayoutParams();
layoutParams.topMargin = 0;
textView.setLayoutParams(layoutParams);
} else if (tabView.getChildAt(j) instanceof ImageView) {
ImageView imageView = (ImageView) tabView.getChildAt(j);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) imageView.getLayoutParams();
layoutParams.bottomMargin = 0;
imageView.setLayoutParams(layoutParams);
}
}
}
I decide to close this question. Since we actually cannot set specific size for icon in TabLayout but padding to it.
Ref:
https://developer.android.com/guide/practices/ui_guidelines/icon_design_tab
one code worked for me, the answer above of Deepak Sachdeva
just i edited it a litlle, try it 100% working
from first i add the tab with custom image
ImageView imgView= new ImageView(getApplicationContext());
imgView.setImageResource(R.drawable.icon);
imgView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imgView.setLayoutParams(new LinearLayout.LayoutParams(100, 100));
tablayout1.addTab(tablayout1.newTab().setCustomView(imgView));
and do that to all your tabs, add them by this way.
I'm trying to show images dynamically by string as ID and want to display it in Horizontal scroll-view as i have 13 cards which can't be fit on screen
Here is my code its working fine but i want it in Horizontal Scroll View
int resID = getResources().getIdentifier(resourceName, "id", getPackageName());
ImageView im = (ImageView) findViewById(resID);
Context context = im.getContext();
int id = context.getResources().getIdentifier(resourceName, "drawable", context.getPackageName());
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(im.getLayoutParams());
lp.setMargins(counter * 43, 0, 0, 0);//left,right,top,bottom
im.setLayoutParams(lp);
im.setImageResource(id);
im.setOnClickListener(this);
counter++;
}
mp = MediaPlayer.create(getApplicationContext(), R.raw.clicksound);
}![enter image description here][2]
As per your requirement I will suggest you to RecyclerView which comes with library which you will have to add and use RecyclerView with horizontal orientation refer to link below.
https://developer.android.com/training/material/lists-cards.html
Or you can do it dynamically as below
here what you can do add Linear horizontal layout inside scrollview say id is imgcontainer then you can do is
create image view dynamically and add to linear layout.
for(int i=0;i<10;i++)
{
//create imageview here and setbg
ImageView imageView = new ImageView(this);
imageView.setImageResource(R.drawable.ic_launcher);
((LinearLayout) findViewById(R.id.imgcontainer)).addView(
imageView, i);
}
int[] image_array = new int[]{R.drawable.image1, R.drawable.image2, ... R.drawable.image10};
LinearLayout ll = (LinearLayout) findViewById (R.id.ll_images);
for (int i=0 ; i<10; i++){
ImageView img = new ImageView (this);
img .setBackgroundResource (image_array [i]);
ll .addView(img );
}
I have created two imageViews promatically as shown below:
public void createImageViews(Integer count){
ImageView[] imageViewArray = new ImageView[count];
for (int i = 0; i < count; i++ ) {
imageViewArray[i] = new ImageView(getBaseContext());
imageViewArray[i].setId(i); // unique property for every imageView
if(i==0){
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
imageViewArray[i].setLayoutParams(params);
imageViewArray[i].setBackgroundResource(imagesForIv[i]);
_UIRLParent.addView(imageViewArray[i]);
Log.v("first", "first"+i);
}
else if(i < 3){
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.RIGHT_OF,imageViewArray[i].getId());
imageViewArray[i].setBackgroundResource(imagesForIv[i]);
_UIRLParent.addView(imageViewArray[i],params);
Log.v("second", "second"+i);
}
}
I just need to place the second imageView toRightOf first imageView. Can someone help me. This is eating away a lot of my time.
try https://stackoverflow.com/a/5191159/1436931
you are using wrong index values.
at line
params.addRule(RelativeLayout.RIGHT_OF,imageViewArray[i].getId());
you aligning current image RIGHT of current image. :)
you need to track the index of last imageView id i.e left Image view
you need something like this
params.addRule(RelativeLayout.RIGHT_OF,imageViewArray[i-1].getId());
I need to separate tab buttons with space, I tried to set margin to views and then add them as tabs, but it does not work, I also thought of adding empty view as divider, but haven't tried it yet, is there any standard way of doing this, or any tweak that can achieve same effect?
Thanks!
Here's the way:
TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
final int tabChildrenCount = tabWidget.getChildCount();
View currentView;
for (int i = 0; i < tabChildrenCount; i++) {
currentView = tabWidget.getChildAt(i);
LinearLayout.LayoutParams currentLayout =
(LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(0, 5, 5, 0);
}
tabWidget.requestLayout();
This is really a good solution even for my problem! Many thanks for that! I used it to implement space before the first and after the last item in the widget to have the possibility to scroll them visible to the center without adding additional (and disturbing, because the widget does not excpect such silly things) invisible buttons.
//pump up space for first entry on the left and last entry on the right!
Display display = getWindowManager().getDefaultDisplay();
//Point size = new Point();
int width = display.getWidth();
View currentView = mTabHost.getTabWidget().getChildAt(0);
LinearLayout.LayoutParams currentLayout = (LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(currentLayout.leftMargin + width/2, currentLayout.topMargin, currentLayout.rightMargin, currentLayout.bottomMargin);
currentView = mTabHost.getTabWidget().getChildAt(mTabHost.getTabWidget().getChildCount()-1);
currentLayout = (LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(currentLayout.leftMargin, currentLayout.topMargin, currentLayout.rightMargin + width/2, currentLayout.bottomMargin);
mTabHost.getTabWidget().requestLayout();