How to create center raised tabbar?

前端 未结 2 1655
遥遥无期
遥遥无期 2020-12-30 16:29

I want to create the TabBar as like Below image:

\"enter

Here, all tab bar are

相关标签:
2条回答
  • 2020-12-30 16:56

    you can set the Background image in Tab widget as

    tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.home_h);
    tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.live);
    tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.camera);
    tabHost.getTabWidget().getChildAt(3).setBackgroundResource(R.drawable.profile);
    tabHost.getTabWidget().getChildAt(4).setBackgroundResource(R.drawable.Messege);
    

    create the image as other four like Their Top 20% as Transparent and middle camera create as your Curve base . you will achieve your goal as this.

    Like this where grey part is Transparency part. enter image description here

    enter image description here

    0 讨论(0)
  • 2020-12-30 17:10

    I'm doing something like this:

    <?xml version="1.0" encoding="utf-8"?>
    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
    android:orientation="vertical"
    android:layout_width="match_parent" 
    android:layout_height="match_parent">
    
        <TabWidget 
                android:id="@android:id/tabs" 
                android:layout_width="match_parent" 
                android:layout_height="0dp"
                android:tabStripEnabled="false"/>
    
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/btn1" />
    
            <ImageView 
                android:id="@+id/btn1"        
                android:layout_alignParentBottom="true"      
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/btn2"
                android:src="@drawable/ic_launcher"/>
    
            <ImageView 
                android:id="@+id/btn2"
                android:layout_alignParentBottom="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/btn3"
                android:src="@drawable/ic_launcher"/>
    
             <ImageView 
                android:id="@+id/btn3"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/ic_launcher"/>     
    
             <ImageView 
                android:id="@+id/btn4"
                android:layout_toRightOf="@+id/btn3"
                android:layout_alignParentBottom="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>     
    
            <ImageView 
                android:id="@+id/btn5"
                android:layout_toRightOf="@+id/btn4"
                android:layout_alignParentBottom="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>                                         
    
    </RelativeLayout>
    </TabHost>
    

    I'm get rid off build in TabWidget and setting up my own by LinearLayout. Later you just need to set onClick function in main Tab Activity.

    Like:

    public void onClick(View v)
        {
                switch(v.getId())
                {
                        case R.id.btn1: 
                                tabHost.setCurrentTab(0);
                                break;
                        case R.id.btn2:
                                tabHost.setCurrentTab(1);
                                break;
                        case R.id.btn3:
                                tabHost.setCurrentTab(2);
                                break;
                        case R.id.btn4:
                                tabHost.setCurrentTab(3);
                                break;
                        case R.id.btn5:
                                tabHost.setCurrentTab(4);
                                break;
                }
        }    
    
    0 讨论(0)
提交回复
热议问题