Geek asks and answers

Adding an icon to a tab in android

I want to add an icon to a tab in my application, like on an iPhone.

The screenshot used in the iPhone is in the following link:

enter image description here

I made some image similar to the icon in the Android application, its screenshot is in the following link: enter image description here

This is not the icon that I want, I want the icon on the tab, as in the iPhone

Can anyone suggest me add an icon to login to android? Please help me.

early.

+3
source share
5 answers

This is possible using the Android ViewBadger. Check it out

+7
source

This is an example of how to add a tab icon.

chat_tab.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip" 
    android:layout_height="64dip"
    android:layout_weight="1" 
    android:layout_marginLeft="-3dip" 
    android:layout_marginRight="-3dip" 
    android:orientation="vertical" 
    android:background="@drawable/tab_indicator" >

    <ImageView
        android:id="@+id/chat_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/chat_icon"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:id="@+id/new_notifications" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/chat_icon"
        android:layout_toRightOf="@+id/chat_icon"
        android:layout_marginLeft="-8dp"
        android:layout_marginTop="0dp"
        android:paddingTop="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingBottom="2dp"
        android:textSize="8sp"
        android:textStyle="bold"
        android:textColor="@android:color/primary_text_dark"
        android:background="@drawable/badge"
        android:visibility="gone"/>

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chat"
        style="@android:attr/tabWidgetStyle"
        android:textColor="@android:color/tab_indicator_text"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>


</RelativeLayout>

badge.xml ( ), TextView id: new_notifications background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval" >

    <stroke android:width="2dp" android:color="#FFFFFF" />

    <corners android:radius="10dp"/>

    <padding android:left="2dp" />

    <solid android:color="#ff2233"/>

</shape>


LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View chatTab = inflater.inflate(R.layout.chat_tab, null);

        tvNewNotifications = (TextView) chatTab.findViewById(R.id.new_notifications);

        intent = new Intent().setClass(MainTab.this, Chat.class);
        tabSpec = tabHost
                .newTabSpec("chat")
                .setIndicator(chatTab)
                .setContent(intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP));

, Relative Layout @drawable/tab_indicator tab.xml - , sdk, api sdk, , your_sdk_drive:\SDK\\-8

+6

sroid sroid , TabWidget.

:

  • TabWidget : drawChild (Canvas canvas, View child, long drawingTime)
  • . x child.getRight() . ontop .
  • , HashMap .
  • , , .

, Android:

http://nilisoft.com/?p=622

!

+5

, Android Tab

0

After setting up with a few other solutions, I came up with something simple and hope this helps someone.

create your own tab tab_badge.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent">

<TextView
    android:id="@+id/tab_badge"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:background="@drawable/badge_background"
    android:gravity="center"
    android:layout_centerVertical="true"
    android:textColor="@color/colorWhite"
    android:textSize="20sp"
    android:textStyle="bold"/>

<TextView
    android:id="@+id/tab_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="16sp"
    android:textColor="@color/colorWhite"
    android:text="test"
    android:textStyle="bold"
    android:gravity="center"
    android:textAppearance="@style/Widget.AppCompat.Light.ActionBar.TabText"
    android:layout_toRightOf="@+id/tab_badge"/>

</RelativeLayout>

badge_background.xml is an oval set filled with the color you want for the icon

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="@color/colormaterialred500" />
</shape>

Extend the text view to get the myBadgeView class:

public class myBadgeView extends TextView {

private View target;

public myBadgeView(Context context, View target) {
    super(context);
    init(context, target);
}

private void init(Context context, View target) {
    this.target = target;
}

public void updateTabBadge(int badgeNumber) {
    if (badgeNumber > 0) {
        target.setVisibility(View.VISIBLE);
        ((TextView) target).setText(Integer.toString(badgeNumber));
    }
    else {
        target.setVisibility(View.GONE);
    }
}
}

In your activity, declare a tablayout as follows:

tabLayout = (TabLayout) findViewById(R.id.tab_layout);
TabLayout.Tab tab1 = tabLayout.newTab();
    tab1.setCustomView(R.layout.tab_badge);
    TextView tab_text_1 = (TextView) tab1.getCustomView().findViewById(R.id.tab_text);
    tab_text_1.setText("Tab1");
    tabLayout.addTab(tab1);
    badge1 = new myBadgeView(this, tab1.getCustomView().findViewById(R.id.tab_badge)); tab1.getCustomView().findViewById(R.id.tab_badge);

 //set the badge for the tab
    badge1.updateTabBadge(badge_value_1);
0
source

More articles:


All Articles