Añadir imagen en 3 pestañas

¿Cómo puedo agregar imágenes a la pestaña? Actualmente soy capaz de mover la pestaña a la parte inferior, pero no tengo idea de cómo cambiar la LL Tab1 , LL Tab2 , LL Tab3 a icon.Am I en el camino correcto? Cualquier ayuda sería muy apreciada.

Código xml

 <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:padding="5dp" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp" android:layout_weight="1" > <LinearLayout android:id="@+id/ll_tab1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" /> <LinearLayout android:id="@+id/ll_tab2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" /> <LinearLayout android:id="@+id/ll_tab3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" /> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:background="@color/light_gray" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0"/> </LinearLayout> </TabHost> 

Introduzca aquí la descripción de la imagen

¿Alguien puede ayudar? Muchas gracias !

Pruebe a utilizar TabLayout de Android Design Support Library para cumplir con las directrices de diseño de material de las pestañas .

TabLayout la biblioteca de TabLayout implementa ambas pestañas fijas, donde el ancho de la vista se divide por igual entre todas las pestañas, así como pestañas desplazables, donde las pestañas no tienen un tamaño uniforme y pueden desplazarse horizontalmente.

Para implementar TabLayout consulte esta guía y cómo agregar el icono de las pestañas deslizables para establecer iconos en pestañas mediante setIcon .

 final int[] ICONS = new int[]{ R.drawable.ic_action_document, R.drawable.ic_action_tick, R.drawable.ic_action_trash}; .... TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(mViewPager); tabLayout.getTabAt(0).setIcon(ICONS[0]); tabLayout.getTabAt(1).setIcon(ICONS[1]); tabLayout.getTabAt(2).setIcon(ICONS[2]); 

Para establecer las pestañas en la parte inferior de un TabLayout comprobar – ¿Cómo puedo configurar pestañas en la parte inferior y también ocultar la barra de acción superior? Donde usted pone el TabLayout en un relativoLayout y lo alinea al fondo del padre:

 <android.support.design.widget.TabLayout android:id="@+id/tab_layout" app:tabMode="fixed" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:elevation="6dp" app:tabTextColor="#d3d3d3" app:tabSelectedTextColor="#ffffff" app:tabIndicatorColor="#ff00ff" android:minHeight="?attr/actionBarSize" android:layout_alignParentBottom="true" /> 

Aunque puede poner el diseño de la pestaña en la parte inferior, trate de no usar barras de pestañas inferiores si es posible según la guía Pure Android .

Otras plataformas utilizan la barra de pestañas inferior para cambiar entre las vistas de la aplicación. Por convención de la plataforma, las pestañas de Android para el control de la vista se muestran en las barras de acción en la parte superior de la pantalla en su lugar.

 import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private Toolbar toolbar; private TabLayout tabLayout; private ViewPager viewPager; private int[] tabIcons = { R.drawable.ic_tab_favourite, R.drawable.ic_tab_call, R.drawable.ic_tab_contacts }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); viewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(viewPager); tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(viewPager); setupTabIcons(); } private void setupTabIcons() { tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]); } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new OneFragment(), "ONE"); adapter.addFragment(new TwoFragment(), "TWO"); adapter.addFragment(new ThreeFragment(), "THREE"); viewPager.setAdapter(adapter); } class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>(); private final List<String> mFragmentTitleList = new ArrayList<>(); public ViewPagerAdapter(FragmentManager manager) { super(manager); } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } public void addFragment(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } } } 

Diseño de la pestaña activity_main.xml

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> 

Fragmentos (Clase) utilizados en esta pestaña

 import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class OneFragment extends Fragment{ public OneFragment() { // Required empty public constructor } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_one, container, false); } } 

Archivo XML fragment_one.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/one" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout> 

TwoFragment.java

 import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class TwoFragment extends Fragment{ public TwoFragment() { // Required empty public constructor } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_two, container, false); } } 

Fragment_two.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".fragments.TwoFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/one" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout> 

Puede crear tercer fragmento de clase, y el diseño como he hecho anteriormente.

Ejecutarlo. Espero que esto funcione

Prueba esto,

Puth este activity_main.xml y establecer la altura personalizada a TabLayout.

 <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="@dimen/custom_tab_layout_height" app:tabMode="fixed" app:tabGravity="fill"/> 

Cree un diseño xml denominado custom_tab.xml bajo res ⇒ layout. En este diseño hemos definido la vista personalizada para la pestaña.

 <?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:id="@+id/tab" android:textColor="@color/colorAccent" android:textSize="@dimen/tab_label" android:fontFamily="@string/font_fontFamily_medium"/> 

Abra MainActivity.java y modifique el código como se indica a continuación. Aquí si usted observa el método de setupTabIcons (), he rendido el diseño de custom_tab.xml en cada lengüeta usando debajo líneas de código.

 TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabOne.setText("ONE"); tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 0, 0); tabLayout.getTabAt(0).setCustomView(tabOne); TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabTwo.setText("TWO"); tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_call, 0, 0); tabLayout.getTabAt(1).setCustomView(tabTwo); TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabThree.setText("THREE"); tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_contacts, 0, 0); tabLayout.getTabAt(2).setCustomView(tabThree); 

Prueba esto, muy interesante. Debe ser la solución

http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Bueno, puede colocar un ImageView en su Linearlayout que es cada ficha, o puede establecer un dibujable como un fondo para su LinearLayout. Si su imagen actuará como un fondo, obviamente querrá añadir esa imagen como fondo y no añadir un ImageView como un niño a su LinearLayout. Si va a ser contenido sin embargo, no un fondo, usted debe agregar un ImageView a cada LinearLayout como usted agregaría un niño de cualquier otro tipo a un padre Ver.

  • Lengüetas de diferentes tamaños en Android
  • Tab host - setCurrentTab (x) funciona para la ficha, pero no un contenido
  • ¿Cómo hacer que el tamaño de tablayout sea igual?
  • ¿ActionBarSherlock permite activar / desactivar un ActionBar.Tab?
  • Cómo mostrar siempre las pestañas de ActionBar debajo de ActionBar en Android
  • Android: pestañas desplazables
  • Haga clic en la pestaña de Android
  • Cómo crear pestañas como Twitter o Instagram para trabajar en todas las plataformas Android> 2.2
  • ActionBarSherlock: las pestañas que aparecen ABOVE barra de acciones con vista personalizada
  • Widget de la pestaña siempre en los alfabetos de mayúsculas en Android 4.0
  • Cambiar el ancho de la pestaña en ActionBar.Tab
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.